小程序页面跳转使用转码与解码传递对象

在小程序开发过程中，我们经常会涉及到页面的跳转，在页面的跳转中，需要向下一个页面传递参数，有时候为了防止数据外漏，我们可以进行数据转码，等跳转后再解码！

简单介绍：

•将对象转换成 JSon 字符串

•var infoStr = JSON.stringify(str)

•利用编码函数，将字符串进行编码

•var mUrl = encodeURIComponent(infoStr);

•接收方

•var mInfo = new Object();

•将编码解码，转换成字符串

•var infoStr = decodeURIComponent(options.mUrl);

•通过 JSON 将字符串转换成对象，即可取出对象中的数据

•mInfo = JSON.parse(infoStr );

---

举个例子

1.传递方代码

<block wx:for="{{items}}">
  <view class="row" bindtap="SkipClick" data-item="{{item}}">
    <image class="row_pic" src="{{item.pic}}"></image>
    <view class="row_fr">
      <view class="title">{{item.title}}</view>
      <view class="txt">
        <view class="name">{{item.name}}</view>
        <view class="time">{{item.time}}</view>
      </view>
    </view>
  </view>
</block>

.row {
  height: auto;
  width: calc(100% - 60rpx);
  padding: 20rpx 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
}

.row_pic {
  height: 120rpx;
  width: 120rpx;
}

.row_fr {
  width: calc(100% - 140rpx);
}

.title {
  width: 100%;
  line-height: 88rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 30rpx;
  font-weight: bold;
}

.txt {
  width: 100%;
  color: #999;
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.tempData();
  },

  //测试临时数据
  tempData: function() {
    var items = [{
        pic: "/images/pic.jpg",
        title: "致橡树1",
        name: "舒婷",
        time: "2019-01-02",
        contxt: "我如果爱你——绝不象攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；也不止象泉源，常年送来清凉的慰藉；也不止象险峰，增加你的高度，衬托你的威仪。"
      },
      {
        pic: "/images/pic.jpg",
        title: "致橡树2",
        name: "舒婷",
        time: "2019-01-02",
        contxt: "我如果爱你——绝不象攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；也不止象泉源，常年送来清凉的慰藉；也不止象险峰，增加你的高度，衬托你的威仪。"
      },
      {
        pic: "/images/pic.jpg",
        title: "致橡树3",
        name: "舒婷",
        time: "2019-01-02",
        contxt: "我如果爱你——绝不象攀援的凌霄花，借你的高枝炫耀自己；我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲；也不止象泉源，常年送来清凉的慰藉；也不止象险峰，增加你的高度，衬托你的威仪。"
      },
    ];
    this.setData({
      items: items
    });
  },

  // 跳转到接收页面
  SkipClick: function(e) {
    var info = e.currentTarget.dataset.item
    // 将对象转换成 JSon 字符串
    var infoStr = JSON.stringify(info)
    // 利用编码函数，将字符串进行编码
    var mUrl = encodeURIComponent(infoStr);
    wx.navigateTo({
      url: '/pages/PageSkipping/Receiver/Receiver?mUrl=' + mUrl,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

2、接收方代码

<view class="title">{{mInfo.title}}</view>
<view class="subtitle">
  <view class="name">{{mInfo.name}}</view>
  <view class="time">{{mInfo.time}}</view>
</view>

<view class="con">{{mInfo.contxt}}</view>
<image class="pic" mode="widthFix" src="{{mInfo.pic}}"></image>

page {
  background-color: #fff;
}

.title {
  width: calc(100% - 60rpx);
  line-height: 88rpx;
  font-size: 34rpx;
  font-weight: bold;
  padding: 0 30rpx;
}

.subtitle {
  width: calc(100% - 60rpx);
  line-height: 60rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
  border-bottom: 1px solid #f7f7f7;
}

.con {
  width: calc(100% - 60rpx);
  line-height: 60rpx;
  padding: 0 30rpx;
  background-color: #fff;
  text-indent: 2em;
}

.pic {
  width: 690rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var mInfo = new Object();
    // 将编码解码，转换成字符串
    var infoStr = decodeURIComponent(options.mUrl);
    // 通过 JSON 将字符串转换成对象，即可取出对象中的数据
    mInfo = JSON.parse(infoStr);
    this.setData({
      mInfo: mInfo,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})