1.0.3 • Published 5 years ago
js-native-bridge v1.0.3
js与native交互协议
使用场景
- native有事件需要通知或者js调用native有结果返回的时候,调用
BcNativeCallbackJs
- js需要主动调用native的时候,调用
callNative
- js需要被动监听native事件的时候,调用
addEventListener
,不需要监听的时候调用removeEventListener
或clearEventListerner
内部约定
- native主动调用js的方法名为
BcNativeCallbackJs
- native暴露的接口为
androidEvent.BcJsCallNative
(android)/window.webkit.messageHandlers.BcJsCallNative.postMessage
(iOS)
如果native事先已经实现了方法名,也可以通过adaptor
接口进行适配
native调用js
只需要调用一个通用接口(BcNativeCallbackJs
)即可
/**
* native调用JS
* @param {String} name 接口/事件名
* @param {String} data 接口返回数据,JSON序列号字符串
* @param {String} id 透传ID,用于接口调用的返回,事件回调不需要
*/
function BcNativeCallbackJs(name, data, id) {}
js调用native
主动行为,调用callNative
接口;
被动通知,调用addEventListener
接口监听。
/**
* js调native接口
* @param {String} name 方法名
* @param {Object} data 数据
* @param {Function} cb 回调函数
*/
function callNative(name, data, cb) {}
/**
* 添加监听器
* @param {String} name 监听事件名称
* @param {Funcrion} cb 监听事件回调函数
*/
function addEventListener(name, cb) {}
/**
* 移除监听器
* @param {String} name 监听事件名称
* @param {Funcrion} cb 监听事件回调函数
*/
function removeEventListener(name, cb) {}
/**
* 清除监听器
* @param {String} name 监听事件名称
* @param {Funcrion} cb 监听事件回调函数
*/
function clearEventListerner(name) {}
使用
- npm包引用
# 安装模块
npm i js-native-bridge
# or
yarn add js-native-bridge
// ES6 使用方式
import JsNativeBridge from 'js-native-bridge';
// cmd 使用方式
// let JsNativeBridge = require('js-native-bridge');
- 全局引用
<script src="dist/index.min.js"></script>
const JsNativeBridge = window.JsNativeBridge;
- 模块加载器引用
// cmd 使用方式(如seajs)
let JsNativeBridge = require('dist/index.min.js');
// amd 使用方式(如requirejs)
requirejs(['dist/index.min.js'], function(JsNativeBridge) {
// TODO
});