欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序頁面間傳值的實現(xiàn)方法示例

 更新時間:2021年04月09日 12:12:26   作者:little_little  
這篇文章主要給大家介紹了關(guān)于微信小程序頁面間傳值的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

小程序頁面間傳值

大家晚上好,說晚上好是因為是在晚上寫的,說這句話是因為這句話開篇不那么突然。那么小程序的頁面間傳值,在我使用這段時間里,我就非常的主觀的把它們分為wx.navigateTo和非wx.navigateTo的,因為wx.navigateTo有一個事件參數(shù)event,我從當前頁跳轉(zhuǎn)到下一頁,如果需要能返回,我都用的wx.navigateTo,那這個event作用嘛就是可以接收,下一頁返回回來的參數(shù)的。像🦐面這樣:

index.js

wx.navigateTo({
  url: url,
  events: {
    // 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)
    acceptDataFromOpenedPage: (data) => { // 這個方法是隨便命名的,沒有多少要求,不過被打開的頁面emit的時候第一個參數(shù)要寫這個方法名
      console.log('從隔壁扔來的酸豆角餡兒的包子',data)
    },
  },
  success: function (res) {
    // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
    // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

gebi.js

// 確認選擇
confirm() {
  const eventChannel = this.getOpenerEventChannel()  // 這里應(yīng)該是微信自帶的方法,直接用,妥妥的
  eventChannel.emit('acceptDataFromOpenedPage', data)  // 上一個頁面event里接收參數(shù)的方法名
  wx.navigateBack()   // 返回上一個頁面
}

這兩個操作就完成了類似于vue2.x的父子組件傳值,這個emit簡直一摸一樣。

那怎么向下一個頁面?zhèn)髦的兀吭诓皇褂胹tore,storage的時候,可以通過Url后面帶參的方式還有就是上面wx.navigateTo的success回調(diào)。雖然success回調(diào)我沒有用過,但是看了一下感覺非常像我用webworker的時候向子線程里面?zhèn)髦岛妥泳€程向主線程傳值時,主線程和子線程對數(shù)據(jù)的接收方式。說白了我覺得就是'監(jiān)聽'(addeventlistener)  (0o-_^o)
這里要提一嘴,URL路徑的前面就是pages的前面在跳轉(zhuǎn)的時候帶/,就是這樣

wx.navigateTo({
  url: '/pages/index/index'
})

小程序的URL傳值

小程序的URL傳值,跟我們普通的路由帶參時一樣的,都是后面帶問號(?)和且符號(&),但是要分為基本類型的數(shù)據(jù)傳值和引用類型的數(shù)據(jù)傳值。普通的就下面這樣兒:

wx.navigateTo({
  url: '/pages/index/index?page=/pages/home/home&id=0077FF'
})

是的你沒有看錯,就是可以這么傳這么個值'/pages/home/home',別的特殊字符應(yīng)該是要轉(zhuǎn)一下吧,沒試過。

小程序的URL傳對象

那傳個對象或者數(shù)組的話要:

傳:先轉(zhuǎn)字符串,在編碼。

收:先解碼,在轉(zhuǎn)對象。

data = {
	name: '包子',
  type: '牛肉粉絲'
}
wx.navigateTo({
  url: `/pages/index/index?page=/pages/home/home&params=${encodeURIComponent(JSON.stringify(data))}`
})
onLoad (options) {
	const {page} = options;
	const params = JSON.parse(decodeURIComponent(options.params))
}

嗯~就這樣傳,沒得錯。

提一嘴store

我這個項目用的mobx,在mobx里面的拿到的數(shù)組的數(shù)據(jù)就變得很奇怪,不明原因解決方法是。mobx里面有toJS()的方法,用一下就好了。

import { toJS } from 'mobx-miniprogram';
let value = toJS(xxxx)

旋轉(zhuǎn)跳躍

關(guān)于跳轉(zhuǎn),小程序的官網(wǎng)說的很清楚了,我在這里就做個表格吧。

wx.navigateTo 跳轉(zhuǎn)到某頁面,可以返回,頁面棧最多10層,event內(nèi)部方法可以獲取下一頁面返回的數(shù)據(jù)
wx.navigateBack 返回上一頁或者多個頁面,getCurrentPages(沒用過,都是直接wx.navigateBack()用的)可獲取當前頁面棧
wx.reLaunch 關(guān)閉所有頁面,并直接跳轉(zhuǎn)到某一個頁面
wx.redirectTo 關(guān)閉當前頁面,并直接跳轉(zhuǎn)到某一個頁面

wx.switchTab. -0-0----> 跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面(官網(wǎng)原話)

關(guān)于EventChannel,就是上面說的頁面間傳值,我也就用了emit,剩下的off,on,once這些我沒用過,不好講因為沒得場景帶入不好理解,我估摸著也許可能猜測哈能做發(fā)布訂閱模式來寫一些東西。

兩個表格是不是覺得分的很清,嘿嘿嘿。其實是我markdown的表格沒用好,分開感覺居然更合適。

總結(jié)

到此這篇關(guān)于微信小程序頁面間傳值的文章就介紹到這了,更多相關(guān)微信小程序頁面間傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論