淺談小程式跨頁面之間通訊的幾種方式

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

小程式是由一個個page構成的，如果存在路由堆疊為[A,B]，A->B傳值自然可以一層層傳遞，但是B->A傳遞資料就需要額外的輔助方式，以下討論幾種常見的方式。 【相關學習推薦：小程式開發教學】

1、localStorage onShow

應用程式場景：A->B/B-> ;A 皆可

優點：簡單操作，易理解

缺點：呼叫到storage，有可能設定失敗；且設定後為持久緩存，可能污染原邏輯，應及時刪除

應用範例：

// 以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

應用程式場景：A->B/B->A 都可

優點：簡單操作，易理解；直接操作globalData對象，相比於storage執行效率更高

缺點缺點：設定後是小程式生命週期內都可訪問，可能污染原邏輯，應及時刪除

應用程式範例：

// 以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

應用場景：主要是B->A

優點：小程式原生提供，可隨時銷毀

缺點：僅限制在navigateTo中，且要求基礎程式庫版本不低於2.7.3

應用範例：

// A页面
wx.navigateTo({
  url: 'B?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    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'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

4、自訂EventBus

應用程式場景：A->B/B- >A 都可

優點：自訂實現，可擴展

缺點：對wx進行擴展自訂變量，相同eventName可能會重複綁定監聽事件

EventBus: 參考這篇EventBus實作

應用範例：

// 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

#應用程式場景：主要是B->A

優點：小程式原生提供，處理邏輯基本上都在B頁面

缺點：需要增加匹配頁面的對應規則,且路由棧至少有兩個頁面存在

應用範例：

// A页面
Page({
    someActions(datas){
        console.log(datas); // 11111
    },
})


// B页面
Page({
    someActions(){
        const pages = getCurrentPages();
        if (pages.length < 2) return;
        
        // 如果页面层级较多，可用循环去匹配到A页面；
        // 此处仅做2个页面的示例
        const prevPage = pages[pages.length - 1];
        
        // 路由匹配到A
        if (prevPage.route === &#39;A&#39;) {
            prevPage.someActions(&#39;11111&#39;);
        }
    },
})

6、globalData proxy

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

對應的原理可參考Vue3的資料劫持和訂閱通知相結合；

更多程式相關知識，請造訪：程式設計入門！ ！

以上是淺談小程式跨頁面之間通訊的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！