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