Hybrid与h5使用webview+JSBridge实现通信原理简析

目录

一、概念了解：

webview - 承载和渲染网页的容器

JSBridge - 封装（了一系列js与native互通数据）的js方法

二、简易流程图：

三、详解流程：

第一步: 设计出一个Native与JS交互的全局桥对象

 第二步: JS调用Native功能实现-callHandler 内部实现

第三步: Native监听api调用，捕获这个url

第四步: Native分析url-api名、回调和参数的格式

第五步: Native调用JS功能实现

第六步: H5中api方法的注册 - H5页面中注册供原生调用的API 

四、完整流程图

​

---

方式：采用native + h5

一句话总结：App 安装后都会在手机上注册一个 schema ，比如淘宝是 taobal://，native 会有一个进程远程监控 webview发出的所有 schema://请求，然后分发到各 api（即协议名称），native 处理时会用到传入的 param参数，处理结束后再调用webview window 对象中的 callback

Js 调用 native：app 实现对webview URL 的观察者模式，h5通过改变 url 的哈希值，app 会解析哈希值的变化去执行相应操作

Native 与 h5通信：将 js 对象绑定到 webview 的 window 对象上，app 通过原生方法调用 window 中的 js 方法

一、概念了解：

Url schema

通常用于声明式调用，页面间的跳转

App 安装后都会在手机上注册一个 schema ，比如淘宝是 taobal://

webview - 承载和渲染网页的容器

native也可以对webview进行定制，修改和扩展js执行环境的宿主对象，拦截webview发起的请求、控制缓存等功能。通过这些能力，能实现js与native之前信息互通

JSBridge - 封装（了一系列js与native互通数据）的js方法

常见交互如下：
* native重写弹窗行为，如alert、promt、confirm等
* URL schema

二、简易流程图：

三、详解流程：

第一步: 设计出一个Native与JS交互的全局桥对象

window.JSBridge  = JSBridge

    该对象中包含三个方法：
    registerHandler（String handlerName, Function handler)：供H5调用，用来注册natvie可以调用的js方法，然后保存到本地变量messageHandlers中。

    callHandler( String handlerName, JSON data, Function callback)：供H5调用，h5调用native 原生api，调用后用url schema触发，然后将callback的id放到本地变量responseCallbacks中。

    _handleMessageFromNative( JSON )：供native调用，native调用h5的方法，或者通知h5执行回调，（h5调用原生方法时 将回调函数作为参数传递，也就是responseCallbacks中的回调函数）

 

 第二步: JS调用Native功能实现-callHandler 内部实现

    1. 使用判断h5调用该方法的时候有没有回调函数，如果有，则生成一个回调函数id，并将id和对应的回调函数添加进回调函数的集合responseCallbacks中 

  if (cb_fun) {
              window[cb_value] = function (res) {
                    if (typeof res == 'string') res = JSON.parse(res);
                        console.log('['+tagname+'返回]', res)
                       cb_fun(res);
              }
        }

    2.将传入的方法名、数据等拼接成一个url schema

    

var time = new Date().getTime();
var cb_key = (options.tagname == 'getSysDeviceInfo' || options.tagname == 'getLoginInfo') ? 'callBack' : 'callback';
var cb_value = (options.callbackname) ? options.callbackname : 'hybrid_' + time;
var schema = options.schema;
var tagname = options.tagname;
var cb_fun = options.callback;
var param = options.param;
var url = schema || 'kkhybrid';
url += '://' + tagname + '?t=' + time; //时间戳，防止url不起效
url += (cb_fun) ? '&' + cb_key + '=' + cb_value : '';

3.使用location.href跳转触发shcema

 window.location = url;

第三步: Native监听api调用，捕获这个url

第四步: Native分析url-api名、回调和参数的格式

        1.根据api名找出对应的原生方法， 并记录方法回调完成后的id
        2.对提取出来的参数进行转化
        3.原生调用此api
        4.执行完成后找到此api对应的回调id整合成一个json参数
        5.native通过JSBridge通知js页面回调

第五步: Native调用JS功能实现

 JSBridge._handleMessageFromNative(messageJSON);

第六步: H5中api方法的注册 - H5页面中注册供原生调用的API
 

   //注册一个测试函数
    JSBridge.registerHandler('testH5Func',function(data,callback){
        alert('测试函数接收到数据:'+JSON.stringify(data));
        callback&&callback('测试回传数据...');
    });

例：
kkmh.requestHybrid({
    tagName: ‘’,
    callback: function(res){}
})
    ```

四、完整流程图