<view>{{text}}</view> <button bindtap="changeText"> Change normal data </button> <view>{{array[0].text}}</view> <button bindtap="changeItemInArray"> Change Array data </button> <view>{{obj.text}}</view> <button bindtap="changeItemInObject"> Change Object data </button> <view>{{newField.text}}</view> <button bindtap="addNewField"> Add new data </button>
//index.js Page({ data: { text: 'init data', array: [{text: 'init data'}], object: { text: 'init data' } }, changeText: function() { // this.data.text = 'changed data' // bad, it can not work this.setData({ text: 'changed data' }) }, changeItemInArray: function() { // you can use this way to modify a danamic data path this.setData({ 'array[0].text':'changed data' }) }, changeItemInObject: function(){ this.setData({ 'object.text': 'changed data' }); }, addNewField: function() { this.setData({ 'newField.text': 'new data' }) } })
以下内容你不需要立马完全弄明白，不过以后它会有帮助。
生命周期
下图说明了 Page 实例的生命周期。
页面的路由
在小程序中所有页面的路由全部由框架进行管理，对于路由的触发方式以及页面生命周期函数如下：
路由方式
触发时机 路由后页面 路由前页面
触发时机
路由后页面
路由前页面
初始化
小程序打开的第一个页面
onLoad，onShow
打开新页面
调用 API wx.navigateTo 或使用组件<navigator />
onLoad，onShow
onHide
页面重定向
调用 API wx.redirectTo 或使用组件<navigator />
onLoad，onShow
onUnload
页面返回
调用 API wx.navigateBack或用户按左上角返回按钮
onShow
onUnload
Tab切换
多 Tab 模式下用户切换 Tab
第一次打开 onLoad，onshow；否则 onShow
onHide