微信小程序开发----实现数据在页面之间的传递

微信小程序在不同页面之间实现数据的传输，主要有三种方式，一种是通过设置全局变量来将数据放在公共区域，这样也使得其他页面能够直接获取相应的数据，另外一种就是直接将数据在页面与页面直接进行传递。第三种就是缓存传数据。接下来我将介绍以上两种页面数据传输的方法。

通过公共区域传输数据

我们都知道在微信小程序中每个页面有他的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