小程序實踐（四）--頁面帶參傳值、JSON數據傳遞

今天有時間寫了一個列子（物流跟蹤），將通過這個例子來向大家介紹一下小程序是如何帶參跳轉、JSON數組的傳遞與解析。先看下效果圖：

讓我們來看一下本次案例中運用到的函數

1）頁面跳轉的方法：

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

    })

2）我們在參數傳遞的時候數據中可能會有一些特殊字符，例如 ：;/?:@&=+$,#所以我們需要用函數將其進行編碼，也就是下面所說的兩個函數　　

encodeURIComponent ();  //函數把字符串編碼為 URI 組件。有了編碼自然也會有相對的解碼函數

decodeURIComponent();//函數可把字符串作為 URI 組件進行解碼。

3）在傳遞json的時候，我們需要將其轉換為字符串傳值，而接收的時候我們需要將json轉換為對象接收，那就用到了下面的兩個函數：

JSON.stringify();//將json轉成字符串傳值
JSON.parse();//將字符串轉成對象接收 

3)我們接收解析好的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,//傳遞參數

    })
  }

 

二級頁面接收展示：

<view class='page_row top'>
  <image class="goods" src='../images/sf.jpg'></image>
  <view class='page_clu logistics'>
    <text>物流公司: 順豐速運{{wuliuType}}</text>
    <text>物流單號:221009887344 {{wl_dh}}</text>
    <text>官方電話:95338 {{wl_phone}}</text>
  </view>
</view>
<view class='br'></view>
<view class="middle">
  <view class="top_sh" hidden="true">
    <view class='top_icon'></view>
    <text class="address">[收貨地址]{{userAddress}}</text>
    <view class='on' style="border-left:1px dashed #d0d0d0;"></view>
  </view>
  <block wx:for="{{Traces}}" wx:key="index" hidden="{{isShowWl}}">
    <view class='order'>
      <text class="time">{{item.time}}</text>
      <view class='icon {{0==index?"in":"no_in"}}'></view>
      <view class='logistics_centent page_clu'>
        <text> {{item.context}}</text>
      </view>
      <view wx:if="{{index==Traces.length-1}}"></view>
      <view wx:else class='on'></view>
    </view>
  </block>
</view>

/**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
      var dataTemp = decodeURIComponent(options.dataList);//函數可把字符串作為 URI 組件進行解碼。
      var Traces = JSON.parse(dataTemp);//航一頁傳過來的json字符串轉化成json數組  物流信息進度
      this.setData({
        Traces: Traces
      })
  }

以上便是案例完整的代碼，粘貼復制即用。最后說一下，所有的頁面獲取的數據都需要在onLoad()方法中執行。