Perbincangan ringkas tentang beberapa cara komunikasi merentas halaman antara program mini

Artikel ini akan berkongsi dengan anda beberapa kaedah biasa komunikasi merentas halaman antara program kecil Anda boleh merujuknya jika perlu.

Aplet terdiri daripada halaman jika terdapat timbunan penghalaan untuk [A,B], nilai yang dilalui oleh A->B secara semula jadi boleh diteruskan lapisan demi lapisan, tetapi <.> Menghantar data memerlukan kaedah tambahan tambahan Beberapa kaedah biasa dibincangkan di bawah. [Cadangan pembelajaran berkaitan: B->ATutorial pembangunan program mini]

1. localStorage onShow

Senario aplikasi: A->B/B-> ;A boleh digunakan

Kelebihan: operasi mudah, mudah difahami

Kelemahan: apabila memanggil storan, tetapan mungkin gagal dan selepas tetapan, ia adalah cache yang berterusan, yang boleh mencemarkan logik asal dan harus dipadamkan dalam masa

Contoh aplikasi:

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

Senario aplikasi: A->B. /B->A boleh

Kelebihan: operasi mudah dan mudah difahami secara langsung mengendalikan objek globalData, kecekapan pelaksanaan yang lebih tinggi daripada storan

Kelemahan: selepas tetapan, ia boleh diakses semasa kitaran hayat program mini, yang mungkin mencemarkan logik asal, harus dipadamkan dalam masa

Contoh aplikasi:

// 以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. EventChannelSenario aplikasi: Terutamanya B->A

Kelebihan: Program mini disediakan secara asli dan boleh dimusnahkan pada bila-bila masa

Kelemahan: Hanya terhad kepada

dan memerlukan perpustakaan asas Versi tidak kurang daripada 2.7.3

navigateToContoh aplikasi:

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

Senario aplikasi: A->B /B->A boleh digunakan

Kelebihan: Pelaksanaan tersuai, boleh dilanjutkan

Kelemahan: Panjangkan pembolehubah tersuai ke wx , eventName yang sama mungkin berulang kali terikat pada acara mendengar

EventBus: Rujuk artikel ini

Pelaksanaan EventBus

Contoh aplikasi:

5. Dapatkan contoh tindanan halaman getCurrentPages

// 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');
    },
})

Senario aplikasi: Terutamanya B->A

Kelebihan: Program mini disediakan secara asli, dan logik pemprosesan pada asasnya dihidupkan halaman B

Kelemahan: Peraturan sepadan halaman padanan perlu ditambah, dan Terdapat sekurang-kurangnya dua halaman dalam tindanan penghalaan

Contoh aplikasi:

6. Proksi globalData

// 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;);
        }
    },
})

Kaedah ini belum diuji lagi. Prinsipnya boleh dilaksanakan; dan pemberitahuan langganan Vue3;

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Pengenalan kepada Pengaturcaraan

! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang beberapa cara komunikasi merentas halaman antara program mini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!