这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

授课老师：张晓伟

相关内容：认识和了解小程序的业务产品价值；学习和掌握小程序相关技术原理。

发展历程：发展历史、核心数据、小程序生态
业务价值：与web区别、三大价值
技术解析：小程序原理、小程序语法、实现番茄时钟
相关拓展：跨端框架介绍、跨端框架原理

01.发展历程

发展历史

（数据来源：阿拉丁）

17、18年是小程序的发展初期，这个阶段最早由微信开始进行探索。

17年1月：小程序正式发布 ,这个时候小程序就有了很高的关注度，但这个时候还没有完全对个人开发者开发；
17年3月：小程序正式面向个人开发者开放，自此，小程序数量进入爆发期。
17年4月：最重要的带来了称为小程序码的新型图形码，为什么说小程序码很重要。因为它的到来真正能够让线下场景和线上小程序沟通串联起来。
17年9月：支付宝小程序也开始了公测，标志着各大厂竟相进入到小程序领域开始竞争，围绕着小程序各大超级app能够构筑和丰富独属于自己的生态。
进入18年，小程序在1月份带来了打开app的能力，这也标志着小程序为其他引流功能的功能开放

同时在18年，百度小程序，qq小程序、头条小程序(现在叫字节小程序)，都相继上线。“巨头都加速布局小程序生态。
19年，小程序被纳入腾讯最高战略，同时微信为小程序带来更加丰富的入口，开放更多的流量，如，微信主页下拉出现小程序桌面，微信搜索也可以搜索到小程序，同时微信公众号也可以自由挂载小程序，这些入口意味着更多的场景渗透。
19年9月：小程序开放贴片广告，正式开始商业化建设，其实对所有企业来说所以业务最终都是为了赚钱嘛。随着小程序越来越复杂，小程序包4M的限制越来越无法满足，所以在11月份小程序开发包的总包上线上升至12M,让开发者能够构建更加复杂的小程序应用。

虽然小程序出现得不是特别久，但是数量已经非常庞大了。

核心数据

小程序生态

小程序是超级app发展到个阶段的必然产物

以微信为例，为了让更多人的使用微信，单靠自己开发是不现实的。所以利用小程序增强APP的能力，同时开放生开发态，让其他人也能开发自己的小程序。

02.业务价值

与Web区别

有着固定的语法以及统一的版本管理，平台可以更方便的进行审核
平台能够控制各个入口，如二维码，文章内嵌，端内分享。入口上也能带来更好的用户体验
小程序基于特殊的架构，在流畅度上比WEB更好，有更优秀的跳转体验.

三大价值

渠道价值由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是40%和80%
业务探索价值相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值
数字升级价值线下到线上如何做?从轻消费类的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广。

03.技术解析

小程序原理

第三方开发应用最简单最方便的方式：WebView + JSBridge

利用WebView打开APP内置的浏览器。
通过JSBridge，使用JS调用APP的一些Native API接口。使得JS代码和Native代码相互沟通，调用。

但是存在几个问题：

无网络的情况体验不佳
网页切换体验不佳
如何管控保证安全

因为存在一些动态性，比如下面的代码：

if (Date.now() > new Date( '2022-02-02')) {
    document . body. innerHTML = '<hl>hello world</h1> '
}

小程序的优点：

开发门槛低：HTML+CSS+JS
接近原生的使用体验：资源加载+渲染+页面切换（尽可能减少切换WebView页面的渲染成本）
安全管控：Web灵活因为Web可以操作DOM，将DOM相关的api全部禁掉，相当于弄成一个独立的JS沙箱。

问题：不操作DOM如何控制页面渲染？回答：在页面中根据数据处理DOM，最后渲染出页面。

So~ 区分渲染层和逻辑层：

这样的通信结构，改善了小程序在数据传递的性能问题。（在JS中操作DOM如果比较频繁，那么会造成卡顿的问题）。

如果以后开发小程序还会出现卡顿，那么需要考虑自己的数据传递是否存在问题？比如数据量过大等等。

小程序语法

TTML ：对应的就是 HTML

<view
    tt:for="{{list}}"
    tt:if="{{isOpen}}"
    bindtap="onTap"
>

Page({
    data:{
        list:["a","b","c"]
        isOpen:true
    }
    onTap:function(){
        console.log("tap me !")
    }
    
})

TTSS ：对应的就是 CSS

view{
    background-color:"red";
    width:750rpx;
}

标准设计稿以ipone6为准，375px，但是扩展成了750rpx。所以这里的rpx更加细致。

实现番茄时钟

view等价于div标签，使用模板语法{{}}来包裹变量。

<view class="container">
    <view class="clock">
        {{timeText}}
    </view>
    <button tt:if="{{running}}" class="button" bindtap="onReset">重置</button>
    <button tt:else class="button" bindtap="onStart">开始</button>
</view>

格式化时间逻辑：

const DEFAULT_TIME = 25 * 60 ;
function formatTime(time){
  const minutes = Math.floor(time/60);
  const seconds = time % 60;
  const mText = `0${minutes}`.slice(-2);
  const sText = `0${seconds}`.slice(-2);
  return `${mText}:${sText}`;
}

页面的JS代码：设置定时器回调函数，每秒减1，如果减到0，那么就清除定时器。

Page({
  data: {
    time : DEFAULT_TIME,
    timeText:formatTime(DEFAULT_TIME),
    running:false,
  },
  onLoad: function () {
    console.log('Welcome to Mini Code')
  },
  setTimer(){
    this.timer = setInterval(()=>{
      this.time = this.time -1;
      if(this.time<0){
        clearInterval(this.timer);
        return ;
      }
      this.setData({
        timeText:formateTime(this.time),
      })
    },1000)
  }
})

初始函数onStart：绑定开始按钮的事件回调。

  onStart(){
    if(!this.timer){
      this.time = DEFAULT_TIME;
      this.setTimer();
      this.setData({
        running:true
      })
    }
  }

重置函数：绑定重置按钮的事件回调

onReset:function(){
    clearInterval(this.timer)
    this.timer = null
    this.time = DEFAULT_TIME
    this.setData({
        timeText:formatTime(this.time),
        running:false
    })
}

04. 相关拓展

跨端框架介绍

主要解决两个问题：

复杂应用构建
一次开发可以跨多端

技术选型推荐：

react： taro
vue：uniapp

跨端框架原理

原理分为编译时和运行时。

编译时通过AST解析，生成AST语法树。重新组织代码。

举个例子：原本编译前的代码：如果foo，则渲染View，否则渲染Text。

<View>{foo ? <View/> : <Text/> }</View>

编译后：

<view><block tt: if={foo}><view /></block><block tt:else><text /></block></view>

编译时方案的缺陷：无法完全抹平差异。随着React和Vue的新版本发布，各种特性无法完全转化。这时候需要对语法进行限制，比如react中的XX语法不能使用。更多的情况是应用运行时原理。

运行时
- 虚拟DOM + Template组件虚拟DOM：本质是JS的一个对象，通过这样的对象来生成实际的DOM。

实际的运行时结构：react和vue实际操作的都是虚拟DOM，最后根据DOM树传入渲染层。

由于存在数据传输的瓶颈，所以只渲染实际页面能看到的列表项，或者只传输发生修改的DOM。在一些场景下，相比小程序原生语法性能更差。

【青训营】小程序技术全解