在日常撸功能中,很多情况都需要用到通知页面,mui呢给我们已经内置写好啦,当当当,就是 mui.fire
我们来看看之前所写的用法
mui.fire
耶?这时候有童鞋就会问了,咋了之前不是写了mui.fire的文章了吗?为啥又有了这一篇捏?
哈哈,这篇文章我们主要来讲解5+的实现方案,不用mui.fire,就相当于自己写一个通知的js功能,让大家更明白其原理,以及更好地不止是拘束于非得用到mui.js
原理介绍
关键词
- plus.webview.evalJS
- dispatchEvent
在B页面通知A页面,我们暂时不管通知A页面的内容,只是希望B页面调用一段代码,能让A页面弹出一个alert
这时候我们就要用到webview的evalJS方法了
A.html
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">我是A页面</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue">打开B页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
document.querySelector("button").addEventListener('tap',function(){
mui.openWindow('B.html')
})
})
</script>
B.html
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我是B页面</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue">通知A页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
document.querySelector("button").addEventListener('tap',function(){
// 通知A页面的方法
})
})
</script>
那么,怎么才能通知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
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">我是A页面</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue">打开B页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/Broadcast.js" ></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
document.querySelector("button").addEventListener('tap',function(){
mui.openWindow('B.html')
})
})
new Broadcast().on('say', function(data){
alert(JSON.stringify(data))
})
</script>
B
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">我是B页面</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue">通知A页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/Broadcast.js" ></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
document.querySelector("button").addEventListener('tap',function(){
// 通知A页面的方法
//var A = plus.webview.getLaunchWebview()
//A.evalJS('alert("我是被B的")')
new Broadcast().emit('say', {
from: '我是B啊',
id: 666
})
})
})
</script>
点击B页面的按钮
哇哈哈,基础功能已经实现了怎么样,
当然,这只是最基础的实现了监听,触发而已,后续还需要更多的优化,以及管理,辣么,下章见
class Man{
constructor(){
this.name = 'NewsNing'
}
say(){
console.log('天行健, 君子以自强不息. ')
}
}