微信小程序——页面传值
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}
总结一下希望能帮到大家,祝大家搬砖愉快 ?
如果觉得《微信小程序——页面传值》对你有帮助,请点赞、收藏,并留下你的观点哦!