溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
背景
主要是針對小程序開發中頁面之間進行通信的問題，在涉及支付的場景中，用戶從頁面支付入口進行跳轉進行支付之后，回到原來頁面，在原來的頁面需要進行相應的狀態刷新，比如用戶身份狀態、支付狀態、文檔或商品情況。
遇到的問題
在使用百度小程序的 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.js const 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.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'
});
根據事件中心的發布和訂閱，實現了頁面之間的通信，就能實現比如頁面在支付成功后回退時，頁面狀態的改變的場景，同時利于維護頁面之間的數據關系，能通過在發布時傳遞參數，實現數據之間的通信。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
