小程序实践--页面带参传值、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": "正在派件..(派件人:邓裕富,电话: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,//传递参数

    })
  }

二级页面接收展示：

<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()方法中执行。

小程序实践--页面带参传值、JSON数据传递

猜你喜欢