小程序开发-页面间数据传递


小程序中页面跳转的时候,需要将一些值带到下个页面,接下来举例说明页面之间如何传值。

简单类型参数传递

假设我们的需求是从a页面跳转到b页面,将a页面的部分数据传递给b页面,先看看a页面部分:

<view class='scrollView_box' >
      <scroll-view scroll-x >
        <view wx:for="{{todayMultArr}}" wx:key="{{index}}" id="{{index}}" 	bindtap='scrollviewTap'>
          <view class='scrollviewItem_title'>{{item.selectName}}</view>
          <view class='scrollviewItem_title'>{{item.times}}</view>
          <view class='scrollviewItem_title'>{{item.saveDate}}</view>
          <view class='scrollViewItem_infoView'>{{item.description}}</view>
          
          <button data-id='{{item.qnID}}' data-saveDate='{{item.saveDate}}' data-selectName='{{item.selectName}}' class='scrollViewItem_changeBtn' bindtap='editReport'>
            修改
          </button>
          
        </view>
      </scroll-view>
    </view>

重点看button元素的data-XXX属性,这些属性用于该button绑定的触发事件函数取值,从而传递给下一页面。
让我们来看一下a页面对应的js文件,这里只展示这个函数部分:

   /**修改 */
  editReport: function (e) {
    var qnIDStr = e.currentTarget.dataset.id
    var saveDateStr = e.currentTarget.dataset.savedate.replace('-', '').replace('-', '')
    var selectName = e.currentTarget.dataset.selectname
    
    wx.navigateTo({
      url: '../b/b?qnIDStr=' + qnIDStr + '&saveDateStr=' + saveDateStr +'&symptomNameStr='+selectName,
    })
  }

在这里注意一个细节,button元素里面data-XXX属性,此处的XXX不管你是大写还是小写还是大小写混合,在js里面取值的时候,都要全部小写的属性来取值。
在b页面取值方式如下:

onLoad: function (options) {
    var that = this;
    
    that.setData({
      qnIDStr: options.qnIDStr,
      symptomNameStr:options.symptomNameStr, 
      saveDate: options.saveDateStr
    }),
   //业务代码......
}

复杂类型参数传递

当需要传递复杂类型的数据时怎么传值,下面来举个例子。
a页面的js 文件:

addRecordButtonClick: function () {
    var that = this;
   //这里todayMultArr是一个数组,数组的每一个元素是map类型的数据
    var todaySymptomNames=[]
    //遍历todayMultArr数组,取出每一项的中map的selectName属性
    for (var index in that.data.todayMultArr){
      todaySymptomNames.push(that.data.todayMultArr[index].selectName)
    }
    
    wx.navigateTo({
      url: '../AddRecord/AddDiscomfortRecordIndex?qnIDStr=' + qnIDStr + '&todaySymptomNames=' + todaySymptomNames + '&todayMultArr=' + JSON.stringify(that.data.todayMultArr),
    })
  }

在传递这种复杂类型的参数(例:todayMultArr)时,我们需要将其转换成json类型的格式来进行传递,在取值的时候,再把json格式转换成原来的格式

来看看到b页面取值怎么取:

onLoad: function (options) {
    var that = this;
    var todayMultArr = JSON.parse(options.todayMultArr);//再转为原来的格式
   
    that.setData({
      qnIDStr: options.qnIDStr,
      todayMultArr: todayMultArr
    });

    //其他业务代码......
}

其他复杂类型数据也可参考这种形式。

猜你喜欢

转载自blog.csdn.net/innerpeaceScorpio/article/details/84318595