微信小程序页面传递参数方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序页面传递参数方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

说明

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

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

例如：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方法里面。
}

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