日常的な漫画の机能の中で、多くの情况はすべて通知のページを使う必要があって、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

        

            
Aページです
        
        

              B  
        
        
        
            mui.init()
            mui.plusReady(function(){
                document.querySelector("button").addEventListener('tap',function(){
                    mui.openWindow('B.html')
                })
            })
        

B.html

        

            
            
Bページです
        
        

              A  
        
        
        
            mui.init()
            mui.plusReady(function(){
                document.querySelector("button").addEventListener('tap',function(){
                    //   A     
                })
            })
        

では、どのようにして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関数を実行して、弾いておとなしく立って良いです
実はFireの内部実装はその原理ですコードを見てみましょう
このdispatchEventは何ですか?この方法はdomイベントに関する詳細なドキュメントをトリガするために使用されると理解できます:イベントトリガ---dispatchEvent
これは筋道がはっきりしている.Aページカスタムイベント=>BページAページイベントコールバックをトリガーして参照
へへへ、こんなに简単で、しかしこの文章はまだ终わっていないで、すべてここに着いた以上、いっそ私达は自分でこの通知机能をカプセル化しましょう!

車輪を作る

私たちは新しいファイルを作りました.名前はBroadcastです.jsここではES 6 Classで書きます

//    

class Broadcast{
    /**
     *      
     */
    constructor(){
        
    }
        
}

まず、最も基本的な2つの機能を実現します.

リスニングイベント(購読)

トリガイベント(パブリッシュ)

//    

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

        

            
Aページです
        
        

              B  
        
        
        
        
            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))
            })
        

B

        

            
            
Bページです
        
        

              A  
        
        
        
        
            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
                    })
                })
            })
        

Bページのボタンをクリック
ワハハ、基础机能はすでにどのように実现して、もちろん、これはただ最も基础的な监视を実现して、触発して、后で更に多くの最适化が必要で、および管理して、辛いですか、下章は见ます
次の章:【5+】webviewにまたがるマルチページトリガイベント(二)

class Man{
    constructor(){
        this.name = 'NewsNing'
    }
    say(){
        console.log('   ,        . ')
    }
}