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

- 日理万妓 2022-04-15 02:37 289阅读 0赞

### 场景： ###

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

[http_www.ca.com_a_45_dd_23_B_http_www.ca.com_a_45_dd_23]: http://www.ca.com?a=45&dd=23%EF%BC%89%E7%BB%99%E9%A1%B5%E9%9D%A2B%EF%BC%9B%E5%A6%82%E6%9E%9C%E7%9B%B4%E6%8E%A5%E9%80%9A%E8%BF%87%E5%AD%97%E6%AE%B5%E5%A4%8D%E5%88%B6%EF%BC%8C%E5%BE%80%E5%BE%80%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E5%BE%97%E5%88%B0%E5%AF%B9%E5%BA%94http://www.ca.com?a=45&dd=23%EF%BC%8C%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%8A%8A%E8%AF%A5%E5%8F%82%E6%95%B0%E6%8B%86%E5%88%86%E6%88%90%E5%A4%9A%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%9B