H5端jsBridge
引入方式
由h5端引用
在我司移动端初期版本时采用的是该方式,采用本地引入 npm 包的方式进行调用。这种方式可以确定 JSBridge 是存在的,可直接调用 Native 方法。但是如果后期 Bridge 的实现方式改变,双方需要做更多的兼容,维护成本高
由native注入
这是当前我司移动端选用的方式。在考虑到后期业务需要的情况下,进行了重新设计,选用 Native 注入的方式来引用 JSBridge。这样有利于保持 API 与 Native 的一致性,但是缺点是在 Native 注入的方法和时机都受限,JS 调用 Native 之前需要先判断 JSBridge 是否注入成功。
使用规范
H5 调用 Native 方法的伪代码实例,如:
params = {
api_version: "xxx", // API 版本
title: "xxx", // 标题
filename: "xxx", // 文件名称
image: "xxx", // 图片链接
url: "xxx", // 网址链接
success: function (res) {
xxx; // 调用成功后执行
},
fail: function (err) {
if (err.code == '-2') {
fail && fail(err); // 调用了当前客户端中不存在的 API 版本
} else {
const msg = err.msg; //异常信息
Toast.fail(msg);
}
}
};
window.NativeApi.share(params);
列出简要通信方法,目前基本遵循以下规范进行双端通信;
window.NativeApi.xxx({
api_version:'',
name: "xxx",
path: "xxx",
id: "xxx",
success: function (res) {
console.log(res);
},
fail: function (err) {
console.log(err);
}
});
由于初期版本选择了由 H5 本地引用 JSBridge,后期采用 Native 注入的方式。现有的 H5 需要对各种情况做兼容。
主要是区分是在h5内还是在app内,并且对客户端中不存在的api版本做容错处理。
主要思路:
由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行。
url scheme介绍:
app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行
实现流程
一、关键步骤分析
第一步:设计出一个Native与JS交互的全局桥对象
第二步:JS如何调用Native
第三步:Native如何得知api被调用
第四步:分析url-参数和回调的格
第五步:Native如何调用JS
第六步:H5中api方法的注册以及格式