微信小程序在不同页面之间实现数据的传输,主要有三种方式,一种是通过设置全局变量来将数据放在公共区域,这样也使得其他页面能够直接获取相应的数据,另外一种就是直接将数据在页面与页面直接进行传递。第三种就是缓存传数据。接下来我将介绍以上两种页面数据传输的方法。
通过公共区域传输数据
我们都知道在微信小程序中每个页面有他的js;wxml.wxss.wx.json等文件,其中每个页面所需要的数据我们都将它存放在js页面中,然而,在我们的项目中有一个文件名为app.js他相当于整个微信小程序的公共空间,我们可以在里面定义公共的数据,以及公共的方法,然后其他页面可以通过特殊的调用方式就可以调用app.js里面存放的数据以及方法。
- 定义数据
首先我们需要在app.js文件中创建我们我们存放数据的集合,并且像其他页面的js页面定义数据的方式一样在集合里面定义我们需要的数据,这里我定义了data集合,并且在里面定义了sum变量,并且将它的值赋为0
App({
data:{
sum:0,
},
})
- 获取数据
如果我们在app.js页面中需要调用我们刚刚上面定义的数据,那么我们就直接用下列语句进行调用
this.data.sum
如果我们想要在其他页面调用此数据,首先需要声明app变量,在进行调用
//微信小程序的非app,js文件调用
onLoad: function (options) {
//声明app变量
var arr = getApp()
//打印全局变量
console.log(arr.data.sum)
}
- 修改数据
如果是在app.js页面进行数据修改
//sum值被改为1
this.data.sum = 1
如果是在其他非app.js页面进行数据修改,先声明app变量,在更改
//声明app变量
var app = getApp()
//修改数据sum为1
app.data.sum = 1
页面之间直接进行数据传输
- 首先找到需要传输的数据,在对其进行数据格式的转换,转换成可以进行数据传送的数据类型,然后再通过页面跳转方法将数据一同进行传送
internal(e){
//现将数据进行转换
const data=JSON.stringify(e.currentTarget.dataset.type)
console.log(data)
//在将数据通过以下语法进行传送
wx.navigateTo({
url: '../add_page/add_page?data='+encodeURIComponent(data),
})
//如果有多个数据值可以这样
//wx.navigateTo({
// url: '../add_page/add_page?data='+encodeURIComponent(data)+"&data1="+encodeURIComponent(data1),
//})
}
- 我们进入数据所要传送到的目标页面,找到传送过来的数据,对其进行解构,就可以使用该数据了
onLoad: function (options) {
//解构目标数据
var data = JSON.parse(decodeURIComponent(options.data))
//直接使用结构之后的数据
this.setData({
message:data })
},
缓存传数据
关于数据在页面之间进行传输,还有一种方式,就是在之前的博客中提到的将数据写入缓存,在从目标页面就从缓存中取出,此方法就不在赘述,有兴趣的小伙伴可以去看一看哦
https://blog.csdn.net/qq_48627750/article/details/123464390