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('天行健, 君子以自强不息. ')
    }
}