이 기사에서는 소규모 프로그램의 몇 가지 일반적인 페이지 간 통신 방법을 공유합니다. 필요한 경우 이를 참조할 수 있습니다.
애플릿은 페이지로 구성되어 있습니다. 라우팅 스택이 [A,B]
인 경우 A->B
의 값은 당연히 다음과 같습니다. 레이어별로 전달하지만 B->A
데이터 전달에는 몇 가지 일반적인 방법이 아래에 설명되어 있습니다. [관련 학습 권장사항: 미니 프로그램 개발 튜토리얼[A,B]
,A->B
传值自然可以一层层传递,但是B->A
传递数据就需要额外的辅助方式,以下讨论几种常见的方式。【相关学习推荐:小程序开发教程】
应用场景: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') }, })
应用场景: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'; }, })
应用场景:主要是 B->A
优点:小程序原生提供,可随时销毁
缺点:仅限制在navigateTo
]
장점: 간단한 조작, 이해하기 쉬움
단점: 스토리지 호출 시 설정이 실패할 수 있고 설정 후에는 영구 캐시이므로 오염될 수 있습니다. 원래 논리를 삭제해야 하며 시간이 지나면 삭제해야 합니다
응용 사례:
// 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) }) } })
응용 시나리오: A->B/B->A 사용 가능
적용 예:
// 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'); }, })
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 === 'A') { prevPage.someActions('11111'); } }, })
위 내용은 미니 프로그램 간의 페이지 간 통신을 위한 여러 가지 방법에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!