# 微信小程序
回读官方文档
记录一些要点
# 运行环境
小程序中渲染线程(wxml,wxss)和脚本线程(js)是分开的,分别对应如下:
运行环境 | 逻辑层 | 渲染层 |
---|---|---|
IOS | JavaScriptCore | WKWebView |
Android | V8 | chromium定制内核 |
小程序开发者工具 | NWJS | Chrome WebView |
# API
一般调用的约定:
- wx.on* 开头的 API 是监听某个事件发生的API接口,接受一个 Callback 函数作为参数。当该事件触发时,会调用 Callback 函数。
- 如未特殊约定,多数 API 接口为异步接口 ,都接受一个Object作为参数。
- API的Object参数一般由success、fail、complete三个回调来接收接口调用结果
- wx.get* 开头的API是获取宿主环境数据的接口
- wx.set* 开头的API是写入数据到宿主环境的接口。
# 路由跳转
小程序宿主环境限制了这个页面栈的最大层级为10层
wx.navigateTo 往当前页面栈多推入一个
wx.navigateBack() 退出当前页面栈的最顶上页面, 但不会影响页面栈个数
wx.redirectTo 替换当前页面栈中的最顶层页面,当页面栈到达10层没法再新增的时候,往往就是使用redirectTo这个API进行页面跳转。
wx.switchTab 原来的页面栈会被清空,除了已经声明为Tabbar页外其他页面会被销毁
wx.reLaunch 重启小程序,原来的页面栈会被清空,当前打开的新页面入栈
# setData优化
- 由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB
- 每次只设置需要改变的最小单位数据
- 不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用
- 数据通信的性能与数据量正相关,因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串,则不应使用setData来设置这些数据;
- 与界面渲染无关的数据最好不要设置在data中,可以考虑设置在page对象的其他字段下。
- 组件设置纯数据字段, 合理运用抽象节点
# 性能优化
优化策略
1.精简代码,降低WXML结构和JS代码的复杂性; 2. 合理使用setData调用,减少setData次数和数据量; 3.必要时使用分包优化
减少代码包大小,优化加载速度
- 精简代码,去掉不必要的WXML结构和未使用的WXSS定义
- 减少在代码包中直接嵌入的资源文件
- 压缩图片,使用适当的图片格式
降低通信延迟时间
- 去掉不必要的事件绑定(WXML中的bind和catch),从而减少通信的数据量和次数;
- 事件绑定时需要传输target和currentTarget的dataset,因而不要在节点的data前缀属性中放置过大的数据
提高视图层渲染
- 时间开销大体上与节点树中节点的总量成正比例关系。因而减少WXML中节点的数量可以有效降低初始渲染和重渲染的时间开销,提升渲染性能
- 去掉不必要设置的数据、减少setData的数据量
# 缓存
小程序宿主环境会管理不同小程序的数据缓存,不同小程序的本地缓存空间是分开的,每个小程序的缓存空间上限为10MB,如果当前缓存已经达到10MB,再通过wx.setStorage写入缓存会触发fail回调。
小程序的本地缓存不仅仅通过小程序这个维度来隔离空间,考虑到同一个设备可以登录不同微信用户,宿主环境还对不同用户的缓存进行了隔离,避免用户间的数据隐私泄露。
本地缓存的生命周期: 小程序被开始使用 -----> 小程序被彻底从使用列表中移除。或者手动删除微信缓存数据及或卸载微信。
← 移动端常用知识点总结 web端性能优化 →