三个页面的传递参数,这一次我想实现的事我在后台取到的数据,展现在A页面传递到B页面展示,B传递到C页面展示。
主要思路:A到B先把B页面的值取出来并setdada出去 然后在从B传单C。
主要代码:
test.wxml
<view class='tiyan' style="background-image: url('{{clock_img}}'); ">
<view class='mask'>
<view class='tiyan1'>{{clock_title}}</view>
<view class='tiyan2'>{{counts}}人参加|{{comm}}次打卡</view>
</view>
test.js
需要传递的参数,传个下一个B页面,照片的形式用的缓存传递的
join: function(e) {
//向下一个页面传递的参数
var id = e.currentTarget.dataset.id
var clock_title = e.currentTarget.dataset.clock_title;//名字
var comm = e.currentTarget.dataset.comm;//打卡次数
var counts = e.currentTarget.dataset.counts;//参与人数
var clock_img = e.currentTarget.dataset.clock_img;//套餐背景
wx.setStorageSync('clock_img',clock_img)
// console.log(clock_img);
// console.log(id, "套餐id")
// console.log(e.currentTarget.dataset,"11")
wx.navigateTo({
url: "./test-1/test-1?project_id=" + id + '&clock_title=' + clock_title + '&comm=' + comm + '&counts=' + counts
})
},
test-1.wxml
<view class='tiyan' style="background-image: url('{{clock_img}}'); " bindtap='join'>
<view class='mask'>
<view class='tiyan1'>{{clock_title}}</view>
<view class='tiyan2'>{{counts}}人参加|{{comm}}次打卡</view>
</view>
</view>
test-1.js
接收数据要在onload函数里接收A页面传递的参数
Page({
/**
* 页面的初始数据
*/
var project_id;
data: {
//顶部套餐信息
clock_title: "",
counts: "",
comm: "",
clock_img: '',
}
onLoad: function (options) {
// 接收上个页面的值 必须在这个方法中 打印一下就有了
console.log(options,"接收test的数据");
var clock_img = wx.getStorageSync('clock_img')
// console.log(clock_img);
this.setData({
clock_title: options.clock_title,
counts: options.counts,
comm:options.comm,
clock_img: clock_img,
project_id:options.project_id
},function(){
wx.removeStorageSync('clock_img')
})
},
//立即参加事件
join: function (e) {
//向下一个C页面传递的参数
console.log(e,"ljcj");
var id = e.currentTarget.dataset.project_id;
console.log(id,"ljcj_id=project_id");
var clock_title = e.currentTarget.dataset.clock_title;//名字
var comm = e.currentTarget.dataset.comm;//打卡次数
var counts = e.currentTarget.dataset.counts;//参与人数
var clock_img = e.currentTarget.dataset.clock_img;//套餐背景
wx.setStorageSync('clock_img', clock_img)
wx.showModal({
title: '报名须知',
content: '-2018年-09-29-2018-12-28 共计91天\r\n-每天任意时段\r\n-必须发布日记打卡才生效\r\n-以上打卡规则解释权归打卡创建者所有\r\n',
cancelText: "免费参加",
confirmText: "同意参加",
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../pay/pay',
});
} else {
wx.navigateTo({
url: '../free/free?project_id='+ id + '&clock_title=' + clock_title + '&comm=' + comm + '&counts=' + counts });
}
},
})
},
})
free.wxml
<view class='tiyan' style="background-image: url('{{clock_img}}'); ">
<view class='mask'>
<view class='tiyan1'>{{clock_title}}</view>
<view class='tiyan2'>{{counts}}人参加|{{comm}}次打卡</view>
</view>
</view>
free.js
接收B页面传递过来的数据
Page({
/**
* 页面的初始数据
*/
var project_id;
data: {
//顶部套餐信息
clock_title: "",
counts: "",
comm: "",
clock_img: '',
},
onLoad: function(options) {
// 接收上个页面的值 必须在这个方法中 打印一下就有了
// console.log(options, "接收test-1的数据");
var clock_img = wx.getStorageSync('clock_img')
this.setData({
clock_title: options.clock_title,
counts: options.counts,
comm: options.comm,
clock_img: clock_img,
}, () => {
wx.removeStorageSync('clock_img')
// console.log(this.data.clock_title)
})
//获取套餐id
project_id = options.project_id //这个project_id就是上个页面test传来的id
// console.log(project_id, "test-1传递的project_id")
}
})