微信小程序页面传递参数方法_微信小程序页面之间传参转换

说明

        页面跳转方法有很多中，但经常会通过一个页面传递参数给另一个页面，非常的常见。但数据量大的时候，通常用字符串传递，但会显得过于臃肿，下面介绍页面传递参数的各种方式。

---

一、页面跳转链接携带参数

例如：A跳转到B页面携带参数

特点：只能传递单个页面，数据量少

A页面:
wx.navigateTo({
    url: '/pages/login/login?id=XXX'
});
 
B页面接收数据
onLoad(options) {
    if (options.id) {
            console.log(options.id)//接收到参数
    }
}

当然，如果过多的参数时候，将会显示url: '/pages/login/login?id=XXX&id2=XXX&id3=XXX...'就会显得很臃肿，不易于维护和修改数据。

二、使用对象进行传递

将过多的数据进行对象化，然后再转成字符类型进行传递，传递之后再换成json格式

特点：只能传递单个页面，数据量可大

A页面:
 handletap: function() {
    var data = JSON.stringify(obj);
    wx.navigataTo({
      url: ‘url?data=’ + data    
    })
}
 
B页面：
onload: function(option) { 
    var data = JSON.parse(option.data)//传递参数
}

 三、监听acceptDataFromOpenerPage事件

监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据

特点：只能传递单个页面，数据量可大

A页面:
 handletap: function() {
    wx.navigateTo({
      url: '/pages/set_up/set_up',
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('adviser_list', adviser_list)
      }
    })
}
 
B页面：
onload: function(option) { 
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('adviser_list', function (data) {
      console.log(adviser_list)//传递参数
    });
}

 

四、通过公共js来缓存传递方法

在app.js文件里面，声明一个对象，然后将需要的数值存储进该方法里面，在需要的页面进行调用即可

特点：可以跨页面、多页面使用、关闭小程序自动清空

app.js{
    globalData: {
        adviser_list："";//数据
    }
}
A页面:
 const App = getApp();
 handletap: function() {
    App.globalData.adviser_list="小明";//重点
    wx.navigateTo({
      url: '/pages/set_up/set_up',
    })
}
 
B页面：
onload: function(option) { 
    let adviser_lis = App.globalData.adviser_lis//传递的参数
}

五、通过缓存来进行数据传递

通过上一个页面缓存到内存里面，然后在需要的页面进行数据获取，可以跨多页面使用，数据永久有效，但是会增加多余缓存，需要清理，传递少的数据，建议使用前面方法

特点：可以跨页面、多页面使用、增加缓存，关闭小程序不会清空，永久使用

A页面:
 handletap: function() {
    let adviser_list={
        name:1,
        age:100
    }
    wx.setStorageSync('adviser_list',userInfo);//重点
    wx.navigateTo({
      url: '/pages/set_up/set_up',
    })
}
 
B页面：
onload: function(option) { 
    let adviser_list= wx.getStorageSync('adviser_list')||'';//获得参数，可以在想要的方法里面获取，不一定需要在onload方法里面。
}

还有组件传递参数，以及数据监听传递参数等，将不作过多的介绍，感兴趣的小伙伴可以在文章中寻找查看。

---

总结

文档主要介绍了页面传递参数的方法，少量的参数单页面使用可以采用方法一、大量的单页面使用可以采用方法二或三，多页面暂时缓存数据可以使用方法四，大量的数据多页面永久使用可以采用方法五。