研究背景上一篇文章了解了小程序的生命周期,接下来研究一下数据通信,我觉得清楚了生命周期和数据通信,就能对整个程序有一定的把控能力,定位问题和解决问题的能力将大幅提高 我刚开始撸小程序的时候,觉得看看文档就可以了,导致写了很多垃圾代码坑人坑己,相信大部分初学者也不会去仔细研究文档,更别说啰里啰嗦的指南了,在通读小程序官方指南后,我觉得很有必要为初学者总结一番,教学相长 天生的延时
如何控制合适的时机更新UI小程序作为MVVM框架中的一员,数据驱动是核心,得数据者得天下
在这之前,还是上几张官方的图,有个概念便于后续理解 明确几点概念
一、小程序中数据的作用域1、全局数据// app.js
App({
globalData: 'I am global data' // 全局共享数据
})
// 其他页面脚本other.js
var appInstance = getApp()
console.log(appInstance.globalData) // 输出: I am global data
2、页面共享数据
console.log('加载 page.js')
var count = 0
Page({
onLoad: function() {
count += 1
console.log('第 ' + count + ' 次启动这个页面')
}
})
3、Page实例中的数据
Page({
data: { text: "我用来改变界面显示" },
onLoad: function(options) { },
onReady: function() { },
onShow: function() { },
onHide: function() { },
onUnload: function() { },
text: "我不显示在页面上",
myData:{
a: '我也不显示在页面上',
b: true
}
})
4、自定义组件中的数据
二、合理操作数据,提升性能数据通信
提升性能须遵循的原则调用setData执行重渲染时,视图层将data和setData数据套用在WXML片段上,得到一个新节点树,然后与当前节点树进行比较,这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除,最后,将setData数据合并到data中,并用新节点树替换旧节点树,用于下一次重渲染。 可以看出逻辑层setData发送数据给更新视图时,需要两个线程的一些通信消耗,且不会diff数据,只会一股脑传过去,生成新节点树,每一次通信都需要经过传输、生成、比较、合并 为了提升数据更新的性能,最好遵循以下原则:
其他优化策略:
注意:
三、组件间的数据通信组件区分业务组件和纯组件
四、缓存数据本地数据缓存是小程序存储在当前设备上硬盘上的数据,小程序宿主环境从不同小程序和不同用户两个维度来隔离缓存空间,每个小程序的缓存空间上限为10MB 缓存充当全局数据
利用本地缓存提前渲染界面
Page({
onLoad: function() {
var that = this
var list =wx.getStorageSync("list")
if (list) { // 本地如果有缓存列表,提前渲染
that.setData({
list: list
})
}
wx.request({
url: 'https://test.com/getproductlist',
success: function (res) {
if (res.statusCode === 200) {
list = res.data.list
that.setData({ // 再次渲染列表
list: list
})
wx.setStorageSync("list",list) // 覆盖缓存数据
}
}
})
}
})
五、扩展-状态管理westore引用
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码