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

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

通过公共区域传输数据

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

猜你喜欢

转载自blog.csdn.net/qq_48627750/article/details/124520758