网站推广.NET

网站推广.NET

活动推荐:发展|如何在微信小程序页之间传输数

来源:互联网

了解程序说明:

我们之前已经发布了小程序页面传输方法的简要介绍,解释了小程序开发过程中在页面之间传输值的两种常见方法。

在本期中,知识程序(微信编号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}}

然后传入模板所需的数据,例如:

emplate is="msgItem" data="{{...item}}"/>

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”,一张图片教您如何玩微信小程序。