微信小程序頁面間傳值的實(shí)現(xiàn)方法示例
小程序頁面間傳值
大家晚上好,說晚上好是因?yàn)槭窃谕砩蠈懙?,說這句話是因?yàn)檫@句話開篇不那么突然。那么小程序的頁面間傳值,在我使用這段時(shí)間里,我就非常的主觀的把它們分為wx.navigateTo和非wx.navigateTo的,因?yàn)閣x.navigateTo有一個(gè)事件參數(shù)event,我從當(dāng)前頁跳轉(zhuǎn)到下一頁,如果需要能返回,我都用的wx.navigateTo,那這個(gè)event作用嘛就是可以接收,下一頁返回回來的參數(shù)的。像🦐面這樣:
index.js
wx.navigateTo({ url: url, events: { // 為指定事件添加一個(gè)監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù) acceptDataFromOpenedPage: (data) => { // 這個(gè)方法是隨便命名的,沒有多少要求,不過被打開的頁面emit的時(shí)候第一個(gè)參數(shù)要寫這個(gè)方法名 console.log('從隔壁扔來的酸豆角餡兒的包子',data) }, }, success: function (res) { // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù) // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } })
gebi.js
// 確認(rèn)選擇 confirm() { const eventChannel = this.getOpenerEventChannel() // 這里應(yīng)該是微信自帶的方法,直接用,妥妥的 eventChannel.emit('acceptDataFromOpenedPage', data) // 上一個(gè)頁面event里接收參數(shù)的方法名 wx.navigateBack() // 返回上一個(gè)頁面 }
這兩個(gè)操作就完成了類似于vue2.x的父子組件傳值,這個(gè)emit簡直一摸一樣。
那怎么向下一個(gè)頁面?zhèn)髦的??在不使用store,storage的時(shí)候,可以通過Url后面帶參的方式還有就是上面wx.navigateTo的success回調(diào)。雖然success回調(diào)我沒有用過,但是看了一下感覺非常像我用webworker的時(shí)候向子線程里面?zhèn)髦岛妥泳€程向主線程傳值時(shí),主線程和子線程對數(shù)據(jù)的接收方式。說白了我覺得就是'監(jiān)聽'(addeventlistener) (0o-_^o)
這里要提一嘴,URL路徑的前面就是pages的前面在跳轉(zhuǎn)的時(shí)候帶/,就是這樣
wx.navigateTo({ url: '/pages/index/index' })
小程序的URL傳值
小程序的URL傳值,跟我們普通的路由帶參時(shí)一樣的,都是后面帶問號(?)和且符號(&),但是要分為基本類型的數(shù)據(jù)傳值和引用類型的數(shù)據(jù)傳值。普通的就下面這樣兒:
wx.navigateTo({ url: '/pages/index/index?page=/pages/home/home&id=0077FF' })
是的你沒有看錯(cuò),就是可以這么傳這么個(gè)值'/pages/home/home',別的特殊字符應(yīng)該是要轉(zhuǎn)一下吧,沒試過。
小程序的URL傳對象
那傳個(gè)對象或者數(shù)組的話要:
傳:先轉(zhuǎn)字符串,在編碼。
收:先解碼,在轉(zhuǎn)對象。
data = { name: '包子', type: '牛肉粉絲' } wx.navigateTo({ url: `/pages/index/index?page=/pages/home/home¶ms=${encodeURIComponent(JSON.stringify(data))}` })
onLoad (options) { const {page} = options; const params = JSON.parse(decodeURIComponent(options.params)) }
嗯~就這樣傳,沒得錯(cuò)。
提一嘴store
我這個(gè)項(xiàng)目用的mobx,在mobx里面的拿到的數(shù)組的數(shù)據(jù)就變得很奇怪,不明原因解決方法是。mobx里面有toJS()的方法,用一下就好了。
import { toJS } from 'mobx-miniprogram'; let value = toJS(xxxx)
旋轉(zhuǎn)跳躍
關(guān)于跳轉(zhuǎn),小程序的官網(wǎng)說的很清楚了,我在這里就做個(gè)表格吧。
wx.navigateTo | 跳轉(zhuǎn)到某頁面,可以返回,頁面棧最多10層,event內(nèi)部方法可以獲取下一頁面返回的數(shù)據(jù) |
---|---|
wx.navigateBack | 返回上一頁或者多個(gè)頁面,getCurrentPages(沒用過,都是直接wx.navigateBack()用的)可獲取當(dāng)前頁面棧 |
wx.reLaunch | 關(guān)閉所有頁面,并直接跳轉(zhuǎn)到某一個(gè)頁面 |
---|---|
wx.redirectTo | 關(guān)閉當(dāng)前頁面,并直接跳轉(zhuǎn)到某一個(gè)頁面 |
wx.switchTab. -0-0----> 跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面(官網(wǎng)原話)
關(guān)于EventChannel,就是上面說的頁面間傳值,我也就用了emit,剩下的off,on,once這些我沒用過,不好講因?yàn)闆]得場景帶入不好理解,我估摸著也許可能猜測哈能做發(fā)布訂閱模式來寫一些東西。
兩個(gè)表格是不是覺得分的很清,嘿嘿嘿。其實(shí)是我markdown的表格沒用好,分開感覺居然更合適。
總結(jié)
到此這篇關(guān)于微信小程序頁面間傳值的文章就介紹到這了,更多相關(guān)微信小程序頁面間傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 頁面?zhèn)髦翟斀?/a>
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
- 微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作示例
- 微信小程序中子頁面向父頁面?zhèn)髦祵?shí)例詳解
- 微信小程序 頁面跳轉(zhuǎn)如何實(shí)現(xiàn)傳值
- 微信小程序?qū)崿F(xiàn)兩個(gè)頁面?zhèn)髦档姆椒ǚ治?/a>
- 微信小程序頁面間傳值與頁面取值操作實(shí)例分析
- 微信小程序 頁面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值的方法
- 微信小程序頁面?zhèn)髦祵?shí)例分析
相關(guān)文章
JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法
這篇文章主要介紹了JavaScript基于擴(kuò)展String實(shí)現(xiàn)替換字符串中index處字符的方法,涉及javascript使用substr方法針對字符串進(jìn)行替換操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06momentjs獲取上周、上月、前三個(gè)月的起始和結(jié)束時(shí)間(附完整代碼)
這篇文章主要給大家介紹了關(guān)于momentjs獲取上周、上月、前三個(gè)月的起始和結(jié)束時(shí)間的相關(guān)資料,在需要你進(jìn)行日期處理的地方,必然少不了moment.js的使用,需要的朋友可以參考下2023-07-07基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)逐步顯示文字輸出代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序
本文主要基于向HTML頁面引入JavaScript的幾種方式,分析HTML中JavaScript腳本的執(zhí)行順序問題,通過本文給大家分享瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序,對瀏覽器執(zhí)行javascript及執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01js實(shí)現(xiàn)連續(xù)英文字符自動換行兼容ie6 ie7和firefox
英文字符自動換行,通過js腳本截?cái)嘧址?此方法通用ie6,ie7,firefox,使用CSS控制強(qiáng)制換行實(shí)現(xiàn)不了的朋友可以嘗試下2013-09-09