怎么在小程序中實現跨頁面交互

怎么在小程序中實現跨頁面交互？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

性能優化類

對于小程序在頁面中點擊觸發 wx.navigateTo 跳轉其他頁面，中間會有一段時間的空白加載期(對于分包出去的頁面，空白期則會更長)，但是這是小程序內部機制，沒有辦法進行優化。我們只能眼睜睜的等待這段沒有意思的空白期過去。

當考慮到跳轉頁面后的第一件事情便是取數邏輯，那么我們是否能夠進行優化呢？答案是肯定的。我們沒有辦法直接在當前頁面取得數據之后再進行跳轉操作(這樣操作更不好)，但是我們卻可以利用緩存當前的請求，詳情可以參考我之前的博客文章 ——Promise對象 3 種妙用。

代碼如下:

const promiseCache = new Map()

export function setCachePromise(key, promise) {
 promiseCache.set(key, promise)
}

export function getCachePromise(key) {
 // 根據key獲取當前的數據 
 const promise = promiseCache.get(key)
 // 用完刪除，目前只做中轉用途，也可以添加其他用途
 promiseCache.delete(key)
 return promise 
}

做一份全局的 Map,然后利用 Map 緩存 promise 對象，在跳轉之前代碼為:

// 導入 setCachePromise 函數

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}`})
 }
 }
})

而跳轉之后的代碼也如下所示:

// 導入 getCachePromise 函數

Component({
 properties: {
  id: Number 
 },
 lifetimes: {
  attached () {
  const id = this.data.id 
  // 取得全局緩存的promise
  const bookPromise = getCachePromise(`xxx:${id}`)
  bookPromise.then((res) => {
   // 業務處理
  }).catch(error => {
   // 錯誤處理 
  })
  }
 },
 methods: {
  getBook() {
  // 獲取數據，以便于 錯誤處理 上拉刷新 等操作 
  } 
 }
})

如此便可以同時處理取數和頁面加載的邏輯，當然，這個對于頁面有耦合性，不利于后續的刪除與修改。但考慮如果僅僅加在分包跳轉之間可能會有不錯的效果。

想要無侵入式，可以進一步學習研究 微信小程序之提高應用速度小技巧 以及 wxpage 框架，同時考慮到無論是 ToC 還是 ToC 用戶，都有可能存在硬件以及網絡環境等問題，該優化還是非常值得的。

當然微信小程序為了減少冷啟動時間，提供了周期性更新 數據預拉取 功能。

注: 上面的 promiseCache 只作為中轉的用途，不作為緩存的用途，如果你考慮添加緩存，可以參考我之前的博客文章—— 前端 api 請求緩存方案。

通知類

如果是 pc 端中進行交互，對于數據的 CRUD。例如在詳情頁面進行了數據的修改和刪除，返回列表時候就直接調取之前存儲的列表查詢條件再次查詢即可，而對于移動端這種下拉滾動的設計，就沒有辦法直接調用之前的查詢條件來進行搜索。

如果從列表頁面進入詳情頁面后，在詳情頁面只會進行添加或者修改操作。然后返回列表頁面。此時可以提示用戶數據已經進行了修改，請用戶自行決定是否進行刷新操作。

如在編輯頁面修改了數據:

const app = getApp()

component({
 methods: {
 async handleSave() {
  //...
  app.globalData.xxxChanged = true
  //... 
 }
 }
})

列表界面:

const app = getApp()

component({
 pageLifetimes: {
 show() {
  this.confirmThenRefresh()
 } 
 },
 methods: {
 confirmThenRefresh() {
  // 檢查 globalData，如果當前沒有進行修改，直接返回 
  if(!app.globalData.xxxChanged) return
  wx.showModal({
  // ...
  complete: () => {
   // 無論確認刷新與否，都把數據置為 false 
   app.globalData.xxxChanged = false 
  } 
  }) 
 }
 } 
})

當然了，我們也可以利用 wx.setStorage 或者 getCurrentPage 獲取前面的頁面 setData 來進行數據通知,以便用戶進行頁面刷新。

訂閱發布類

如果僅僅只涉及到修改數據的前提下，我們可以選擇讓用戶進行刷新操作，但是如果針對于刪除操作而言，如果用戶選擇不進行刷新，然后用戶又不小心點擊到了已經被刪除的數據，就會發生錯誤。所以如果有刪除的需求，我們最好在返回列表頁面前就進行列表的修改，以免造成錯誤。

mitt

github 上有很多的 pub/sub 開源庫，如果沒有什么特定的需求，找到代碼量最少的就是 mitt 這個庫了,作者是喜歡開發微型庫的 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。

只要在多個頁面導入 生成的 mitt() 函數生成的對象即可(或者直接放入 app.globalData 中也可)。

Component({
 lifetimes: {
 attached: function() {
  // 頁面創建時執行
  const changeData = (type, data) => {
  // 處理傳遞過來的類型與數據
  }
  this._changed = changeData
  bus.on('xxxchanged', this._changed)
 },
 detached: function() {
  // 頁面銷毀時執行
  bus.off('xxxchanged', this._changed)
 }
 }
})

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。