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

本文介绍: 目录一、概念了解：webview – 承载和渲染网页的容器JSBri dg e – 封装（了一系列 js与native互通数据）的js 方法二、简易流程图：三、详解流程：第一步: 设计出一个Na ti ve与JS交互的全局桥对象第二步: JS调用Na ti ve功能实现–callHandler 内部实现第三步: Na ti ve监听 api 调用，捕获这个 url第四步: Na ti ve分析 url–api名、回调和参数的格式第五步: Na ti ve调用JS功能实现第六步: H5中api 方法的.

一、概念了解：

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 ，比如淘宝是 ta o b al://，native 会有一个进程远程监控 webview发出的所有 schema://请求，然后分发到各 api（即协议名称），nat i ve 处理时会用到传入的 param 参数，处理结束后再调用 webview window 对象中的 callback

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

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

一、概念了解：

二、简易 流程图：

三、详解 流程：

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

window.JSBridge  = JSBridge

该对象中包含三个方法：
registerHandler（Str in g handlerName, Funct ion handler)：供H5调用，用来注册natv ie 可以调用的js方法，然后保存到本地变量messageHandler s中。

ca llHandler( Str in g handlerName, JSON data, Funct ion callback)：供H5调用，h5调用native 原生api，调用后用url sch ema 触发，然后将callback的id 放到本地变量responseCall backs中。

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

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

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

  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 sch ema

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) ? '&amp;' + cb_key + '=' + cb_value : '';

3.使用 location.href 跳转触发shc ema

 window.location = url;

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

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

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

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

 JSBridge._handleMessageFromNative(messageJSON);

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

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