数据 data
- 数据类型同 JavaScript 数据类型:Number、String,Array,Object等等
- 按照用途分为:响应式数据和静态数据;如无特别说明,都是指响应式数据
- 按照来源分为:全局数据和页面数据
- 按照声明分为:外部数据和内部数据;外面数据使用 require 导入
全局数据 globalData
- 在 app.js 中声明并使用
- 作为全局数据使用;也称作状态
- 其他页面使用 const app = getApp()可以获取 app 所有的数据
- 小程序每次重新启动,数据都丢失;可以考虑使用 本地数据缓存 storage 持久化保存
- 敏感数据请不要本地缓存;如商品数据应从后端获取;订单数据需要保存在后端;而购物车、收藏夹可以缓存在本地
App({
globalData: {
// 全局数据
products: wx.getStorageSync('products') || []
}
})
app.globalData 的数据可以在 cconsole 标签页输入并查看
> getApp().globalData
页面数据 data
- 某个页面导入或声明的数据,当前页面内有效
- 响应式数据用于渲染页面,在属性数据 data 中定义
- 静态数据在 page 顶级说明,和 data 同级,且不需要指定数据类型
- 除了使用本页面定义的数据外,还可以使用其它页面的数据,如从 app.js 中获取数据/全局状态、从服务器拉取数据
// 页面外部数据
const app = getApp()
Page({
// 页面静态数据
uploadFileUrl: null
data: {
// 页面响应式数据
age: 18,
msg: 'hi,there',
url: 'glpla.github.io',
tempFilePath: null,
userInfo:{
uage: 18,
ugender: '男',
uname: 'glpla',
usn:20221001
},
goods: []
},
// 自定义函数
getInfo(){
//...
}
// 生命周期函数
onLoad(options) {
// ...
},
})
页面的数据可以在调试器的 AppData 中查看
使用数据 this.data
this.data.varible_name
结构 .wxml
<view>{{varible_name}}</view>
更新数据 setData()
- 逻辑中的数据变化会影响视图 / 结构 wxml 中绑定数据部分的更新
- 接受两个参数:要更新的数据对象和可选的回调函数(在数据更新完成并且页面渲染结束后执行)
- 如果回调函数中,需要渲染页面/更新,则应考虑 数据合并后一次更新
- 修改简单数据
this.setData({
msg: 'welcome back'
})
修改复杂数据;增加或修改属性;通过扩展运算符,使用了回调函数 cb
this.setData({
userInfo": {...userInfo, uage:24}
}, cb)
修改复杂数据;增加或修改属性;路径写法,更简洁
this.setData({
"userInfo.uage": 24
})
如果直接操作 this.data.userInfo 是不是就不用 this.setData()
this.data.userInfo.uage = 18