微信小程序頁面間傳值的實現方法示例
小程序頁面間傳值
大傢晚上好,說晚上好是因為是在晚上寫的,說這句話是因為這句話開篇不那麼突然。那麼小程序的頁面間傳值,在我使用這段時間裡,我就非常的主觀的把它們分為wx.navigateTo和非wx.navigateTo的,因為wx.navigateTo有一個事件參數event,我從當前頁跳轉到下一頁,如果需要能返回,我都用的wx.navigateTo,那這個event作用嘛就是可以接收,下一頁返回回來的參數的。像🦐面這樣:
index.js
wx.navigateTo({ url: url, events: { // 為指定事件添加一個監聽器,獲取被打開頁面傳送到當前頁面的數據 acceptDataFromOpenedPage: (data) => { // 這個方法是隨便命名的,沒有多少要求,不過被打開的頁面emit的時候第一個參數要寫這個方法名 console.log('從隔壁扔來的酸豆角餡兒的包子',data) }, }, success: function (res) { // 通過eventChannel向被打開頁面傳送數據 // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } })
gebi.js
// 確認選擇 confirm() { const eventChannel = this.getOpenerEventChannel() // 這裡應該是微信自帶的方法,直接用,妥妥的 eventChannel.emit('acceptDataFromOpenedPage', data) // 上一個頁面event裡接收參數的方法名 wx.navigateBack() // 返回上一個頁面 }
這兩個操作就完成瞭類似於vue2.x的父子組件傳值,這個emit簡直一摸一樣。
那怎麼向下一個頁面傳值呢?在不使用store,storage的時候,可以通過Url後面帶參的方式還有就是上面wx.navigateTo的success回調。雖然success回調我沒有用過,但是看瞭一下感覺非常像我用webworker的時候向子線程裡面傳值和子線程向主線程傳值時,主線程和子線程對數據的接收方式。說白瞭我覺得就是’監聽'(addeventlistener) (0o-_^o)
這裡要提一嘴,URL路徑的前面就是pages的前面在跳轉的時候帶/,就是這樣
wx.navigateTo({ url: '/pages/index/index' })
小程序的URL傳值
小程序的URL傳值,跟我們普通的路由帶參時一樣的,都是後面帶問號(?)和且符號(&),但是要分為基本類型的數據傳值和引用類型的數據傳值。普通的就下面這樣兒:
wx.navigateTo({ url: '/pages/index/index?page=/pages/home/home&id=0077FF' })
是的你沒有看錯,就是可以這麼傳這麼個值’/pages/home/home’,別的特殊字符應該是要轉一下吧,沒試過。
小程序的URL傳對象
那傳個對象或者數組的話要:
傳:先轉字符串,在編碼。
收:先解碼,在轉對象。
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)) }
嗯~就這樣傳,沒得錯。
提一嘴store
我這個項目用的mobx,在mobx裡面的拿到的數組的數據就變得很奇怪,不明原因解決方法是。mobx裡面有toJS()的方法,用一下就好瞭。
import { toJS } from 'mobx-miniprogram'; let value = toJS(xxxx)
旋轉跳躍
關於跳轉,小程序的官網說的很清楚瞭,我在這裡就做個表格吧。
wx.navigateTo | 跳轉到某頁面,可以返回,頁面棧最多10層,event內部方法可以獲取下一頁面返回的數據 |
---|---|
wx.navigateBack | 返回上一頁或者多個頁面,getCurrentPages(沒用過,都是直接wx.navigateBack()用的)可獲取當前頁面棧 |
wx.reLaunch | 關閉所有頁面,並直接跳轉到某一個頁面 |
---|---|
wx.redirectTo | 關閉當前頁面,並直接跳轉到某一個頁面 |
wx.switchTab. -0-0—-> 跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面(官網原話)
關於EventChannel,就是上面說的頁面間傳值,我也就用瞭emit,剩下的off,on,once這些我沒用過,不好講因為沒得場景帶入不好理解,我估摸著也許可能猜測哈能做發佈訂閱模式來寫一些東西。
兩個表格是不是覺得分的很清,嘿嘿嘿。其實是我markdown的表格沒用好,分開感覺居然更合適。
總結
到此這篇關於微信小程序頁面間傳值的文章就介紹到這瞭,更多相關微信小程序頁面間傳值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- None Found