小明子
小明子
  • 发布:2019-02-15 16:07
  • 更新:2020-11-16 14:20
  • 阅读:10609

uni-app,如何实现跨页面通讯?

分类:uni-app

业务场景:
A页面已经打开且被隐藏,现在打开一个页面B,在页面B上完成业务逻辑后,需要实时响应给A页面;

之前使用mui+H5plus,可以通过webview.evalJS实现不同页面直接的通讯。

现在使用uni-APP,虽然页面可以获取当前webview对象(但是按照官方的方法只能根据数组下标获取最后一个页面page,即为当前页面),那么如何跟不同页面进行通讯呢??

uni-APP里面,每个打开的页面都是通过uni API打开的,无法通过ID去获取具体webview页面对象。

难道是用vuex么???

2019-02-15 16:07 负责人:无 分享
已邀请:

最佳回复

Neil_HL

Neil_HL

vue页面与vue页面之间的通讯推荐使用vuex进行通讯,如A页面使用watch监听store里面的变量 test ,B页面改变store里的变量 test,此时A页面就能监听到 test 发生变化,就能做一些你想要做的操作了,附件为一个简单demo,可供参考。
vue页面与nvue页面之间的通讯可参考:nvue文档介绍

  • 小明子 (作者)

    uni不是多页面的吗?如何使用vuex呢?? 谢谢 ,我先看看demo


    2019-03-02 10:20

  • 小明子 (作者)

    谢谢。我打包和浏览器都试了,没问题,我有点蒙了,多页面如何实现状态管理的??vuex不是单页面状态管理么??uniapp官方明确说了是多页面的


    2019-03-02 11:39

  • Neil_HL

    回复 小明子:在uni-app里面对vuex进行了特殊处理


    2019-03-04 10:26

  • 小明子 (作者)

    回复 Neil_HL:OK,感谢,现在我基本上放心把mui转到uniapp了 哈哈


    2019-03-06 14:58

  • Uniapper开发者

    666


    2019-03-11 08:59

小明子

小明子 (作者)

谢谢各位。问题解决了,全局状态使用vuex。局部业务的页面临时通讯,使用bus解决了。看来自己被官网说的uniapp是多页面应用给误导了。

this.$bus.$on('myBus',(msg)=>{  
			console.log(msg)  
			console.log(this.title)  
			this.title = "bus"+msg;  

// this.$nextTick(()=>{
// console.log('update title')
// })
})

  • 走在开发的路上

    你好,我为什么没有查到$bus属性相关文档呢?请问具体描述可以发一下吗?


    2020-03-26 17:39

云欧

云欧

+1

小明子

小明子 (作者)

vuex只能是单页面内的组件通讯,uniAPP都是独立的webview页面,貌似不能做页面之间的通讯。除非使用缓存,但是使用缓存随着项目变大就很麻烦了。不知道官方使用什么方法,暂时API没看到。

MixR

MixR - 团队承接uniapp开发,qq472045067

文档里面有, 搜路由看一下吧。

  • 小明子 (作者)

    什么路由?vue-router吗??


    2019-03-02 10:18

七分道道

七分道道 - 七分道道

1 vuex
2 看uniapp官网 接口中路由的第一小节,用地址栏传值

  • 小明子 (作者)

    (⊙o⊙)哦,这种也行,但是感觉不方便,没有那种观察者模式的好用啊,Vuex只能解决单页面的


    2019-03-02 10:19

l123123

l123123

实测可以使用uni.$emit和uni.$on 来实现响应传值。

  • 1***@qq.com

    页面还没打开怎么破


    2022-11-30 16:51

该问题目前已经被锁定, 无法添加新回复