小程序05 深刻小程序框架

MINA框架

概述

以前介绍的WXML、WXSS、JS、WXS都是运行在MINA框架上。

MINA的核心是一个响应的数据绑定系统。整个系统分为两块：视图层(View) 和 逻辑层(App Service)。MINA可让数据与视图保持同步很是简单。当作数据修改的时候，只须要在逻辑层修改数据，视图层就会作相应的更新。

 

框架实现

框架原理图以下：

 

 

View视图层：wxml是MINA提供的一套相似html标签的语言以及一系列基础组件。开发者使用wxml文件来搭建页面的基础视图结构，使用wxss文件来控制页面的展示样式。

AppService应用逻辑层：MINA的服务中心，由微信客户端启用异步线程单独加载运行。页面渲染所需的数据、页面交互处理逻辑都在AppService中实现。MINA框架中的AppService使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的DOM操做。小程序中的各个页面能够经过AppService实现数据管理、网络通讯、应用生命周期管理和页面路由。Mananger用于处理事件逻辑和事件处理，API向外提供了应用接口。

MINA框架为页面组件提供了bindtap、bindtouchstart等事件监听相关的属性，来与AppService中的事件处理函数绑定在一块儿，实现也面向AppService层同步用户交互数据。MINA框架同时提供了不少方法将AppService中的数据与页面进行单向绑定，当AppService中的数据变动时，会主动触发对应页面组件的从新渲染。MINA使用virtualdom技术，加快了页面的渲染效率。

 

运行机制

启动

分为热启动和冷启动。

• 冷启动：用户第一次访问小程序，须要到服务器加载小程序代码包。或者用户访问已经被微信主动销毁的小程序。
• 微信销毁小程序时机：小程序进入后台后5分钟；或者小程序在连续两次间隔5秒发生告警。
• 热启动：假如用户已经打开过某小程序，而后在必定时间内再次打开该小程序，此时无需从新启动，只需将后台态的小程序切换到前台，这个过程就是热启动。
• 小程序的更新机制：小程序冷启动时若是发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序须要等下一次冷启动才会应用上。

加载

小程序启动的时候会从CDN服务器上加载小程序代码包，并缓存到微信后台，下载完成后启动小程序。若是本地已经缓存小程序代码包，每次启动小程序，微信会从CDN上查询是否有新版本的代码包，若是有，则在后台下载，下次启动的时候启用新版小程序。

小程序经过AJAX向应用服务器发起请求，应用服务器返回JSON格式的数据。

 

生命周期

应用生命周期

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	生命周期函数--监听小程序错误信息	当小程序调用API失败时候会调用onError钩子，并传入错误信息。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并无直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

示意图：

 

globalData表示小程序全局数据。

示例代码：

App({   onLaunch: function () {     console.log("小程序初始化");   },   onShow: function () {     console.log("小程序进入前台");   },   onHide: function () {     console.log("小程序进入后台");   },   onError: function (msg) {     console.log(msg)   },   globalData: '全局数据' })

 

小程序提供了全局的 getApp()函数，能够获取到小程序实例。

示例代码：

// other.js var appInstance = getApp() console.log(appInstance.globalData) // I am global data

注意：

•  App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就能够拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 尚未生成。
• 经过 getApp() 获取实例以后，不要私自调用生命周期函数。

 

页面生命周期

Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

object 参数说明：

 

 

• 小程序注册完成后，加载页面，触发onLoad方法。
• 面载入后触发onShow方法，显示页面。
• 首次显示页面会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
• 当小程序后台运行或跳转到其余页面时，触发onHide方法。
• 当小程序有后台进入到前台运行或从新进入页面时，触发onShow方法。
• 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

注意：

onLoad: 页面加载。

• 一个页面只会调用一次。
• 参数能够获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显示

• 每次打开页面都会调用一次。

onReady: 页面初次渲染完成

• 一个页面只会调用一次，表明页面已经准备稳当，能够和视图层进行交互。
• 对界面的设置如wx.setNavigationBarTitle请在onReady以后设置。详见生命周期。

onHide: 页面隐藏

• 当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

• 当redirectTo或navigateBack的时候调用。

 

AppService线程和View线程的交互

 

 

由上图可知，小程序由两大线程组成：负责界面的视图线程（view thread）和负责数据、服务处理的服务线程（appservice thread），二者协同工做，完成小程序页面生命周期的调用。

视图线程有四大状态：

1. 初始化状态：初始化视图线程所须要的工做，初始化完成后向 “服务线程”发送初始化完成信号，而后进入等待状态，等待服务线程提供初始化数据。
2. 首次渲染状态：当收到服务线程提供的初始化数据后（json和js中的data数据），渲染小程序界面，渲染完毕后，发送“首次渲染完成信号”给服务线程，并将页面展现给用户。
3. 持续渲染状态：此时界面线程继续一直等待“服务线程”经过this.setdata（）函数发送来的界面数据，只要收到就从新局部渲染，也所以只要更新数据并发送信号，界面就自动更新。
4. 结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。

 

服务线程五大状态：

1. 初始化状态：此阶段仅启动服务线程所需的基本功能，好比信号发送模块。系统的初始化工做完毕，就调用自定义的onload和onshow，而后等待视图线程的“视图线程初始化完成”号。onload是只会首次渲染的时候执行一次，onshow是每次界面切换都会执行，简单理解，这就是惟一差异。
2. 等待激活状态：接收到“视图线程初始化完成”信号后，将初始化数据发送给“视图线程”，等待视图线程完成初次渲染。
3. 激活状态：收到视图线程发送来的“首次渲染完成”信号后，就进入激活状态既程序的正常运行状态，并调用自定义的onReady()函数。此状态下就能够经过 this.setData 函数发送界面数据给界面线程进行局部渲染，更新页面。
4. 后台运行状态：若是界面进入后台，服务线程就进入后台运行状态，从目前的官方解读来讲，这个状态挺奇怪的，和激活状态是相同的，也能够经过setdata函数更新界面的。毕竟小程序的框架刚推出，应该后续会有很大不一样吧。
5. 结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。

 

应用的生命周期对页面生命周期的影响

 

• 小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
• 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
• 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

 

路由

在小程序中全部页面的路由所有由框架进行管理。

路由方式

 

 

对于路由的触发方式以及页面生命周期函数以下：

 

注意：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 能够打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数能够在目标页面的onLoad中获取。

 

Tab 切换对应的生命周期

（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

 

 

事件

定义

• 事件是视图层到逻辑层的通信方式。
• 事件能够将用户的行为反馈到逻辑层进行处理。
• 事件能够绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象能够携带额外信息，如 id, dataset, touches。

事件示例

视图代码：

<!--index.wxml--> <view>   <view class='btn' bindtap='clickme'>点击我   </view> </view>

样式代码：

/**index.wxss**/ .btn{   width: 100px;   height: 30px;   text-align: center;   border: 1px solid black;   line-height: 30px;   margin: 100px auto; }

逻辑层处理代码：

//index.js Page({   //点击事件处理函数   clickme: function(e) {     console.log(e);   } })

控制台输出：

 

事件属性说明：

Tap：触发事件类型。

changedTouches：表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

currentTarget：事件绑定的当前组件。

Target：触发事件的源组件。

detail：自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 表明距离文档左上角的距离。

 

小程序事件模型

和JavaScript的事件模型相似

 

 

• 事件捕获阶段：所绑定的事件，会从最外层节点传播到目标节点。依次检查所通过的节点是否绑定了相同类型的监听回调函数；若是有，则执行相应回调函数。
• 事件处理阶段：事件到达目标节点，执行绑定的监听回调函数。
• 事件冒泡阶段：事件从目标节点向外冒泡，依次检查所通过节点是否绑定了相同类型的监听回调函数；若是有则执行回调函数。

 

可捕获和可冒泡事件

 

tap表示按压屏幕小于350ms。

longpress：按压时间超过350ms的事件操做，不会再触发tap操做。（长按操做推荐）

longtap：触发以后会继续触发tap操做。

 

事件模型示例代码

样式文件：

/* pages/index/index.wxss */ #outter{   border: 1px red solid;   background-color: red;   width: 80%;   height: 200px;   margin: 100px auto;   text-align: center; }   #middle{   border: 1px white solid;   background-color: white;   width: 80%;   height: 120px;   margin: 20px auto; }   #inner{   border: 1px yellow solid;   background-color: yellow;   width: 80%;   height: 50px;   margin: 10px auto; }

 

事件回调函数定义：

// pages/index/index.js Page({   click1() {     console.log("冒泡：点击了C1");   },   click2() {     console.log("冒泡：点击了C2");   },   click3() {     console.log("冒泡：点击了C3");   },   click11() {     console.log("捕获：点击了C1");   },   click22() {     console.log("捕获：点击了C2");   },   click33() {     console.log("捕获：点击了C3");   } })

视图层代码：

<!--pages/index/index.wxml--> <view id="outter" bindtap='click1' capture-bind:tap="click11">   外层容器C1   <view id="middle"  bindtap='click2' capture-bind:tap="click22">     中间层容器C2     <view id="inner"  bindtap='click3' capture-bind:tap="click33">       内层容器C3     </view>   </view> </view>

点击C1，测试结果：

 

 分别点击C三、C二、C1，测试结果：

 

 

注意：

1. bindtap不会阻止事件的冒泡。
2. capture-catch能够阻止冒泡。示例代码以下：

<!--pages/index/index.wxml--> <view id="outter" bindtap='click1' capture-bind:tap="click11">   外层容器C1   <view id="middle"  bindtap='click2' capture-bind:tap="click22">     中间层容器C2     <view id="inner"  bindtap='click3' capture-catch:tap="click33">       内层容器C3     </view>   </view> </view>

测试效果，点击C3容器：