미니 프로그램 간의 페이지 간 통신을 위한 여러 가지 방법에 대한 간략한 논의

이 기사에서는 소규모 프로그램의 몇 가지 일반적인 페이지 간 통신 방법을 공유합니다. 필요한 경우 이를 참조할 수 있습니다.

애플릿은 페이지로 구성되어 있습니다. 라우팅 스택이 [A,B]인 경우 A->B의 값은 당연히 다음과 같습니다. 레이어별로 전달하지만 B->A 데이터 전달에는 몇 가지 일반적인 방법이 아래에 설명되어 있습니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼[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]

1. localStorage + onShow

응용 시나리오: A->B/B->A 사용 가능

장점: 간단한 조작, 이해하기 쉬움

단점: 스토리지 호출 시 설정이 실패할 수 있고 설정 후에는 영구 캐시이므로 오염될 수 있습니다. 원래 논리를 삭제해야 하며 시간이 지나면 삭제해야 합니다

응용 사례:

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

2, globalData + onShow

응용 시나리오: A->B/B->A 사용 가능

장점: 간단한 조작, 쉬움 globalData 객체를 직접 조작하는 것에 비해 저장소에서 실행하는 것이 더 효율적입니다단점: 설정 후 미니 프로그램의 수명 주기 동안 액세스할 수 있으므로 원래 논리를 오염시킬 수 있으므로 삭제해야 합니다. time

적용 예:

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

3.

EventChannel

응용 시나리오: 주로 B->A

장점: 미니 프로그램은 기본적으로 제공되며 언제든지 폐기될 수 있습니다

단점: 단 navigateTo로 제한되며 기본 라이브러리 버전은 2.7.3

이상이어야 합니다. 애플리케이션 예:

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

4, Custom EventBus

🎜🎜애플리케이션 시나리오: A->B /B->A 사용 가능🎜🎜장점: 사용자 지정 구현, 확장 가능🎜🎜단점: wx 변수의 확장된 사용자 지정, 동일한 eventName이 수신 이벤트에 반복적으로 바인딩될 수 있음🎜🎜EventBus: 이 문서 참조🎜EventBus 구현🎜🎜🎜 적용 예: 🎜rrreee🎜🎜5. 페이지 스택 인스턴스 가져오기 getCurrentPages🎜🎜🎜 적용 시나리오: 주로 B-> A🎜🎜장점: 미니 프로그램이 기본적으로 제공되며 처리 로직은 기본적으로 B 페이지에 있습니다. 단점: 페이지 매칭을 위해 해당 규칙을 추가해야 하며, 라우팅 스택에 최소 2개의 페이지가 있습니다🎜🎜적용 예: 🎜rrreee🎜🎜6, globalData 프록시🎜🎜🎜이 방법은 아직 테스트되지 않았지만 🎜🎜해당 원칙은 Vue3의 데이터 하이재킹과 구독 알림의 조합을 참조할 수 있습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요. ! 🎜

위 내용은 미니 프로그램 간의 페이지 간 통신을 위한 여러 가지 방법에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!