百度小程序之間的頁面通訊
author: @TiffanysBearjavascript
主要是針對小程序開發中頁面之間進行通訊的問題,在涉及支付的場景中,用戶從頁面支付入口進行跳轉進行支付以後,回到原來頁面,在原來的頁面須要進行相應的狀態刷新,好比用戶身份狀態、支付狀態、文檔或商品狀況。java
在使用百度小程序的 swan.navigateBack 進行回跳頁面時,API中的方法參數不支持攜帶參數,只支持number參數。git
因此就涉及了幾個單獨頁面之間的通訊問題。以下主要列出了幾個方法,供參考。github
swan.navigateBack小程序
參數名 | 類型 | 必填 | 默認值 | 說明 |
---|---|---|---|---|
delta | Number | 否 | 1 | 返回的頁面數,若是 delta 大於現有頁面數,則返回到首頁1。 |
success | function | 否 | - | 接口調用成功的回調函數 |
fail | function | 否 | - | 接口調用失敗的回調函數 |
complete | function | 否 | - | 接口調用結束的回調函數(調用成功、失敗都會執行) |
主要有如下三種方法,實現各page之間通訊。app
利用app.js的公共特性,將變量掛在APP上。異步
// app.js 啓動文件 App({ globalData: { isLogin: false, userInfo: null, networkError: false, networkType: 'none' } })
在其餘頁面Page上使用時,使用:函數
// test.js const app = getApp(); const commonParams = app.globalData.isLogin;
可是存在的缺點也十分明顯,當數據量比較大、數據關係比較複雜時,維護會比較複雜,邏輯會很混亂。this
利用小程序的全局storage,對數據進行存取,原理相似於解決方案一。code
// 存儲-異步 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.js import 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.js const app = getApp(); app.event.emit('afterPaySuccess', { docId: this.data.tradeInfo.docId, triggerFrom: 'docCashierBack' });
根據事件中心的發佈和訂閱,實現了頁面之間的通訊,就能實現好比頁面在支付成功後回退時,頁面狀態的改變的場景,同時利於維護頁面之間的數據關係,能經過在發佈時傳遞參數,實現數據之間的通訊。
歡迎疑問,但願對你有幫助~