微信小程序页面传递参数方法

说明

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


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

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

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


总结

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

你可能感兴趣的:(微信小程序,小程序,传递参数,获得参数,发送参数)