首页 >微信小程序 >小程序开发 > 正文

浅谈小程序跨页面之间通信的几种方式

转载2021-09-14 10:15:260654
本篇文章给大家分享几种常见的小程序跨页面之间通信的方式,有需要的可以参考。

小程序是由一个个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 === 'A') {
            prevPage.someActions('11111');
        }
    },
})

6、globalData proxy

暂时未试验这种方式,原理上可行;

相应的原理可参考Vue3的数据劫持和订阅通知相结合;

更多编程相关知识,请访问:编程入门!!

以上就是浅谈小程序跨页面之间通信的几种方式的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:小程序 跨页面通信
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • 微信小程序--企业微网站微信小程序--企业微网站
  • 微信小程序开发基础教程微信小程序开发基础教程
  • 微信小程序基础API篇微信小程序基础API篇
  • 微信小程序开发就这么简单微信小程序开发就这么简单
  • 视频教程分类