微信小程序頁(yè)面間值傳遞的兩種方法
一:url帶參數(shù)傳遞
與前端語(yǔ)言一樣,小程序頁(yè)面間的傳遞可以通過在路由url后接參數(shù),路由的同時(shí)會(huì)將參數(shù)一并傳遞到新的頁(yè)面。
index.wxml:
<!--index.wxml--> <view class="container"> <!-- 使用navigator組件 --> <navigator url="../demo/demo?title=參數(shù)傳遞">title=參數(shù)傳遞</navigator> </view>
demo.js
// pages/demo/demo.js Page({ data: { title:'' }, onLoad: function (options) { console.log(options) //打印options,可以看到title的值可以獲取到 this.setData({ title:options.title //為頁(yè)面中title賦值 }) }, })
demo.wxml
<!--pages/demo/demo.wxml--> <view class='container'> {{title}} </view>
效果圖:
二:將值存入全局變量
我們同樣可以將需要的值存入全局變量中,在需要的地方直接引用就好了。
app.js
//app.js App({ globalData: {} })
index.wxml
<!--index.wxml--> <!-- 點(diǎn)擊觸發(fā)goto_demo函數(shù) --> <view class="container" bindtap='goto_demo'> title=參數(shù)傳遞 </view>
index.js
//index.js //獲取應(yīng)用實(shí)例 const app = getApp() Page({ data: { title:'參數(shù)傳遞' }, goto_demo: function() { app.globalData.title = this.data.title wx.navigateTo({ url: '../demo/demo', }) } })
demo.js
// pages/demo/demo.js //獲取應(yīng)用實(shí)例 const app = getApp() Page({ data: { title:'' }, onLoad: function (options) { console.log(app.globalData.title) //打印options,可以看到title的值可以獲取到 this.setData({ title: app.globalData.title //為頁(yè)面中title賦值 }) }, })
需要用到全局變量時(shí)記得要先獲取應(yīng)用實(shí)例:const app = getApp()
效果圖同上。
總結(jié)
以上所述是小編給大家介紹的微信小程序頁(yè)面間值傳遞的兩種方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解小程序中h5頁(yè)面onShow實(shí)現(xiàn)及跨頁(yè)面通信方案
- 微信小程序?qū)崿F(xiàn)傳遞多個(gè)參數(shù)與事件處理
- 微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁(yè)面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序使用navigateTo數(shù)據(jù)傳遞的實(shí)例
- 微信小程序教程系列之頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞(6)
- 微信小程序在其他頁(yè)面監(jiān)聽globalData中值的變化
- 微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用方法
- 微信小程序獲取用戶信息的兩種方法wx.getUserInfo與open-data實(shí)例分析
- 微信小程序 setData使用方法及常用錯(cuò)誤解決辦法
- 微信小程序跨頁(yè)面?zhèn)鬟fdata數(shù)據(jù)方法解析
相關(guān)文章
原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件
這篇文章主要介紹了原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04Code Review 方法論與實(shí)踐總結(jié)梳理
這篇文章主要為大家介紹了Code Review 方法論與實(shí)踐總結(jié)梳理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn)
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn),本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07JavaScript折半查找(二分查找)算法原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了JavaScript折半查找(二分查找)算法原理與實(shí)現(xiàn)方法,結(jié)合具體問題描述了折半查找算法的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板
這篇文章主要為大家詳細(xì)介紹了Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫板的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法
這篇文章主要介紹了js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法,實(shí)例分析了javascript針對(duì)鼠標(biāo)事件與css樣式圖片的操作技巧,需要的朋友可以參考下2015-02-02