微信小程序頁(yè)面間值傳遞的兩種方法

更新時(shí)間：2018年11月26日 09:41:15 作者：超超_1號(hào)

這篇文章主要介紹了微信小程序-頁(yè)面間值傳遞的2種方法，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一：url帶參數(shù)傳遞

與前端語(yǔ)言一樣，小程序頁(yè)面間的傳遞可以通過(guò)在路由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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)獲取最新本周周一開(kāi)始的日期（單周日歷卡）
這篇文章主要為大家介紹了js實(shí)現(xiàn)獲取最新本周周一開(kāi)始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
JavaScript中使用Async實(shí)現(xiàn)異步控制
async提供了很多函數(shù)用于異步流程控制，下面是async核心的幾個(gè)函數(shù)，大家通過(guò)本文學(xué)習(xí)下，對(duì)使用async 實(shí)現(xiàn)異步控制相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-08-08
常用DOM整理
js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時(shí)間整理，我將根據(jù)實(shí)例整理那些大大小小的“坑”。
2015-06-06
JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼)
這篇文章主要介紹了JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
微信小程序wx:for 的使用及wx:key綁定兩種方式
wx:for是微信小程序中的一個(gè)列表渲染指令,用于循環(huán)渲染一個(gè)數(shù)組或?qū)ο笾械臄?shù)據(jù),它類(lèi)似于JavaScript中的for循環(huán),可以根據(jù)數(shù)據(jù)的長(zhǎng)度自動(dòng)渲染相應(yīng)的列表項(xiàng),本文給大家介紹微信小程序wx:for 的使用及wx:key綁定兩種方式,感興趣的朋友一起看看吧
2023-12-12
Bootstrap字體圖標(biāo)無(wú)法正常顯示的解決方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap字體圖標(biāo)無(wú)法正常顯示的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
前端防止用戶(hù)重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶(hù)重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧
2018-09-09
基于js實(shí)現(xiàn)的圖片拖拽排序源碼實(shí)例
這篇文章主要給大家介紹了關(guān)于如何基于js實(shí)現(xiàn)的圖片拖拽排序的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
bootstrap輪播圖示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap輪播圖示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05