微信小程序跳转页面携带参数

微信小程序携带参数跳转页面主要有两种方式实现。其一,为页面超链接跳转传值;其二,为js文件的wx.navigateTo方法传值。

文章目录

        • 方式一
        • 方式二

方式一

wxml页面超链接传值,:

<view wx:if="{{jobInfo.length>0}}">
	<view wx:for="{{jobInfo}}" wx:key="item.lljobId">
		<navigator url="/page/jobs/edit/singleJob?id={{item.lljobId}}"> <!-- 此处传递数据 -->
			<view class="Job-row">
          		<view class="Job-left">
            		<label>{{item.sJobName}}</label>
            		<text> | {{item.llJobId}} | {{item.IState}}</text>
          		</view>
          		<view class="Job-right">
            		<text>{{item.sUserName}}</text>
          		</view>
        	</view>
        	<!-- 此处省略一万行代码 -->
		</navigator>
	</view>
</view>

方式二

分为三个步骤,两个页面。

步骤一,在页面一的wxml中:

<view wx:if="{{jobInfo.length>0}}">
	<view wx:for="{{jobInfo}}" wx:key="item.lljobId" bindtap="bindSingleJob" data-jobid="{{item.llJobId}}">	<!-- 此处记录需要传递的id数据 -->
		<view class="Job-row">
          <view class="Job-left">
            <label>{{item.sJobName}}</label>
            <text> | {{item.llJobId}} | {{item.IState}}</text>
          </view>
          <view class="Job-right">
            <text>{{item.sUserName}}</text>
          </view>
        </view>
        <!-- 此处省略一万行代码 -->
	</view>
</view>

步骤二,在页面一的js中:

Page({
  ……
  //bindtap绑定的方法
  bindSingleJob: function(e) {
    var jobid = e.currentTarget.dataset.jobid	//需要传递的任务号信息
    wx.navigateTo({
      url: '/pages/jobs/edit/singleJob?id=' + jobid
    })
  },
  ……
})

步骤三,在页面二中接收跳转过程中传递的参数信息,由onLoad方法接收:

Page({

  data: {
    jobId: '',	//任务号
    jobInfo: []	//任务详情信息
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var jobid = options.id //通过options对象获取传递的参数
    this.setData({
      jobId: jobid
    })
  },})

欢迎给位前辈的交流指正

你可能感兴趣的:(小程序)