小程序-頁面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": "正在派件..(派件人:鄧裕富,電話:[phone])[深圳 市]",
      "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
      })
  }