【5+】跨webview多页面 触发事件（一）

在平常撸功能中，不少状况都须要用到通知页面，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

<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页面的按钮

哇哈哈，基础功能已经实现了怎么样，
固然，这只是最基础的实现了监听，触发而已，后续还须要更多的优化，以及管理，辣么，下章见

下一章节：【5+】跨webview多页面 触发事件（二）

class Man{
    constructor(){
        this.name = 'NewsNing'
    }
    say(){
        console.log('天行健, 君子以自强不息. ')
    }
}