zoukankan      html  css  js  c++  java
  • WebViewJavascriptBridge(H5与原生交互)

    https://github.com/wangjiaojiao77/WebViewJavascriptBridge(IOS)和

    https://github.com/wangjiaojiao77/JsBridge(安卓)。

    分批说,先说IOS吧。

    1、IOS

    先把下面这段代码(这段代码可是会更新的哦,注意及时更新就ok啦)copy到你的JS中。

    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    然后直接写交互就ok啦(交互无非也就2种:注册一个方法 和 调用已经注册好的方法)。

    setupWebViewJavascriptBridge(function(bridge) {
    
        //注册一个方法(方法名是“JS Echo”),客户端进行调用(方法名也是“JS Echo”),responseCallback是回调函数
        bridge.registerHandler('JS Echo', function(data, responseCallback) {
            console.log("JS Echo called with:", data)
            responseCallback(data)
        })
    
        //客户端已经注册好一个名为“ObjC Echo”的方法,H5直接进行调用(方法名也为“ObjC Echo”)就行,调用的时候可以传客户端需要的参数
        bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
            console.log("JS received response:", responseData)
        })
    })
    2、Android

    so,安卓也很easy啦。

    先把下面这段代码(这段代码可是会更新的哦,注意及时更新就ok啦)copy到你的JS中。

    function connectWebViewJavascriptBridge (callback) { 
         if (window.WebViewJavascriptBridge) {
               callback(WebViewJavascriptBridge)
         } else {
               document.addEventListener(
                   'WebViewJavascriptBridgeReady'
                    , function() {
                         callback(WebViewJavascriptBridge)
                    },
                    false
               );
         }
    }

    然后直接写交互就ok啦(其实和IOS一样)。

    connectWebViewJavascriptBridge (function(bridge) {
    
        //注册一个方法(方法名是“JS Echo”),客户端进行调用(方法名也是“JS Echo”),responseCallback是回调函数
        bridge.registerHandler('JS Echo', function(data, responseCallback) {
            console.log("JS Echo called with:", data)
            responseCallback(data)
        })
    
        //客户端已经注册好一个名为“ObjC Echo”的方法,H5直接进行调用(方法名也为“ObjC Echo”)就行,调用的时候可以传客户端需要的参数
        bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
            console.log("JS received response:", responseData)
        })
    })

    基本的就是这么写就完啦,详细的可以参照我上面发的网址~~~


    作者:娇娇jojo
    链接:http://www.imooc.com/article/23258
    来源:慕课网
    本文原创发布于慕课网 ,转载请注明出处,谢谢合作
  • 相关阅读:
    根据第三方提供的wsdl报文(axis2开发),进行的webservice应用的开发实例
    调用axis2开发的接口遇到的问题
    使用 DJ Java Decompiler 将整个jar包反编译成源文件
    解析Myeclipse项目下的.classpath文件
    使用cxf开发webservice应用时抛出异常
    hibernate 映射 多对一
    jquery获取元素的值,获取当前对象的父对象等等
    web项目中加入struts2、spring的支持,并整合两者
    Struts2中的 配置文件
    对list集合中的对象按照对象的某一属性进行排序
  • 原文地址:https://www.cnblogs.com/niudaxianren/p/12055923.html
Copyright © 2011-2022 走看看