小程序頁(yè)面間傳值

大家晚上好，說(shuō)晚上好是因?yàn)槭窃谕砩蠈?xiě)的，說(shuō)這句話是因?yàn)檫@句話開(kāi)篇不那么突然。那么小程序的頁(yè)面間傳值，在我使用這段時(shí)間里，我就非常的主觀的把它們分為wx.navigateTo和非wx.navigateTo的，因?yàn)閣x.navigateTo有一個(gè)事件參數(shù)event，我從當(dāng)前頁(yè)跳轉(zhuǎn)到下一頁(yè)，如果需要能返回，我都用的wx.navigateTo，那這個(gè)event作用嘛就是可以接收，下一頁(yè)返回回來(lái)的參數(shù)的。像🦐面這樣：

index.js

wx.navigateTo({
  url: url,
  events: {
    // 為指定事件添加一個(gè)監(jiān)聽(tīng)器，獲取被打開(kāi)頁(yè)面?zhèn)魉偷疆?dāng)前頁(yè)面的數(shù)據(jù)
    acceptDataFromOpenedPage: (data) => { // 這個(gè)方法是隨便命名的，沒(méi)有多少要求，不過(guò)被打開(kāi)的頁(yè)面emit的時(shí)候第一個(gè)參數(shù)要寫(xiě)這個(gè)方法名
      console.log（'從隔壁扔來(lái)的酸豆角餡兒的包子'，data）
    },
  },
  success: function (res) {
    // 通過(guò)eventChannel向被打開(kāi)頁(yè)面?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è)頁(yè)面event里接收參數(shù)的方法名
  wx.navigateBack()   // 返回上一個(gè)頁(yè)面
}

這兩個(gè)操作就完成了類似于vue2.x的父子組件傳值，這個(gè)emit簡(jiǎn)直一摸一樣。

那怎么向下一個(gè)頁(yè)面?zhèn)髦的?？在不使用store，storage的時(shí)候，可以通過(guò)Url后面帶參的方式還有就是上面wx.navigateTo的success回調(diào)。雖然success回調(diào)我沒(méi)有用過(guò)，但是看了一下感覺(jué)非常像我用webworker的時(shí)候向子線程里面?zhèn)髦岛妥泳€程向主線程傳值時(shí)，主線程和子線程對(duì)數(shù)據(jù)的接收方式。說(shuō)白了我覺(jué)得就是'監(jiān)聽(tīng)'(addeventlistener)  (0o-_^o)
這里要提一嘴，URL路徑的前面就是pages的前面在跳轉(zhuǎn)的時(shí)候帶/，就是這樣

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

小程序的URL傳值

小程序的URL傳值，跟我們普通的路由帶參時(shí)一樣的，都是后面帶問(wèn)號(hào)（？）和且符號(hào)（&）,但是要分為基本類型的數(shù)據(jù)傳值和引用類型的數(shù)據(jù)傳值。普通的就下面這樣兒：

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

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

小程序的URL傳對(duì)象

那傳個(gè)對(duì)象或者數(shù)組的話要：

傳：先轉(zhuǎn)字符串，在編碼。

收：先解碼，在轉(zhuǎn)對(duì)象。

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))
}

嗯～就這樣傳，沒(méi)得錯(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)說(shuō)的很清楚了，我在這里就做個(gè)表格吧。

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

關(guān)于EventChannel，就是上面說(shuō)的頁(yè)面間傳值，我也就用了emit，剩下的off，on，once這些我沒(méi)用過(guò)，不好講因?yàn)闆](méi)得場(chǎng)景帶入不好理解，我估摸著也許可能猜測(cè)哈能做發(fā)布訂閱模式來(lái)寫(xiě)一些東西。

兩個(gè)表格是不是覺(jué)得分的很清，嘿嘿嘿。其實(shí)是我markdown的表格沒(méi)用好，分開(kāi)感覺(jué)居然更合適。

總結(jié)

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

最新評(píng)論