微信小程序

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

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

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

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-bindcapture-catch,冒泡用bindtapcatchtap。其中带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监听内存告警事件,进行必要的内存清理。

发表评论

邮箱地址不会被公开。 必填项已用*标注