文章缩略图

浅谈小程序跨页面之间通信的思路方式

2021-08-18 00:00:00 技术教程 8217 阅读需42分钟
图标

本文最后更新于2021-08-18 00:00:00已经过去了1348天 请注意内容时效性

热度 111 评论 0 点赞97
钞能力。你在哪?此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“钞能力。你在哪?”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

提纲:

小程序是由一个个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.jsconst 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 

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

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

你可能想看:
继续阅读本文相关话题
更多推荐
发表评论

共有[ 0 ]人发表了评论

🥰 😎 😀 😘 😱 🤨 🥵 😔 😤 😡 😭 🥱 🤡 ☠️ 💖 🤖 💢 💥

评论列表
暂无评论

暂时没有评论,期待您的声音!

品牌认证 W3C认证 MYSSL认证 TrustAsia 安全签章
扫码访问手机版
二维码图片