小程序-页面Json数据传递

1）页面跳转的方法：

wx.navigateTo({
      url: '../logistics/logistics?dataList=' + dataList,

    })

2）我们在参数传递的时候数据中可能会有一些特殊字符，例如 ：;/?:@&=+$,#所以我们需要用函数将其进行编码，也就是下面所说的两个函数

encodeURIComponent ();  //函数把字符串编码为 URI 组件。有了编码自然也会有相对的解码函数

decodeURIComponent();//函数可把字符串作为 URI 组件进行解码。

3）在传递json的时候，我们需要将其转换为字符串传值，而接收的时候我们需要将json转换为对象接收，那就用到了下面的两个函数：

JSON.stringify();//将json转成字符串传值
JSON.parse();//将字符串转成对象接收 

4)我们接收解析好的JSON如何展示在页面中呢，小程序中一般多用setData方法改变页面信息或者是刷新之后与后台交互获取最新信息。

this.setData({
    参数：值
}) 

 

例子：

一级页面

<view bindtap='logisiticsGZFn' class="logisi">查看物流</view> 

logisiticsGZFn: function(e) {
    var Traces= [{//JSON模拟数据，项目中可以换取真实的
      "time": "2014/06/25 08:05:37",
      "context": "正在派件..(派件人:邓裕富,电话:18718866310)[深圳 市]",
      "Remark": null
    },
      {
        "time": "2014/06/25 04:01:28",
        "context": "快件在 深圳集散中心 ,准备送往下一站 深圳 [深圳市]",
        "Remark": null
      },
      {
        "time": "2014/06/25 01:41:06",
        "context": "快件在 深圳集散中心 [深圳市]",
        "Remark": null
      },
      {
        "time": "2014/06/24 20:18:58",
        "context": "已收件[深圳市]",
        "Remark": null
      },
      {
        "time": "2014/06/24 20:55:28",
        "context": "快件在 深圳 ,准备送往下一站 深圳集散中心 [深圳市]",
        "Remark": null
      },
      {
        "time": "2014/06/25 10:23:03",
        "context": "派件已签收[深圳市]",
        "Remark": null
      },
      {
        "time": "2014/06/25 10:23:03",
        "context": "签收人是：已签收[深圳市]",
        "Remark": null
      }
    ];
    var dataList=encodeURIComponent(JSON.stringify(Traces));//函数可把字符串作为 URI 组件进行编码
    wx.navigateTo({
      url: '../logistics/logistics?dataList=' + dataList,//传递参数

    })
  }

 

二级页面

onLoad: function(options) {
      var dataTemp = decodeURIComponent(options.dataList);//函数可把字符串作为 URI 组件进行解码。
      var Traces = JSON.parse(dataTemp);//航一页传过来的json字符串转化成json数组  物流信息进度
      this.setData({
        Traces: Traces
      })
  }