本篇文章給大家分享幾種常見的小程序跨頁面之間通信的方式，有需要的可以參考。

小程序是由一個個page構(gòu)成的，如果存在路由棧為[A,B]，A->B傳值自然可以一層層傳遞，但是B->A傳遞數(shù)據(jù)就需要額外的輔助方式，以下討論幾種常見的方式。【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

1、localStorage + onShow

應(yīng)用場景：A->B/B->A 都可

優(yōu)點：簡單操作，易理解

缺點：調(diào)用到storage，有可能設(shè)置失敗；且設(shè)置后是持久緩存，可能污染原邏輯，應(yīng)及時刪除

應(yīng)用示例：

// 以A->B示例  // A 頁面 Page({     onShow(){         if(wx.getStorageSync('$datas')){             console.log(wx.getStorageSync('$datas'))  // 11111         }     }, })  // B 頁面 Page({     someActions(){         wx.setStorageSync('$datas','11111')     }, })

2、globalData + onShow

應(yīng)用場景：A->B/B->A 都可

優(yōu)點：簡單操作，易理解；直接操作globalData對象，相比于storage執(zhí)行效率更高

缺點：設(shè)置后是小程序生命周期內(nèi)都可訪問，可能污染原邏輯，應(yīng)及時刪除

應(yīng)用示例：

// 以A->B示例  // A 頁面 const app = getApp(); Page({     onShow(){         if(app.globalData.$datas){             console.log(app.globalData.$datas)  // 11111         }     }, })  // B 頁面 const app = getApp(); Page({     someActions(){         app.globalData.$datas = '11111';     }, })

3、小程序本身提供的 EventChannel

應(yīng)用場景：主要是 B->A

優(yōu)點：小程序原生提供，可隨時銷毀

缺點：僅限制在navigateTo中，且要求基礎(chǔ)庫版本不低于2.7.3

應(yīng)用示例：

// A頁面 wx.navigateTo({   url: 'B?id=1',   events: {     // 為指定事件添加一個監(jiān)聽器，獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)     acceptDataFromOpenedPage: function(data) {       console.log(data)     },     someEvent: function(data) {       console.log(data)     }     ...   },   success: function(res) {     // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)     res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })   } })   // B頁面 Page({   onLoad: function(option){     console.log(option.query)     const eventChannel = this.getOpenerEventChannel()     eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});     eventChannel.emit('someEvent', {data: 'test'});     // 監(jiān)聽acceptDataFromOpenerPage事件，獲取上一頁面通過eventChannel傳送到當(dāng)前頁面的數(shù)據(jù)     eventChannel.on('acceptDataFromOpenerPage', function(data) {       console.log(data)     })   } })

4、自定義EventBus

應(yīng)用場景：A->B/B->A 都可

優(yōu)點：自定義實現(xiàn)，可擴(kuò)展

缺點：對wx進(jìn)行擴(kuò)展自定義變量，相同eventName可能會重復(fù)綁定監(jiān)聽事件

EventBus: 參考這篇EventBus實現(xiàn)

應(yīng)用示例：

// app.js const EventBus = require('./utils/eventBus.js'); App({     onLaunch(){         // 將eventBus初始到wx上         wx['$uhomesBus'] = (function () {             if (wx['$uhomesBus']) return wx['$uhomesBus'];             return new EventBus();         })();     } })  // A頁面 Page({     someActions(){         wx.$uhomesBus.$on('$datas',(data)=>{             console.log(data); // 11111         })     }, })  // B頁面 Page({     emitActions(){         wx.$uhomesBus.$emit('$datas', '11111');     }, })

5、獲取頁面棧實例 getCurrentPages

應(yīng)用場景：主要是 B->A

優(yōu)點：小程序原生提供，處理邏輯基本都在B頁面

缺點：需要增加匹配頁面的相應(yīng)規(guī)則,且路由棧至少有兩個頁面存在

應(yīng)用示例：

// A頁面 Page({     someActions(datas){         console.log(datas); // 11111     }, })   // B頁面 Page({     someActions(){         const pages = getCurrentPages();         if (pages.length < 2) return;                  // 如果頁面層級較多，可用循環(huán)去匹配到A頁面；         // 此處僅做2個頁面的示例         const prevPage = pages[pages.length - 1];                  // 路由匹配到A         if (prevPage.route === 'A') {             prevPage.someActions('11111');         }     }, })

6、globalData proxy

暫時未試驗這種方式，原理上可行；

相應(yīng)的原理可參考Vue3的數(shù)據(jù)劫持和訂閱通知相結(jié)合；