微信小程序 – 张歆琳

MINA框架
WXS
WXSS
JS环境
启动小程序
生命周期
页面路由
事件

小程序依托于微信宿主环境，凡是微信有的能力，小程序都有。例如UI，振动，监听网络状态，罗盘等。在运营方面有几个点值得关注：

小程序和公众号可以重名
小程序有群能力，可以获取微信群ID，可以限制只能群友使用
支持“附近小程序”功能，后台设置地点后，可以向附近微信展示小程序
支持“星标”功能，点星标，可以在我的小程序中优先展示
小程序最多可以被500个公众号关联，关联后公众号可以在文章里插入小程序卡片
可以直接打开网页，后台配了域名后可以直接打开线上的网页
支持灰度发版，支持线上版本回滚
可以配置客服能力，在客服窗口中发送小程序卡片

MINA框架

微信团队为小程序提供的框架命名为MINA，采用双线程架构：View视图线程（提供UI组件渲染界面）和App Service逻辑线程（提供API处理逻辑），两个线程间通过底层常规的JSBridge进行通信，并调用native能力。

在JS中用setData改变视图绑定的数据，在底层对应执行的是evaluateJavaScript，另外视图层触发消息，传递给逻辑层，也是通过这个函数执行的。这个函数参数是文本，需要经过从文本到原始数据类型的转换，而且还是单通道的，无并发能力，所以执行效率是很低的。小程序卡顿通常不是视图层卡，而是底层evaluateJavaScript这个函数执行不过来了。

webView.evaluateJavascript("javascript:callJS()", new ValueCallback() {
    @Override
    public void onReceiveValue(String s) {
        ... // 返回执行结果
    }
});

理解了框架原理后，有时候可以有些巧妙的做法。例如稍晚点触发可以用wx.nextTick或setTimeout，但因为setData本身就是调用evaluateJavaScript方法，所以可以连续两次setData达到晚点触发的效果：

	 	 
this.setData({ xxx: 0 })	 	 
wx.nextTick(() => { this.setData({ xxx: 100 }) });	 	 

// 等价于	 	 
this.setData({ xxx: 0 })	 	 
setTimeout(() => { this.setData({ xxx: 100 }) }, 17);	 	 

// 等价于，连续两次setData看上去不太优雅，但效果是一样的，能解决问题	 	 
this.setData({ xxx: 0 })	 	 
this.setData({ xxx: 100 })

理解了框架原理后，还可以避免一些问题。因为JS是通过evaluateJavaScript交由底层执行，该方法规定文本序列化后大小不能超过256K，如果页面是瀑布流，数据list可能很大，无限下拉刷新时，setData可能超过256KB。所以对于无限下拉的瀑布流页面，需要将list数据与当前要显示的数据分开。

WXS

WXSS

WXSS相比CSS的差异：

尺寸单位是rpx：Responsive Pixel将屏幕分为750个单元。例如iPhone6屏幕宽度350px，则rpx=0.5px。所以在iPhone6上设60rpx与设30px效果是一样的。
支持@import样式导入
只支持较少的选择器（具体见官网）

JS环境

不同平台有细微差异，它们支持的ECMAScript版本会有不同，可能导致在IDE里运行好好的，真机上出现bug。所以本地开发完，最好在IDE上试试真机调试功能：

IOS用JavaScriptCore运行JS跑在WKWebView上
Android用X5内核运行JS
IDE用nwjs运行JS

启动小程序

小程序首次冷启动会从云端下载代码包。非首次冷启动，会先读取本地缓存，同时异步检测云端是否有新版，如有新版会异步下载新版代码包，并在下次冷启动时应用新版。但热启动（从后台切换回前台）是不会检测云端是否有新版的。如果要想热启动时也应用新版，可以用wx.getUpdateManager这个接口进行处理。

小程序退到后台仍会活在内存中，但有两种情况微信会主动销毁小程序：1.在后台存活超过5分钟。2.短时间内（5s）收到两次内存警告。

生命周期

小程序生命周期：onLaunch，onShow，onHide，onError

页面生命周期：onLoad，onShow，onReady（页面首次渲染完毕），onHide，onUnload等。

每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据。

页面路由

事件

事件分捕获和冒泡阶段。捕获用capture-bind，capture-catch，冒泡用bindtap，catchtap。其中带catch表示会阻止向上冒泡。

<view id="parentView" bindtap="onTap">
  parent，点击触发一次
  <view id="childView" bindtap="onTap" hover-stop-propagation>
    child，点击触发两次，捕获和冒泡阶段分别触发
  </view>
</view>

<view id="parentView" bindtap="onTap">
  parent，点击触发一次
  <view id="childView" catchtap="onTap" hover-stop-propagation>
    child，点击触发一次，只捕获阶段触发一次，冒泡阶段不触发
  </view>
</view>

小程序用wx.onMemoryWarning监听内存告警事件，进行必要的内存清理。