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
    来源:慕课网
    本文原创发布于慕课网 ,转载请注明出处,谢谢合作
  • 相关阅读:
    残疾流浪歌手的令人陶醉的声音
    关于浏览器参数的获取
    项目开发文档模板
    scoped_ptr源码
    从逗号分隔的字符串中删除某个子串的js函数
    合并两个数组的js函数
    comutil.h移值(_com_error,_bstr_t,_variant_t类的移值)
    判断两个对象是否相等的js函数
    托管可执行文件的结构(The Structure of a Managed Executable File)
    访问cookie的js函数
  • 原文地址:https://www.cnblogs.com/niudaxianren/p/12055923.html
Copyright © 2011-2022 走看看