这是我参与「第四届青训营」笔记创作活动的第10天。

小程序

技术解析

第三方开发应用最简单最方便的方式

webview+jsbridge

小程序原理

如何安全管控，我们可以通过js操作dom，那么我们就把dom的api都禁用掉，都不允许使用。

那不操作 dom 如何控制页面渲染？

比如react、vue，我们只需要关系数据流而不需要操作具体的dom就可以根据数据来渲染页面。

通讯结构

在浏览器中，当 js 操作频繁的时候我们的动画就会卡顿，因为他们是在同一进程中的，但是这种结构将 js 和渲染分离顺带解决了这个问题。这样的通信结构，决定了小程序在数据传递的性能问题。

实现番茄时钟

先把骨架写好

 <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}`
 }

设置数据 timeText、running

 Page({
     data:{
         timeText: formatTime(DEFAULT_TIME),
         running: false,
     },
     
     setTimer:function(){
         this.timer=setInterval(()=>{
             this.time=this.time -1;
             if (this.time<0){
                 clearInterval(this.timer);
                 return;
             }
             this.setData({
                 timeText: formatTime(this.time),
             })
         },1000)
     },
     
     onStart:function(){
         if (!this.timer){
             this.time=DEFAUL_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
         })
     },
 
 })

跨端框架

	remax	taro	megalo	mpvue	uni-app
语法	react	react/vue	vue	vue	vue
厂家	蚂蚁金服	京东	网易	美团	Hbuilder

两种实现方式

编译时和运行时。

编译时

编译时无法抹平差异

编译时方案有个天然的缺陷，无法完全抹平差异，不论是Ract和vue等各种框架，应们的用法部十分多样，而目会不断添动加新的特性而小程序本身确有很多的限制，那么在转换过程中很多特件没有办法讲行转换，所以就要给框架的书写代码的时候动加上很多限制，这背离我们的初衷，所有现在更多的方案采用运行时的方案。

运行时

运行时的方案能够实现主要依赖这两个部分，一个是虚拟dom，一个template组件。

运行时的方案也不是完美的，小程序的setData是性饼瓶颈，运行时的方案由于要传递虚拟dom的各种属性到渲染层，所以性能更加不完美（在一些场景下相比小程序原生语法性能会更差）。

小程序介绍 | 青训营笔记

小程序