Fox前端-桥接机制说明

• 前言
• 桥接机制
• 插件类型
• 插件调用
  • Native插件
  • Device插件
• 插件扩展指南

前言

标准化的插件开发接口，通过桥接的方式将原生开发语言与JavaScript之间进行打通，使HTML5也拥有了驱动设备硬件的能力。支持开发者自定义Native-Plugin扩展功能开发。

桥接机制

**JSBridge：**听其取名就是JS和Native之前的桥梁，而实际上JSBridge确实是JS和Native之前的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信，Native只通过一个固定的桥对象调用JS，JS也只通过固定的桥对象调用Native。JSBridge另一个叫法及大家熟知的Hybrid app技术。

• JS调用Native: 原生将WebviewJavaScriptBridge绑定到window上，H5直接调用该对象上的原生方法

• Native调用JS: JS端将JSBridge绑定到window上，Native通过原生对象调用JS方法

插件类型

根据功能和范围插件主要分为Plugin，Proxy，Device和Native几类。

• Plugin：插件需要实现execute方法
• Proxy：插件的简化模式，通过编写和action一致的方法就可以了提供native能力
• Device：插件的简化模式，用于调用系统或第三方提供的外设模块，如相机、OCR、二代证等
• Native：插件的简化模式，用于集成除外设类之外的原生功能，如定位、网络等

插件调用

Native插件

扩展插件清单

名称	功能说明
fox.native.getLocation	获取位置信息
fox.native.checkWifi	检查WIFI是否开启
fox.native.getLocalIP	获取IP地址
fox.native.getLocalMac	获取MAC地址
fox.native.shutdown	关闭APP
fox.native.restart	重启APP
fox.native.getAppVersionName	APP Version Name
fox.native.getAppVersionCode	APP Version Code
fox.native.getNumber	获取电话号码
fox.native.notify	推送
fox.native.callPhone	打电话
fox.native.endPhone	挂断电话
fox.native.getUniqueID	获取唯一ID
fox.native.getApkInfo	获取APK信息

参数说明

fox.native.call(action,params,callback)是native调用的js接口，其参数为

字段名	字段含义	类型
action	操作动作	String
params	参数	String/Object
callback	回调函数	Function

代码示例

fox.native.call("countApkMD5", "count", (code, message ,data)=>{
    if(code == 0){
        this.targetMD5 = data;
        if(this.targetMD5 == this.sourceMD5){
            fox.layer.open("APK完整性校验通过");
        }else{
            fox.layer.open("APK完整性校验不通过,"+message);
        }
    }else{
        fox.layer.open("获取APK MD5信息失败,"+message);
    }
})

Device插件

扩展插件清单

名称	功能说明
fox.device.callAudio	音频
fox.device.callCamera	相机
fox.device.callFace	人脸识别
fox.device.callFp	指纹仪
fox.device.callIdr	二代证
fox.device.callOcr	OCR
fox.device.callSign	签名
fox.device.callVideo	视频

参数说明

fox.device.call(type,action,params,callback)是外设调用的js接口，其参数为

字段名	字段含义	类型
type	设备类型	String
action	操作动作	String
params	参数	String/Object
callback	回调函数	Function

代码示例

let params= {
    iTimeOut: 30000,
    cover: false,
}
fox.device.call("IdentityCard","openDev",params,(code, message ,data)=>{
    //code 0:成功，1:取消，2:失败
    //调用成功后，返回数据在data中，如果失败了则message是失败消息
    if(code == 0){
        fox.layer.open(data);
    }else{
        fox.layer.open("调用失败,"+message);
    }
});

插件扩展指南

如果外壳中开发了一个新的插件，前端是如何调用的呢？以下内容将会介绍前端调用插件的步骤（以拷贝文件(copy)插件为例）。

• 步骤一

  在src/native目录下新建file目录，并新建index.js文件

• 步骤二

  调用window.fxBridge.exec()方法，并导出copy方法

  export function copy(srcPath, destPath, callback) {
      // 定义回调
      let fn = function(status, resData) {
          if(callback) {
              try{
                  if(fox.type(resData) === 'string') {
                      resData = JSON.parse(resData)
                  }
  
                  callback(resData.code, resData.message, resData.data)
              }catch(ex) {
                  fox.logger.error(ex.message, ex)
                  callback(2, ex.message, resData)
              }
          }
      }
      // 参数
      const args = {
          service: 'fileProxy',
          action: 'copy',
          data: [srcPath, destPath],
          async: true,
          callback: fn,
      }
      //执行
      return window.fxBridge.exec(args)
  }
  

  args参数说明

  字段名	字段含义	类型	是否必传
  service	服务名	String	是
  action	动作	String	是
  data	请求数据	Array	是
  async	是否异步	Boolean	是
  success	成功回调函数	Function	否
  error	错误回调函数	Function	否
  process	进度回调函数	Function	否
  callback	回调函数	Function	否

• 步骤三

  在src/native/index.js下导入copy

  import {copy} from './file/index'
  
  let foxNative = {
  
      /**
       * 安装
       */
      install (fox) {
          fox.file = {
              copy,
          }
      },
  }
  
  export {
      foxNative,
  }
  

• 步骤四

  调用插件fox.file.copy()

  // 拷贝路径下文件/文件夹
  let targetDir = 'localExtCache://myData/example'
  let sourcePath = 'workSpace\text.txt'
  copy() {
      fox.file.copy(sourcePath, targetDir, (code, message, data) => {
          if (code == 0) {
              fox.layer.open('拷贝成功')
          } else {
              fox.layer.open('拷贝失败:' + message)
          }
      })
  }