了解流程注意事项：

之前我们发布过小程序页面传值方式的简单介绍，讲解了小程序开发中两种常见的页面间传值方式。

本期智易程序（微信ID）为大家带来了“倒计时日记”小程序的开发者。 在小程序的开发中，页面间数据传输的方法较多。

文字| 小日子先生

在微信小程序开发中，我们经常会遇到页面之间数据传输或者相互影响的问题。 在实际开发过程中，可以通过以下方法来实现。

使用全局变量

全局变量实际上定义了一个全局对象，并在每个页面中引入。

初始化代码时，小程序会读取一个app.js文件，我们可以在其中定义我们需要的全局变量。

//app.js ... App({ globalData : { foo : 'bar' } });

然后在页面中，可以通过()方法获取全局对象，并且可以读取和更改全局变量：

//page.js ... var app = getApp() var getFoo = app.globalData.foo app.globalData.foo = 'fun'

由于项目中使用app.js进行基础配置，因此不建议在这里配置太多变量。 一般情况下，这里会配置一些持久常量。 对于需要经常更换的数量，不建议使用此方法。

使用本地缓存

本地缓存是微信小程序提供的功能，可以将用户产生的数据持久化到本地，并且可以类似的读取和修改。

那么如何使用它来实现不同页面之间的数据交互呢？

假设我们在A页面保存了用户的信息。

// pageA.js ... var developer = { name: 'raymond', gender: 'male' } wx.setStorageSync('developer', developer);

通过这样做，数据存储在本地。 B页面需要时，可以直接获取数据池中的数据并进行CRUD操作：

//pageB.js ... // Retrieve var developer = (wx.getStorageSync('developer') || []) // Update developer.name = 'Jiayang' wx.setStorageSync('developer', developer); // Delete wx.removeStorage({ key: 'developer' })

需要注意的是，当返回A页面时，小程序需要重新读取数据，此时可以选择在生命周期中重新加载数据。

从父页面到子页面的数据传输（模板）

我们通常会在页面之间跳转和重定向。 这时，我们可以选择在URL中放入一些数据，并在新的页面上进行初始化。

pageC.js ... // Navigate wx.navigateTo({ url: '../pageD/pageD?name=raymond&gender=male', }) // Redirect wx.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。 和wx。 不允许跳转到选项卡包含的页面，只能跳转到wx. 可以用来跳跃。 需要注意的是wx.url中的url。 不能传递参数。

新的wx. 微信提供的接口可以传入参数。

另外，我们通常会在页面中使用一些组件模板，因此父子之间也会有相应的数据传输。

使用 name 属性作为模板的名称。 然后这里使用is属性来声明你需要使用的模板。

{{index}}: {{msg}} Time: {{time}}

然后传入模板需要的数据，如：

<template is="msgItem" data="{{...item}}"/>

Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } })

除了变量之外，传入模板的还可以是事件方法对象。 例如，模板中的单击事件可以使用该模板传递给元素。

通过获取页​​面对象进行数据操作

该方法的本质是获取其他页面的对象原型，然后通过原型方法修改当前对象管理的数据。 示例如下：

//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 }) } })

该方法可以操作页栈中页的数据，并且可以让下级页管理上级页组的数据。

概括

微信小程序中，页面间数据传输和交互的方式有上述但不限于上述几种，在实际应用中可以结合使用。 例如：

实际应用中结合使用可以更好的管理小程序的数据。

如果本文有什么不妥的地方，可以留言讨论。

本文经知乎程序授权转载。 关注微信ID并在微信后台回复“0109”。 一张图教你怎么玩微信小程序。