现如今一块大屏点击跳转实现第二屏跳转,越来越多的公司要求实现这种需求,我接受的项目就遇到这个需求,当时我是在原有写好的项目上新增加的需求,所以比较简单,但还是想给大家分享一下自己的踩雷过程。
最痛苦的就是刚接手看原有代码了:
首先先说一下参考的技术栈是:Presentation API:https://googlechrome.github.io/samples/presentation-api/
官方说的是只有英文文档,没有中文文档,没办法只能硬看,谁让咱遇到这个需求了呢。。。。呜呜
因为我这个项目做了页面组件拆分,所以做了一些组件通信,不过都可以能看懂
首先讲一下父组件需要做的事情
我们这里参数调用主要是为了实现接下里的一个效果,就是把我们需要发送给第二屏的信息,通过路由url的形式发送给第二快屏幕,所以接下来我们需要进行下面的操作;
以上工作完成后接下来就到了我们刚才父组件的子组件里面需要做的事情了,既然我们需要实现通信 ,
也就是刚才父组件里面写的updateMsg这个就派上用场了,子组件inject这个方法,然后实现发送信息
接下来是第二块屏幕的处理,从路由url里面获取你想要的对应的属性
截止到目前第二块大屏就可以实现第一次点击跳转的时候发送的信息了,但是你会发现此事的数据并不是响应式的,所以我们需要把数据做成响应式的,官网有例子,我这边就直接上代码了。
presentationConnection.send(JSON.stringify(newval));这个方法只能发送一个属性,如果你需要发送多个属性就需要转为json字符串发送了。这个方法写好后,对应的页面里面
这样写一下就可以实现我们的响应式数据了,第一块大屏点击,第二块大屏我想要的数据就可以实现响应式了,然后页面里面你监听watch一下就可以了
到此就实现了一个简单的大屏点击跳转,然后数据实现响应式了,如果有大佬有更好的方法,欢迎留言互相学习。