失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序——页面传值

微信小程序——页面传值

时间:2021-12-24 22:19:46

相关推荐

微信小程序——页面传值

微信小程序——页面传值

1.页面正向传值

主要用于从页面A直接跳转到页面B时的传值。

通过url参数传值:

//pageAwx.navigateTo({url: '/pages/pageB?pageType=0&locationCode=' + code + '&locationName=""',})

/pages/pageB为页面路径,参数用“?”分割,多个参数之间用“&”分割。

参数格式为:key = value

//pageB 获取A页面传递的参数/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let pageType = options.pageType,let locationCode = options.locationCode },

2.逆向传值-全局对象app

主要用于页面B返回页面A时的传值.

.在app.js的gloablData中添加全局变量X

//pageB 向A页面传值/*** 生命周期函数--监听页面加载*/const app = getApp()page({onLoad: function (options) {//将数据传给全局对象applet x = “data”app.setData({X: x}) },})

//pageA 取B页面传的值/*** 生命周期函数--监听页面加载*/const app = getApp()page({onShow: function () {//从全局对象app取值let x = app.gloableData.X},})

3.逆向传值-storage

通过本地存储来逆向传值

//pageB 向A页面传值/*** 生命周期函数--监听页面加载*/const app = getApp()page({onLoad: function (options) {//将数据存储到本地let x = “data”try {wx.setStorageSync('data', x)} catch (e) { }},})

//pageA 取B页面传的值/*** 生命周期函数--监听页面加载*/page({onShow: function () {//从本地存储获取数据try {const x = wx.getStorageSync('data')if (x) {// Do something with return value}} catch (e) {// Do something when catch error}},})

4.逆向传值-pages栈传值

//pageB 向A页面传值/*** 生命周期函数--监听页面加载*/var pages = getCurrentPages()var currentPage = pages[pages.length - 1]//当前页面Bvar beforePage = pages[pages.length - 2]//前一个页面Apage({onLoad: function (options) {//将数据存储到页面A中let x = "data"beforePage.setData({X: x})})

5.同页面传值-点击方法传值

有些时候需要将某个控件对应的数据传到对应的点击方法中,那么怎么做呢???

有两种方式:“id” 和 “data-”;可以将需要传递的信息赋给控件的以上两个属性。

//pageA.wxml<image id='{{obj}}' data-b='{{obj1}}' data-c='{{obj2}}' src=''bindtap='tapImg'/>

//pageA.js//图片的点击方法获取wxml中传的信息tapImg:function(e){let obj = e.currentTarget.idlet obj1 = e.currentTarget.dataset.blet obj2 = e.currentTarget.dataset.c}

总结一下希望能帮到大家,祝大家搬砖愉快 ?

如果觉得《微信小程序——页面传值》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。