guyskk
guyskk
  • 发布:2015-07-17 17:43
  • 更新:2017-12-21 19:54
  • 阅读:6177

需要用到登录回调,请问如何实现跨webview使用的全局对象?

分类:HTML5+

进入app之后是webview模式的tabbar导航条,其中一个页面是“我的”,点击里面的按钮跳转到登录页面。
其他页面需要登录之后才能获取到服务器的数据,但是用户登录之后如何通知那些页面去获取服务器数据?

如果有一个跨webview的全局对象,那么我可以在进入app时向他注册登录成功的回调函数,登录页面登陆之后再触发那些回调函数执行。

我想过用主页的webview对象充当这个全局对象,在其他webview里面可以通过plus.webview.getWebviewById获取主页的webview对象,然后向他注册回调函数;登陆页面登陆后再触发这些回调函数执行。

这样可行吗?或者有什么更好的办法?

2015-07-17 17:43 负责人:无 分享
已邀请:
guyskk

guyskk (作者) - https://plant.onebizlab.top

感谢Danny分享,我读了http://ask.dcloud.net.cn/question/7493的代码,用另一种更简单的方法实现。
以下是我的代码,可以跨webview调用函数,调用时也可以添加回调函数。


(function($) {  
    $.ge = [];  
    $.ge.callbackCount = 0;  
    $.ge.prefix = "globalEvent.";  

    $.ge.addListener = function(eventName, fn) {  
        window.addEventListener($.ge.prefix   eventName, fn);  
        $.ge.push(eventName);  
    }  

    $.ge.removeListener = function(fn) {  
        window.removeEventListener(fn);  
    }  

    /**  
     * 触发事件  
     * @eventName 事件名称  
     * @args 参数  
     * @callback 回调函数  
     * @webviewId 要调用的webviewId,不指定则调用所有webview上的事件监听器  
     */  
    $.ge.fireEvent = function(eventName, args, callback, webviewId) {  
        //如果有回调函数,则在参数中添加回调函数的信息  
        if (callback) {  
            var callback_name = "globalEvent_callback"   $.ge.callbackCount;  
            $.ge.callbackCount  ;  
            $.extend(args, {  
                globalEvent_callback: callback_name,  
                globalEvent_webviewId: plus.webview.currentWebview().id  
            });  
            //添加回调事件监听  
            $.ge.addListener(callback_name, callback);  
        }  
        if (webviewId) {  
            var wv = plus.webview.getWebviewById(webviewId);  
            mui.fire(wv, $.ge.prefix   eventName, args);  
        } else {  
            var views = plus.webview.all();  
            for (var i = 0; i < views.length; i  ) {  
                mui.fire(views[i], $.ge.prefix   eventName, args);  
            }  
        }  
    }  

    /**  
     * 调用回调函数,若事件触发者没有提供回调函数,则什么都不做  
     * @call_args 调用者的参数  
     * @args 回传给调用者的参数  
     */  
    $.ge.callback = function(call_args, args) {  
        var id = call_args.detail.globalEvent_webviewId;  
        var eventName = call_args.detail.globalEvent_callback;  
        if (id != null && eventName != null) {  
            $.ge.fireEvent(eventName, args, null, id);  
        }  
    }  

})(mui);  

使用示例:


//登陆页面  
function onLoginSuccess() {  
    mui.ge.fireEvent("login", {  
        info: "登陆成功"  
    }, function(args) {  
        args.detail.info //收到消息  
    })  
}  

//订单列表页面  
mui.plusReady(function() {  

    mui.ge.addListener("login", function(args) {  
        args.detail.info //登陆成功  
        mui.ge.callback(args, {  
            info: "收到消息"  
        })  
    });  

});  

欢迎讨论

guyskk

guyskk (作者) - https://plant.onebizlab.top

问题解决了,代码如下


(function($) {  
    $.ge = [];  

    $.ge.addListener = function(eventName, fn) {  
        window.addEventListener(eventName, fn);  
        $.ge.push(eventName);  
    }  
    $.ge.removeListener = function(fn) {  
        window.removeEventListener(fn);  
    }  
    $.ge.fireEvent = function(eventName, args, webviewId) {  
        if (webviewId) {  
            var wv = plus.webview.getWebviewById(webviewId);  
            mui.fire(wv, eventName, args);  
        } else {  
            var views = plus.webview.all();  
            for (var i = 0; i < views.length; i  ) {  
                mui.fire(views[i], eventName, args);  
            }  
        }  
    }  
})(mui);  

用法:
在其他页面引入这个js,在mui.plusReady里面调用mui.ge.addListener 添加事件监听。
登录页面登录成功后调用mui.ge.fireEvent。

:)

DCloud_heavensoft
  • guyskk (作者)

    localStorage或sessionStorage能保存全局数据,但是不能实现事件监听啊

    2015-07-18 09:10

chender

chender - 与人为善

原理和我写的那个差不多,都是通过一层代理,实现回调的功能,只是你这是使用了事件机制;
个人感觉直接使用方法调用比用事件机制方便得多,比如我的某个webview里面有一个api要暴露给其他webview使用,需要通过xxx.addListener(xxx,function(){})来监听其他界面的调用请求,然后在事件处理里面提供对应的服务,肯定没有我直接写一个 function(){xxx....;return xxx}方便;
另外提一个优化的建议,你这个实现里面,每一次调用都会进行一次window.addEventListener;目测调用次数超过一次时,会出现逻辑错误,调用次数达到一定的量时会出现性能问题;

  • guyskk (作者)

    你的确实更方便,但是不能使用闭包,比如要用到其他函数内的变量时,不过这也要看具体需求。

    另外 目测调用次数超过一次时,会出现逻辑错误。能详细说吗?

    调用次数达到一定的量时会出现性能问题;这个确实是,我在考虑回调函数执行之后自动移除监听器。但是如果事件监听者可以有多个,那么回调函数可以执行多次,我还没想好要要怎样自动移除回调监听器。

    2015-07-19 11:00

  • chender

    我那个能使用闭包哈,能callback就能使用闭包;

    逻辑错误那个是我看错了,因为你贴的代码里面“+”号没显示出来啊;

    事件监听者有多个就意味着是调了多次 mui.ge.fireEvent,每次的eventName是不一样的

    2015-07-19 12:52

1***@qq.com
太2真人

太2真人

都是牛人。嘿嘿

Danny

Danny - QQ125904483

这个大哥的分享不知道适用否:
http://ask.dcloud.net.cn/question/7493

该问题目前已经被锁定, 无法添加新回复