微信小程序如何實現頁面間傳值

這篇文章主要介紹“微信小程序如何實現頁面間傳值”，在日常操作中，相信很多人在微信小程序如何實現頁面間傳值問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”微信小程序如何實現頁面間傳值”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

小程序頁面間傳值

大家晚上好，說晚上好是因為是在晚上寫的，說這句話是因為這句話開篇不那么突然。那么小程序的頁面間傳值，在我使用這段時間里，我就非常的主觀的把它們分為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&params=${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.switchTab. -0-0----> 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面（官網原話）

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

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

到此，關于“微信小程序如何實現頁面間傳值”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！