在一样平常撸功用中，许多状况都须要用到关照页面，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('天行健, 正人以发奋图强. ')
    }
}