在日常撸功能中，很多情况都需要用到通知页面，mui呢给我们已经内置写好啦，当当当，就是 mui.fire
我们来看看之前所写的用法
mui.fire
- Mui官方文档
- 【MUI】跨webview多页面 触发事件
耶？这时候有童鞋就会问了，咋了之前不是写了mui.fire的文章了吗？为啥又有了这一篇捏？
哈哈，这篇文章我们主要来讲解5+的实现方案，不用mui.fire，就相当于自己写一个通知的js功能，让大家更明白其原理，以及更好地不止是拘束于非得用到mui.js
原理介绍
关键词
- plus.webview.evalJS
- dispatchEvent
在B页面通知A页面，我们暂时不管通知A页面的内容，只是希望B页面调用一段代码，能让A页面弹出一个alert
这时候我们就要用到webview的evalJS方法了
A.html
我是A页面
B.html
我是B页面
那么，怎么才能通知A弹出框呢？我们需要用到关键词所提到的 plus.webview.evalJS
嘿嘿, 我们现在B获取到A的Webview对象，然后通过evalJS来向A页面发送一段代码让其执行
// 通知A页面的方法
var A = plus.webview.getLaunchWebview()
A.evalJS('alert("我是被B的")')点击一下按钮，果不其然，我们的弹出框就显示出来，当然我们也还可以定义其它的函数来接收响应
A
function faqme(){
alert('啊，乖乖站好！')
}B
// 通知A页面的方法
var A = plus.webview.getLaunchWebview()
A.evalJS('faqme()')当然，A页面执行了faqme函数，弹出了乖乖站好
其实，mui.fire的内部实现就是其原理
我们可以看一下其代码
这个 dispatchEvent 是什么呢？
我们可以将这个方法理解为用来触发dom事件
相关详细文档：
事件触发器-----dispatchEvent
这下条理就很清楚拉！
A页面自定义事件 => B页面触发A页面事件回调并传参
嘿嘿，就是这么简单，但是本文章还没有结束，既然都到这了，干脆我们来自己封装一下这个通知功能吧！
造轮子
我们新建一个文件，美其名曰：Broadcast.js
在这里我采用ES6 Class的方式编写
//页面通知
class Broadcast{
/**
* 构造器函数
*/
constructor(){
}
}
我们先来实现最基础的两个功能
- 监听事件(订阅)
- 触发事件(发布)
//页面通知
class Broadcast{
/**
* 构造器函数
*/
constructor(){
}
/**
* 事件监听
* @param {String} eventName 事件名称
* @param {Function} callback 事件触发后执行的回调函数
* @return {Broadcast} this
*/
on(eventName, callback){
document.addEventListener(eventName, e => {
callback.call(e, e.detail)
})
return this
}
/**
* 事件触发
* @param {String} eventName 事件名称
* @param {Object} data 参数
* @return {Broadcast} this
*/
emit(eventName, data){
// 获取所有的webview
var all = plus.webview.all()
// 遍历全部页面
for(var w in all){
// 挨个来evalJS
all[w].evalJS(`document.dispatchEvent(new CustomEvent('${eventName}', {
detail:JSON.parse('${JSON.stringify(data)}'),
bubbles: true,
cancelable: true
}));`)
}
return this
}
}
ok, 我们在页面中引用并尝试用一下
A
我是A页面
B
我是B页面
点击B页面的按钮
哇哈哈，基础功能已经实现了怎么样，
当然，这只是最基础的实现了监听，触发而已，后续还需要更多的优化，以及管理，辣么，下章见
下一章节：【5+】跨webview多页面 触发事件（二）
class Man{
constructor(){
this.name = 'NewsNing'
}
say(){
console.log('天行健, 君子以自强不息. ')
}
}