微信小程序頁面之間的通信如何實現

這篇文章主要介紹微信小程序頁面之間的通信如何實現，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一個開始

小程序開發者總會碰到各種頁面之間的通信問題，實現方式也五花八門，比如...

場景還原

首先這是一個電商小程序。

有這樣一個需求：

• 首頁某個地方要展示購物車商品數量。

• 當我在其他頁面加購了商品，首頁數量刷新。

實現方式

方式一：onShow直接請求接口

Page({
 onShow() {
 // ...一些邏輯
 
 // 后端請求新的購物車數量
 this.requestCartNum();
 }
})

不足： 每次onShow都要請求接口，浪費資源。

方式二：globalData存儲購物車數量，onShow中做刷新　　

// 主頁.js
Page({
 onShow() {
  // 在globalData獲取到購物車數據
  let num = globalData.cartNum;
  if (num !== this.data.cartNum) {
   this.setData({
    cartNum: num,
   });
  }
 }
});

// 加購頁.js
Page({
 // 加購后改變globalData的值
 cartAdd(num) {
  globalData.cartNum = globalData.cartNum + num;
 }
})

方式三：加購后獲取首頁實例，調用首頁方法

// 首頁.js
Page({
 onCartAdd(num) {
  this.setData({
   cartNum: this.data.cartNum + num,
  });
 },
});

// 加購頁.js
Page({
 onCartAdd(num) {
  // 加購后獲取到首頁的實例，調用首頁onCartAdd方法
  let pages = getCurrentPages();
  let curPage = pages[0];
  curPage.onCartAdd(num);
 }
})

不足：不確定能不能準確拿到首頁的實例，如果換做其他頁面就很難復用

方法四：事件訂閱與發布

// 首頁.js
Page({
 onLoad() {
  // 首頁監聽事件
  this.$bus.on('cart_add', (num) => {
   this.setData({
    cartNum: this.data.cartNum + num,
   })
  })
 }
})

// 加購頁.js

Page({
 // 加購成功后觸發cart_add事件
 onCartAdd(num) {
  this.$bus.emit('cart_add', num);
 }
})

此方法用事件系統，訂閱發布模式去做的處理。

以上幾種方法中最優解決方案是方法四，利用事件的訂閱與發布，邏輯清晰兼容性好。但是都不可避免的不足是：每一個需要動態顯示購物數量的頁面都需要添加相同的邏輯代碼。

狀態管理方案

單頁應用中最常用的就是組件之間的通信，由此誕生了不同的狀態存儲方案： react用redux， vue用vuex。他們的思路都是類似的。都有一個核心 store 存儲著一切要管理的狀態。

那么，其他框架可以，小程序也可以。以redux為例，實現一套簡單的狀態管理方案。

wxdux的實現

使用前提：有redux基礎

wxdux 類似與redux，以action來描述觸發的行為，reducer來描述state的變化。

1. 小程序入口中注冊

注冊store并添加到globalData中去

import {createStore} from './wxdux/index';
import reducer from './reducer';

const store = createStore(reducer);

App({
 globalData: {
  store,
 },
});

2. reducer實現

寫法與redux類似，功能也類似。

const userReducer = (state = {}, action) => {
 // ...
}

const postReducer = (state = [], action) => {
 // ...
};

const reducers = {
 user: userReducer,
 posts: postReducer,
};

export default reducers;

3. 頁面中使用wxdux

connect方法會將小程序頁面實例與wxdux連接起來，必須提供$useState方法，該方法接收state，返回該頁面所需要的state

import {connect} from './wxdux/index';

Page(connect({
 data: {
  sex: '男',
 },
 onLoad() {
  // ...
 },
 $useState(state) {
  return {
   name: state.name,
  },
 },
}))

4. wxml中使用name

<view>{{name}}</view>

5. 觸發store更新

使用dispatch方法，該方法接收一個對象作為參數，該對象必須包含type字段表示action的類型，wxdux會根據此action更新state并且刷新所有使用name的視圖

import {dispatch} from './wxdux/index';

Page(connect({
 // 某點擊事件觸發，更新姓名為“張三”
 onClick() {
  const updateName = {
   type: 'update_name',
   name: '張三'
  };
  dispatch(updateName);
 }
}))

以上是“微信小程序頁面之間的通信如何實現”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！