【MUI】跨webview多页面 触发事件

前言

好久没写文章了，这段时间太忙了

干货

直接上代码吧，语言组织的不行，没时间想好怎么写，先去休息。

app.js

var App = (function($,undefined) {
    var app = {};
    //通过参数个数的不同实现重载
    app.addMethod = function(name,fn) {
        var ofn = app[name];
        app[name] = function() {
            if(fn.length === arguments.length) {
                return fn.apply(this,arguments);
            } else if(typeof ofn === 'function') {
                return ofn.apply(this,arguments);
            }
        };
    };
    return app;
}(mui));

//本地存储
(function(app) {
    var keyName = 'store',//方法名称
        store = window.localStorage,nkey = function(k) {
            return '_news_' + k + '_ning_';
        },storeFn = function(fn) {
            app.addMethod(keyName,fn);
        };
    //获取
    storeFn(function(key) {
        var str = store.getItem(nkey(key)) || '{}';
        return JSON.parse(str);
    });
    //全部覆盖
    storeFn(function(key,val) {
        var str = JSON.Stringify(val) || '{}';
        store.setItem(nkey(key),str);
        
    });
    //追加并覆盖key
    storeFn(function(key,val,isAppend) {
        var oval = storeFn(key);
        for(var i in val) {
            oval[i] = val[i];
        }
        storeFn(key,oval);
    });
    
}(App));

//多页面 监听事件
(function(app,$) {
    var storeKeyName = '_NEWSNING_EVENTS_LISTENER_';
    var eList = function(){
        arguments[0] = storeKeyName + arguments[0];
        return app.store.apply(this,arguments);
    },eMethod = function(key,fn,isMorE) {
            var arg = arguments,keyArr = eList(key);
            if($.isEmptyObject(keyArr)) {
                keyArr = [];
            }
            if(fn) { //如果是增添事件 
                $.plusReady(function() {
                    //获取当前webview的id
                    var wid = plus.webview.currentWebview().id;
                    if(keyArr.length > 0 && keyArr.indexOf(wid) >= 0){
                        console.log('页面：'+ wid +'已存在事件：'+key); 
                        //如果已经监听 则不做任何 
                        return;
                    }
                    //添加事件
                    window.addEventListener(key,function _newsning_event_(E) {
                        fn.apply(fn,arguments);
                        //是否可以多次触发
                        isMore || (window.removeEventListener(key,_newsning_event_));
                    });
                    console.log('页面：'+ wid +'添加事件：' + key);
                    //增添至事件数组
                    keyArr.push({
                        id:wid,once:!isMore
                    });
                    //保存至本地
                    eList(key,keyArr);
                });
            } else { //触发事件
                var i = 0,l = keyArr.length,tempW,temp,nArr=[];
                $.plusReady(function() {
                    for(; i < l; i++) {
                        temp = keyArr[i];
                        //获取需要触发事件的webview
                        tempW = plus.webview.getWebviewById(temp.id);
                        $.fire(tempW,key,isMorE);
                        temp.once || nArr.push(temp); 
                    }
                    //覆盖
                    eList(key,nArr);
                });
            }
        };


    app.events = {
        //添加事件 once ：是否只监听一次  默认监听一次
        add: function(kname,morE) {
            eMethod(kname,morE);
        },//触发事件
        fire: function(kname,data) {
            eMethod(kname,null,data);
        },remove: function(kName) {
            eList(kname,[]);
        }
    }

}(App,mui));@H_696_15@ 
index.html
 
@H_612_14@mui.init();
            
            App.events.remove('demolistener'); 
            //监听
            App.events.add('demolistener',function(E) {
                var data = e.detail.data;
                console.log(JSON.Stringify(data));
            },truE); //false 时 为只被触发一次
            
            mui.ready(function() {
                document.getElementById("open").addEventListener('tap',function() {
                    mui.openWindow('index2.html');
                });
            });@H_696_15@ 
index2.html
 
@H_612_14@mui.init();
        mui.ready(function(){
            document.getElementById("fireBtn").addEventListener('tap',function(){
                App.events.fire('demolistener',{
                    'message': 'i\'m coming BACk !'
                });        
            });
        });@H_696_15@ 
各位看官自己试试，还有些地方没来得及优化