這篇文章給大家分享的是有關(guān)小程序跨頁面之間通信的方式有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、安陽ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的安陽網(wǎng)站制作公司

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)，可擴展

缺點：對wx進(jìn)行擴展自定義變量，相同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é)合；

感謝各位的閱讀！關(guān)于“小程序跨頁面之間通信的方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：小程序跨頁面之間通信的方式有哪些
鏈接地址：http://www.aaarwkj.com/article6/gjojig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、關(guān)鍵詞優(yōu)化、虛擬主機、微信小程序、服務(wù)器托管、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)