背景
主要是針對小程序開發中頁面之間進行通信的問題，在涉及支付的場景中，用戶從頁面支付入口進行跳轉進行支付之后，回到原來頁面，在原來的頁面需要進行相應的狀態刷新，比如用戶身份狀態、支付狀態、文檔或商品情況。
遇到的問題
在使用百度小程序的 swan.navigateBack 進行回跳頁面時，API中的方法參數不支持攜帶參數，只支持number參數。
所以就涉及了幾個單獨頁面之間的通信問題。如下主要列出了幾個方法，供參考。
swan.navigateBack
| 參數名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
| delta | Number | 否 | 1 | 返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁1。 |
| success | function | 否 | - | 接口調用成功的回調函數 |
| fail | function | 否 | - | 接口調用失敗的回調函數 |
| complete | function | 否 | - | 接口調用結束的回調函數（調用成功、失敗都會執行） |
解決方法
主要有以下三種方法，實現各page之間通信。
解決方法一：利用app.js，設置公共變量
利用app.js的公共特性，將變量掛在APP上。
// app.js 啟動文件App({ globalData: { isLogin: false, userInfo: null, networkError: false, networkType: 'none' }})在其他頁面Page上使用時，使用：
// test.jsconst app = getApp();const commonParams = app.globalData.isLogin;
但是存在的缺點也十分明顯，當數據量比較大、數據關系比較復雜時，維護會比較復雜，邏輯會很混亂。
解決方法二：利用storage
利用小程序的全局storage，對數據進行存取，原理類似于解決方案一。
// 存儲-異步swan.setStorage({ key: 'key', data: 'value'});// 存儲-同步swan.setStorageSync('key', 'value');// 獲取-異步swan.getStorage({ key: 'key', success: function (res) { console.log(res.data); }, fail: function (err) { console.log('錯誤碼：' + err.errCode); console.log('錯誤信息：' + err.errMsg); }});// 獲取-同步const result = swan.getStorageSync('key');解決方法三： 利用事件中心
利用事件中心的進行訂閱和發布。
// event.js 事件中心class Event { on(event, fn, ctx) { if (typeof fn !== 'function') { console.error('fn must be a function'); return; } this._stores = this._stores || {}; (this._stores[event] = this._stores[event] || []).push({ cb: fn, ctx: ctx }); } emit(event, ...args) { this._stores = this._stores || {}; let store = this._stores[event]; if (store) { store = store.slice(0); for (let i = 0, len = store.length; i < len; i++) { store[i].cb.apply(store[i].ctx, args); } } } off(event, fn) { this._stores = this._stores || {}; // all if (!arguments.length) { this._stores = {}; return; } // specific event let store = this._stores[event]; if (!store) { return; } // remove all handlers if (arguments.length === 1) { delete this._stores[event]; return; } // remove specific handler let cb; for (let i = 0, len = store.length; i < len; i++) { cb = store[i].cb; if (cb === fn) { store.splice(i, 1); break; } } return; }}module.exports = Event;在app.js中進行聲明和管理
// app.jsimport Event from './utils/event';App({ event: new Event()})訂閱的頁面中，使用on方法進行訂閱
// view.js 閱讀頁進行訂閱Page({ // 頁面在回退時，會調用onShow方法 onShow() { // 支付成功的回調，調起下載彈層 app.event.on('afterPaySuccess', this.afterPaySuccess, this); }, afterPaySuccess(e) { // ....業務邏輯 }})發布的頁面中，根據業務情況進行發布emit
// paySuccess.jsconst app = getApp();app.event.emit('afterPaySuccess', { docId: this.data.tradeInfo.docId, triggerFrom: 'docCashierBack'});根據事件中心的發布和訂閱，實現了頁面之間的通信，就能實現比如頁面在支付成功后回退時，頁面狀態的改變的場景，同時利于維護頁面之間的數據關系，能通過在發布時傳遞參數，實現數據之間的通信。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
