小程序三个页面之间传参

三个页面的传递参数,这一次我想实现的事我在后台取到的数据,展现在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")

}

})

猜你喜欢

转载自blog.csdn.net/Rechal_Mei/article/details/83026853
今日推荐