去年年末，微信小程序的分包大小已經(jīng)到達(dá)了 12M 大小,一方面說明小程序的確逐步為開發(fā)者放開更大的權(quán)限，另一方面也說明了對于某些小程序 8M 的大小已經(jīng)不夠用了。
我個人今年也是在開發(fā)一個 to B 小程序應(yīng)用。
這里列舉一些跨頁面交互的場景。
對于 B 端應(yīng)用的業(yè)務(wù)需求來說，小程序開發(fā)的復(fù)雜度相對比網(wǎng)頁開發(fā)要復(fù)雜一些。
一個是雙線程的處理機制問題，另一個是頁面棧之間交互問題。
注: 筆者目前只需要開發(fā)微信小程序，為了在小程序頁面中可以使用 properties behaviors observers 等新功能，已經(jīng)使用 Component 構(gòu)造器來構(gòu)造頁面。
具體可以參考微信小程序 Component 構(gòu)造器。
如果你也沒有多端開發(fā)的需求，建議嘗試使用，可以得到不錯的體驗。
性能優(yōu)化類對于小程序在頁面中點擊觸發(fā) wx.navigateTo 跳轉(zhuǎn)其他頁面，中間會有一段時間的空白加載期(對于分包出去的頁面，空白期則會更長)，但是這是小程序內(nèi)部機制，沒有辦法進(jìn)行優(yōu)化。
我們只能眼睜睜的等待這段沒有意思的空白期過去。
當(dāng)考慮到跳轉(zhuǎn)頁面后的第一件事情便是取數(shù)邏輯，那么我們是否能夠進(jìn)行優(yōu)化呢？答案是肯定的。
我們沒有辦法直接在當(dāng)前頁面取得數(shù)據(jù)之后再進(jìn)行跳轉(zhuǎn)操作(這樣操作更不好)，但是我們卻可以利用緩存當(dāng)前的請求，詳情可以參考我之前的博客文章 ——Promise對象 3 種妙用。
代碼如下:const promiseCache = new Map() export function setCachePromise(key, promise) {
promiseCache.set(key, promise) }
export function getCachePromise(key) {
// 根據(jù)key獲取當(dāng)前的數(shù)據(jù) const promise = promiseCache.get(key) // 用完刪除，目前只做中轉(zhuǎn)用途，也可以添加其他用途 promiseCache.delete(key) return promise }
做一份全局的 Map,然后利用 Map 緩存 promise 對象，在跳轉(zhuǎn)之前代碼為:// 導(dǎo)入 setCachePromise 函數(shù) Component({
methods: {
getBookData(id) {
const promise = // promise 請求 setCachePromise(`xxx:${
id}
`, promise) }
, handleBookDetailShow(e) {
const id = e.detail this.getBookData(id) wx.navigateTo({
url: `xx/xx/x?id=${
id}
`}
) }
}
}
)而跳轉(zhuǎn)之后的代碼也如下所示:// 導(dǎo)入 getCachePromise 函數(shù) Component({
properties: {
id: Number }
, lifetimes: {
attached () {
const id = this.data.id // 取得全局緩存的promise const bookPromise = getCachePromise(`xxx:${
id}
`) bookPromise.then((res) => {
// 業(yè)務(wù)處理 }
).catch(error => {
// 錯誤處理 }
) }
}
, methods: {
getBook() {
// 獲取數(shù)據(jù)，以便于 錯誤處理 上拉刷新 等操作 }
}
}
)如此便可以同時處理取數(shù)和頁面加載的邏輯，當(dāng)然，這個對于頁面有耦合性，不利于后續(xù)的刪除與修改。
但考慮如果僅僅加在分包跳轉(zhuǎn)之間可能會有不錯的效果。
想要無侵入式，可以進(jìn)一步學(xué)習(xí)研究 微信小程序之提高應(yīng)用速度小技巧 以及 wxpage 框架，同時考慮到無論是 ToC 還是 ToC 用戶，都有可能存在硬件以及網(wǎng)絡(luò)環(huán)境等問題，該優(yōu)化還是非常值得的。
當(dāng)然微信小程序為了減少冷啟動時間，提供了周期性更新 數(shù)據(jù)預(yù)拉取 功能。
注: 上面的 promiseCache 只作為中轉(zhuǎn)的用途，不作為緩存的用途，如果你考慮添加緩存，可以參考我之前的博客文章—— 前端 api 請求緩存方案。
通知類如果是 pc 端中進(jìn)行交互，對于數(shù)據(jù)的 CRUD。
例如在詳情頁面進(jìn)行了數(shù)據(jù)的修改和刪除，返回列表時候就直接調(diào)取之前存儲的列表查詢條件再次查詢即可，而對于移動端這種下拉滾動的設(shè)計，就沒有辦法直接調(diào)用之前的查詢條件來進(jìn)行搜索。
如果從列表頁面進(jìn)入詳情頁面后，在詳情頁面只會進(jìn)行添加或者修改操作。
然后返回列表頁面。
此時可以提示用戶數(shù)據(jù)已經(jīng)進(jìn)行了修改，請用戶自行決定是否進(jìn)行刷新操作。
如在編輯頁面修改了數(shù)據(jù):const app = getApp() component({
methods: {
async handleSave() {
//... app.globalData.xxxChanged = true //... }
}
}
)列表界面:const app = getApp() component({
pageLifetimes: {
show() {
this.confirmThenRefresh() }
}
, methods: {
confirmThenRefresh() {
// 檢查 globalData，如果當(dāng)前沒有進(jìn)行修改，直接返回 if(!app.globalData.xxxChanged) return wx.showModal({
// ... complete: () => {
// 無論確認(rèn)刷新與否，都把數(shù)據(jù)置為 false app.globalData.xxxChanged = false }
}
) }
}
}
)當(dāng)然了，我們也可以利用 wx.setStorage 或者 getCurrentPage 獲取前面的頁面 setData 來進(jìn)行數(shù)據(jù)通知,以便用戶進(jìn)行頁面刷新。
訂閱發(fā)布類如果僅僅只涉及到修改數(shù)據(jù)的前提下，我們可以選擇讓用戶進(jìn)行刷新操作，但是如果針對于刪除操作而言，如果用戶選擇不進(jìn)行刷新，然后用戶又不小心點擊到了已經(jīng)被刪除的數(shù)據(jù)，就會發(fā)生錯誤。
所以如果有刪除的需求，我們最好在返回列表頁面前就進(jìn)行列表的修改，以免造成錯誤。
mittgithub 上有很多的 pub/sub 開源庫，如果沒有什么特定的需求，找到代碼量最少的就是 mitt 這個庫了,作者是喜歡開發(fā)微型庫的 developit 大佬,著名的 preact 也是出于這位大佬之手。
這里就不做過多的介紹，非常簡單。
大家可能都能看明白，代碼如下(除去 flow 工具的檢查):export default function mitt(all) {
all = all || Object.create(null);
return {
on(type, handler) {
(all[type] || (all[type] = [])).push(handler);
}
, off(type, handler) {
if (all[type]) {
all[type].splice(all[type].indexOf(handler) >>> 0, 1);
}
}
, emit(type, evt) {
(all[type] || []).slice().map((handler) => {
handler(evt);
}
);
(all['
*'
] || []).slice().map((handler) => {
handler(type, evt);
}
);
}
}
;
}
僅僅只有3個方法，on emit以及 off。
只要在多個頁面導(dǎo)入 生成的 mitt() 函數(shù)生成的對象即可(或者直接放入 app.globalData 中也可)。
Component({
lifetimes: {
attached: function() {
// 頁面創(chuàng)建時執(zhí)行 const changeData = (type, data) => {
// 處理傳遞過來的類型與數(shù)據(jù) }
this._changed = changeData bus.on('
xxxchanged'
, this._changed) }
, detached: function() {
// 頁面銷毀時執(zhí)行 bus.off('
xxxchanged'
, this._changed) }
}
}
)這里mitt可以有多個頁面進(jìn)行綁定事件，如果需求僅僅只涉及到兩個頁面之間，我們就可以使用 wx.navigateTo 中的 EventChannel (頁面間事件信息通道)。
可以參考微信小程序wx.navigateTo方法里的events參數(shù)使用詳情及場景,該方案的利好在于，傳遞到下一個頁面的參數(shù)也可以通過 EventChannel 來通知，以便于解決 properties 傳遞數(shù)據(jù)不宜過大的問題。
注: 一個頁面展示很多信息的時候，會造成小程序頁面的卡頓以及白屏。
小程序官方也有長列表組件 recycle-view。
有需求的情況下可以自行研究，這個不在這里詳述。
鼓勵一下如果你覺得這篇文章不錯，希望可以給與我一些鼓勵，在我的 github 博客下幫忙 star 一下。
博客地址推薦教程：
《微信小程序》以上就是小程序跨頁面交互的作用和方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
如何實現(xiàn)小程序推送模板消息
下一篇：
小程序不能跳轉(zhuǎn)鏈接怎么辦？相關(guān)文章相關(guān)視頻微信小程序怎么實現(xiàn)九宮格跳轉(zhuǎn)微信小程序框架目前比較火的是？使用scss開發(fā)微信小程序如何實現(xiàn)微信小程序在電腦上玩小程序跨頁面交互的作用和方法初識微信小程序(1)初識微信小程序(3)深入了解微信小程序(二) [溫州做小程序]