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
  });