小程序页面跳转传参包含链接地址方案

2024年5月29日 121次阅读 来源: Frankeen

场景：

平时如果我们在某个页面A传一个带有参数的网络地址（http://www.ca.com?a=45&dd=23）给页面B；如果直接通过字段复制，往往不能直接得到对应http://www.ca.com?a=45&dd=23，微信小程序会自动把该参数拆分成多个参数；

如：

A界面传参

let webUrl ='http://www.ca.com?a=45&dd=23' 
wx.navigateTo({
  url: '../../partials/chating/chating?webUrl=webUrl ,
})

最后B界面得到参数的却是

 #得到的是
{'webUrl':'http://www.ca.com','a':'45','dd':'23'}
#而不是
{'webUrl':'http://www.ca.com?a=45&dd=23'}

解决方案如下：

传参

先把所有的参数放到一个对象里面，然后把对象转换成json字符串，再然后通过encodeURIComponent对json字符串进行编码，最后再把编码后的数据传到下个页面；

let jsonParam = {
      accid: '1051004266212233216',
      nick: '代诗',
      url: "http://www.ca.com?a=45&dd=23"
}
wx.navigateTo({
  url: '../../partials/chating/chating?chatTo=1051004266212233216'+'&jsonParam=' + encodeURIComponent(JSON.stringify(jsonParam)),
})

取参

先取到经过编码传过来的数据，然后对该数据使用decodeURIComponent进行解码，得到解码后的json字符串，最后对解析json字符串就好；

/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
    let jsonParam = JSON.parse(decodeURIComponent(options.jsonParam));
    console.log(jsonParam);
    //{accid: "1051004266212233216", nick: "代诗", url: "http://www.ca.com?a=45&dd=23"}
}
    原文作者：Frankeen
    原文地址: https://blog.csdn.net/kai_1215/article/details/84303270
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞