# hybridBridge

**Repository Path**: cpanmac/hybridBridge

## Basic Information

- **Project Name**: hybridBridge
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-03-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- 1、添加 js 文件到 html 页面
    ```html
    <!-- 手机浏览器控制台调试神器 webBridgeSDK调试模式依赖vconsole-->
      		<script src="js/vconsole.min.js"></script>
              <script src="js/webBridgeSDK.js"></script>
    ```

- 2、调用原生预定义能力并设置回调函数
    ``` javaScript
            (function(window,undefined){
      				//-----日志打印调试配置-----
      				//默认不打印日志
      				window.webBridgeLoging=true;
      			    //开启调试模式
      				var vConsole = new VConsole();
      				//-----日志打印调试配置-----
      		})(window);

            //创建二维码调用
            window.webBridge.scanQrcode(
            //回调函数
            function callback(data) {
            document.getElementById("qrcodeContent").innerHTML = data;
            }
            );
    ```

- 3、拓展原生能力
    与原生沟通调用名称定义 例如“scanQrcode”，让原生定义好调用能力定义，在webBridgeSDK文件结尾部 增加调用原生定义[getUserInfo为举例说明原生未进行该功能实现]：
    ```javaScript
                //原生调用能力添加到mobile下
                var mobile = {
                    scanQrcode: function(callback) {
                        callAppRouter("scanQrcode", {}, callback);
                    },
                    getUserInfo: function(userId,callback){
                        callAppRouter("getUserInfo", {userId:userId}, callback);
                    }
                };
    ```

- 4、IOS 端实现 安装开源组件即可实现
  代码地址：[WebViewJavascriptBridge](https://github.com/marcuswestin/WebViewJavascriptBridge)
- 5、Android 端实现
  ```java
    //建立桥接对象：bridge 
    myWebView.addJavascriptInterface(new JavaScriptinterface(this), "bridge"); 
    //设置 js 调用原生方法 
    //jsonData 的数据规范
    ///{  'method': method,  'dData': params, 'callbackName':cbName }
    @JavascriptInterface 
    public void callHandler(String jsonData) {
            JavaScriptinterfaceJson jsonObj=JSONUtil.parse(jsonData); 
            //扫码原生调用 
            if(jsonObj.getMethod().equal("scanQrcode")){ 
                //TODO:调用原生能力 ..... 
                String qrcodeResult="demo"; 
                this.runJavascriptInterfaceCallback(jsonObj.getCallbackName(),qrcodeResult); 
            }
    } 
      //通过调用 js 回调函数执行返回结果回调 
      private void runJavascriptInterfaceCallback(String cbName,String resultDataJson){ 
          webview.loadUrl("javascript:"+cbName+"(" + "'"+resultDataJson+"'" + ")"); 
      }
  ```
- 6、TODO
  
    ios和android端demo编写