- 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监听内存告警事件,进行必要的内存清理。