收藏
评论

小程序页面之间参数传递方法?

在A页面和B页面之间,A页面带参数跳转到B页面,B页面接收A页面的参数进行处理。

简单的可参考官方文档

示例代码

wx.navigateTo({  url: 'test?id=1'})

//test.js

Page({  onLoad: function(option){  

     console.log(option.query)

 } })


但多类型,长JSON串传参,在实际开发中实现页面传参,总结使用后最终形成如下

跳转例子:可参考

// a.js


let content = {

        a:1,
        b:[
          {
            key:true
          },
          {
            key:false
          }
        ],
        c:{
          title:"页面数据传参"
        },
        d:"JSON字符D"
      }
       
      let list = {
        content: JSON.stringify(content)
      }
 
      wx.navigateTo({
        url: '../B/B?' + util.serialize(list),
      });


// B 页面


onLoad: function(options) {

    // 页面渲染后 执行
    console.log("B options==>", options);
    var self = this;
 
    Object.keys(options).forEach(function(it) {
      options[it] = decodeURIComponent(options[it]);   // 解析中文
    });
 
 
     if (options.content) {
      if (typeof options.content == "string") {
        let content  =  JSON.parse(options.content);
        console.log("content=>",content);
         
      }
    }
 
}


/**

util.serialize (data)  //data '../B/B?id=1'

 * 格式转换,用于对象转url参数解析,
 * 常用于跳转新页面,带参数解析
 */
const serialize = function (data) {
  if (!data) return "";
  var pairs = [];
 
  for (var name in data) {
    if (!data.hasOwnProperty(name)) continue;
    if (typeof data[name] === "function") continue;
    // console.log("name=>",name)
    if (data[name] === null) {
      data[name] = "";
    }
    try{

      var valueName = data[name] || "";

if (data[name] == "0") {

valueName = 0;

}



    }
    catch(e){
      console.log("valueName e=>",e)
    }
    var value = valueName.toString();
 
 
    name = encodeURIComponent(name);
    value = encodeURIComponent(value);
    pairs.push(name + "=" + value);
  }
  return pairs.join("&");
};


B页面打印日志



最后一次编辑于  2018-10-16  (未经腾讯允许,不得转载)
复制链接收藏赞 0

3 个评论

  • 永恒的爱
    永恒的爱
    2018-11-20

    你好,今天我试过了这个的方法是可行的,页面是可以传递参数,可是当用户分享这个页面出去给用户的时候,用户打开B页面的时候,不能解码数据,有什么办法解决吗


    2018-11-20
    赞同
    回复 1
    • 同步
      同步
      2018-11-21
      /**
       *页面A,转发页
        * 用户点击右上角分享
        */
       onShareAppMessage: function () {
       
         var self = this;
       
         let content   = self.data.content  ;
         let title = content.title || "";
          
         let list = {
           // key: 'value'
           content  : JSON.stringify(content)
         }
       
         let path =  '../B/B?' + util.serialize(list),
       
       
         console.log("onShareAppMessage path=>",path)
       
       
         return {
           title: title,
           path: path,
         }
       
       }


      转发的参数需要封装一下的,小程序支持自定义转发内容,所以在转发页可以把path修改成带参数的,跟跳转链接一样。可以参考下

      2018-11-21
      赞同
      回复
  • 永恒的爱
    永恒的爱
    2018-11-23

    好的,已经解决问题了

    2018-11-23
    赞同
    回复