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

使用全局变量

全局变量实际上是定义了一个全局的对象，并在每个页面中引入，在初始化代码的时候会有一个app.js的文件，在这里我们可以定义我们所需要的全局变量。

1
2
3
4
5
6
7
app.js
...
App({
    globalData : {
        foo : 'bar'
    }
});

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

1
2
3
4
5
page.js
...
var app = getApp()
var getFoo = app.globalData.foo
app.globalData.foo = 'fun'

由于app.js在项目中是用来做基础配置的，因此不建议将很多变量放在这里配置，一般情况下会将一些持久化的常量配置在这里，对于经常需要变动的量不建议用这个方法。

使用本地缓存

本地缓存是微信小程序提供的一个功能，可以将用户产生的数据做本地的持久化，类似于NoSQL，可以进行读取和修改的操作，那么在不同的页面之间如何进行数据的交互呢？

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

1
2
3
4
5
6
7
pageA.js
...
var developer = {
    name: 'raymond',
    gender: 'male'
}
wx.setStorageSync('developer', developer);

这样数据就存在了本地，当在B页面需要使用的时候，可以直接的获取到数据池中的数据，并进行CRUD操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
pageB.js
...
#Retrieve
var developer = (wx.getStorageSync('developer') || [])

#Update
developer.name = 'Jiayang'
wx.setStorageSync('developer', developer);

#Delete
wx.removeStorage({
    key: 'developer'
})

注意在回到A页面的时候需要重新读取数据，可以放在生命周期的onShow中对数据重新加载

前后页面的数据传递/父级往子级(模板)的数据传递

我们通常会在页面之间进行跳转/重定向的操作，这时候我们可以将部分数据放在url里面，并在新页面onLoad的时候进行初始化

1
2
3
4
5
6
7
8
9
10
11
pageC.js
...
#Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

#Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

在D页面中我们可以接收到到所传进来的参数：

1
2
3
4
5
6
7
8
9
10
pageD.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
        option: option
    })
  }
})

  • wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面，但是注意 wx.switchTab 中url不能传参数

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

在页面中我们通常会用到一些组件模板，因此在父子之间也会有相应的数据传递：

使用name属性，作为模板的名字。然后在