@bfo/jsbridge

背景说明

1. 项目为设计的JSbridge方案中的JS SDK部分；
2. 目的：统一H5页面与Native客户端交互形式；
3. 完整的JSbridge包含本JS代码和客户端SDK代码两部分。

目录结构

├── dist // 打包压缩后文件目录
│   └── jsbridge.js // 压缩后文件
│
├── src // 原代码目录
│   └──index.js // 原代码入口目录
│
├── index.js // 入口文件

Commands

npm run build

本地构建，在根目录dist下生成打包压缩文件jsbridge.js

使用

无需初始化，直接引入即可使用。

// SG_BFO_callNativeMethod与window._SG_BFO_callNativeMethod_功能相同
import SG_BFO_callNativeMethod from '@bfo/jsbridge';

// 或
// SG_BFO_callNativeMethod与window._SG_BFO_callNativeMethod_功能相同
var SG_BFO_callNativeMethod = require('@bfo/jsbridge');

// 或HTML标签引入根目录dist文件夹下的jsbridge.js
<script src='fakepath/jsbridge.js'></script>

以上无论何种方式，都会注册一个全局方法window._SG_BFO_callNativeMethod_。

JS SDK接口文档说明

JS SDK会暴露一个名为_SG_BFO_callNativeMethod_的方法，供H5页面调用客户端。

方法

_SG_BFO_callNativeMethod_(methodName, params, callback)

参数

该方法接受3个参数：methodName params callback

methodName

必要参数 String H5调用客户端的方法名，业务双端客户端与H5开发约定。

params

非必要参数 JSON 业务双端约定的methodName调用时所需的请求参数，格式为JSON；无请求参数时，省略不传。

callback

非必要参数 Function 业务双端约定的methodName需要回调时，需传递一个类型为Function的参数；无需回调时，省略不传。

示例

根据以上文档，我们可以明确存在以下调用形式：

1. 有请求参数，需要回调

window._SG_BFO_callNativeMethod_('doSomeThing', { 
        paramA: 1, 
        param: 'text' 
    }, function(data){ 
        console.log(data); 
    }
)

2. 有请求参数，无需回调

window._SG_BFO_callNativeMethod_('doSomeThingWithParams', { 
        paramA: 1, 
        param: 'text' 
    }
)

3. 无请求参数，需要回调

window._SG_BFO_callNativeMethod_('doSomeThingWithCallback', function(data){ 
        console.log(data);
    }
)

4. 无请求参数，无需回调

window._SG_BFO_callNativeMethod_('doSomethingWithoutParamsAndCallback')

回调返回值

字段名	数据类型	含义
code	Number	接口调用状态 0:成功
data	Any	业务接口返回值，取决于业务
message	String	接口调用说明