了解程序说明:
我们之前已经发布了小程序页面传输方法的简要介绍,解释了小程序开发过程中在页面之间传输值的两种常见方法。
在本期中,知识程序(微信编号zxcx0101)带给您“倒计时日记” 小程序开发人员带给您,小程序正在开发中,有关页面之间数据传输的更多信息多种方法。
文字|小日子先生
在微信小程序的开发中,我们经常遇到页面之间的数据传输或相互影响。在实际的开发过程中,可以通过以下方法实现。
使用全局变量
全局变量实际上定义了一个全局对象,并将其引入每个页面中。
初始化代码时,小程序将读取一个app.js文件,我们可以在其中定义所需的全局变量。
//app.js...App({ globalData : { foo : 'bar' }});
然后在页面上,您可以通过getApp()方法获取全局应用程序对象,并且可以读取和更改全局变量:
//page.js...var app = getApp()var getFoo = app.globalData.fooapp.globalData.foo = 'fun'
由于app.js用于项目中的基本配置,因此不建议在此处放置许多变量。通常情况下,这里配置了一些持久性常量。不建议将这种方法用于经常需要更改的数量。
使用本地缓存
本地缓存是微信小程序提供的功能,可以像NoSQL一样在本地持久存储用户生成的数据,可以读取和修改。
那么如何使用它在不同页面之间交换数据?
假设我们已在A页上保存了用户信息。
// pageA.js...var developer = { name: 'raymond', gender: 'male'}wx.setStorageSync('developer', developer);
这样做,数据将存储在本地。当需要使用页面B时,可以直接从数据池中获取数据并执行CRUD操作:
//pageB.js...// Retrievevar developer = (wx.getStorageSync('developer') || [])// Updatedeveloper.name = 'Jiayang'wx.setStorageSync('developer', developer);// Deletewx.removeStorage({ key: 'developer'})
应注意,返回到A页时,小程序需要再次读取数据。目前,您可以选择在生命周期的onShow中重新加载数据
从父页面到子页面(模板)的数据传输
我们通常在页面之间跳转和重定向。目前,我们可以选择将部分数据放入url中,并在新页面处于onLoad时对其进行初始化。
pageC.js...// Navigatewx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male',})// Redirectwx.redirectTo({ url: '../pageD/pageD?name=raymond&gender=male',})
在D页中,我们可以接收传递的参数,如下所示:
// pageD.js...Page({ onLoad: function(option){ console.log(option.name + 'is' + option.gender) this.setData({ option: option }) }})
wx.navigateTo和wx.redirectTo不允许跳转到选项卡中包含的页面,只能使用wx.switchTab跳转。请注意,wx.switchTab中的url无法传递参数。
微信新提供的wx.reLaunch接口可以传入参数。
此外,我们通常在页面中使用一些组件模板,因此父子之间会有相应的数据传输。
使用name属性作为模板的名称。然后在此处使用is属性声明要使用的模板。
{{index}}: {{msg}}Time: {{time}}
然后传入模板所需的数据,例如:
Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } }})
除了传递到模板中的变量外,它还可以是事件方法对象。例如,可以使用模板将模板中的click事件传递给元素。
通过获取页面对象进行数据操作
该方法的本质是获取其他页面的对象原型,然后通过原型方法setData修改当前对象管理的数据。一个例子如下:
//pageE.js...Page({ data: { index: 1 }})
跳到下一页F后,假设F中有一个操作需要修改E中的数据,则可以使用以下方法:
pageF.js...Page({ changeIndexInE: function(){ var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.setData({ index: 0 }) }})
此方法可以操纵页面堆栈中页面的数据,并且可以管理上一层页面组中下一层页面的数据。
摘要
在微信小程序中,存在以上(但不限于)用于页面之间的数据传输和交互的方法,可以在实际应用中进行组合。例如:
在实际应用中组合使用可以更好地管理小程序的数据。
如果本文不够周到,您可以留言进行讨论。
本文在“已知程序”的授权下转载,请注意微信编号zxcx0101,在微信的背景中回复“ 0109”,一张图片教您如何玩微信小程序。