微信小程序携带参数跳转页面主要有两种方式实现。其一,为页面超链接跳转传值;其二,为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
})
},
…
})
欢迎给位前辈的交流指正