微信小程序的页面间传递数据

Posted 2020-12-12 Akby

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

使用全局变量

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

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

app.js

App({
   globalData : {
      foo:"bar"    
    } 
})

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

page.js

var app =getApp()
var getFoo = app.globalData.foo
app.globalData.foo = ‘fun‘

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

使用本地缓存

本地缓存是微信小程序提供的一个功能， 可以将用户产生的数据做本地的持久化

现在有A，B两个页面，我们在A保存信息

pageA.js

var developer={
    name:‘akby‘,
    gender:‘male‘        
}

wx.setStorageSync(‘developer‘,developer)

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

pageB.js 

var developer = (wx.getStopageSync(‘developer‘) || [] )

developer.name=‘aoko3o‘
wx.setStorageSync(‘developer‘,developer);

wx.removeStorage({
     key:‘developer‘
})

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