百度小程序之間的頁面通信過程詳解
背景
主要是針對小程序開發(fā)中頁面之間進行通信的問題，在涉及支付的場景中，用戶從頁面支付入口進行跳轉(zhuǎn)進行支付之后，回到原來頁面，在原來的頁面需要進行相應的狀態(tài)刷新，比如用戶身份狀態(tài)、支付狀態(tài)、文檔或商品情況。
遇到的問題
在使用百度小程序的 swan.navigateBack 進行回跳頁面時，API中的方法參數(shù)不支持攜帶參數(shù)，只支持number參數(shù)。
所以就涉及了幾個單獨頁面之間的通信問題。如下主要列出了幾個方法，供參考。
swan.navigateBack
| 參數(shù)名 | 類型 | 必填 | 默認值 | 說明 |
|---|---|---|---|---|
| delta | Number | 否 | 1 | 返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁1。 |
| success | function | 否 | - | 接口調(diào)用成功的回調(diào)函數(shù) |
| fail | function | 否 | - | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | function | 否 | - | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
解決方法
主要有以下三種方法，實現(xiàn)各page之間通信。
解決方法一：利用app.js，設置公共變量
利用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;
但是存在的缺點也十分明顯，當數(shù)據(jù)量比較大、數(shù)據(jù)關系比較復雜時，維護會比較復雜，邏輯會很混亂。
解決方法二：利用storage
利用小程序的全局storage，對數(shù)據(jù)進行存取，原理類似于解決方案一。
// 存儲-異步
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');
解決方法三： 利用事件中心
利用事件中心的進行訂閱和發(fā)布。
// 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({
// 頁面在回退時，會調(diào)用onShow方法
onShow() {
// 支付成功的回調(diào)，調(diào)起下載彈層
app.event.on('afterPaySuccess', this.afterPaySuccess, this);
},
afterPaySuccess(e) {
// ....業(yè)務邏輯
}
})
發(fā)布的頁面中，根據(jù)業(yè)務情況進行發(fā)布emit
// paySuccess.js
const app = getApp();
app.event.emit('afterPaySuccess', {
docId: this.data.tradeInfo.docId,
triggerFrom: 'docCashierBack'
});
根據(jù)事件中心的發(fā)布和訂閱，實現(xiàn)了頁面之間的通信，就能實現(xiàn)比如頁面在支付成功后回退時，頁面狀態(tài)的改變的場景，同時利于維護頁面之間的數(shù)據(jù)關系，能通過在發(fā)布時傳遞參數(shù)，實現(xiàn)數(shù)據(jù)之間的通信。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進行簡要解析，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
側(cè)欄里的有些內(nèi)容滾動到頁面頂端以后就固定在那個位置，不再跟隨滾動條而滾動，想必很多站長朋友都想實現(xiàn)這個效果吧，接下來為大家詳細介紹下，感興趣的你可不要錯過了哈2013-03-03
今天小編就為大家分享一篇在Layui中實現(xiàn)開關按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
我們在做小程序支付相關的開發(fā)時,總會遇到這些難題,下面這篇文章主要給大家介紹了關于微信小程序調(diào)用支付接口的完整流程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
下面小編就為大家?guī)硪黄猨s判斷空對象的實例(超簡單)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
本文主要介紹了ES6的內(nèi)置對象擴展實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
layui switch 開關監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子
今天小編就為大家分享一篇layui switch 開關監(jiān)聽 彈出確定狀態(tài)轉(zhuǎn)換的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)城市級聯(lián)菜單的2種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
javascript設計模式 – 觀察者模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 觀察者模式,結(jié)合實例形式分析了javascript觀察者模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
判斷ie想必大家都會寫吧，如何將判斷條件變得簡單呢，也許大家并不是很清楚，感興趣的大家可以參考下本文，或許會有所收獲2013-08-08