@hema-npm/js-bridge

河马混合开发原生 h5 交互 js-bridge 库

use

npm install @hema-npm/js-bridge

在 vue 项目中 main.js 文件中直接引入 window 下注入 HmJsBridge 方法

import '@hema-npm/js-bridge';

用法

方法名就是 src 文件夹下 callHandler 里的方法

testEvent 方法名 window.HmJsBridge.callHandler(方法名,参数,回调函数接收结果,是否需要进度回溯)

window.HmJsBridge.callHandler(
  'testEvent',
  {
    message: '这是js调用testEvent方法传递的参数',
    params: {
      id: 1,
    },
  },
  res => {
    console.log('这是testEvent方法的回调', res);
  },
  true
);

如果不需要支持进度回溯，方法已转换成 promise 可通过 promise 方式调用 window.HmJsBridge.callHandler(方法名,参数)

const getAppInfo = async () => {
  const result = await window.HmJsBridge.callHandler('getAppInfo');
};

返回结果

{
  code: 0|1, // 0调用成功 1调用中
  data: '返回数据',
  msg: 'msg信息'
}

详细使用方式

get-app-info 方法

获取 app 设备信息以及 token 等

用法

const getAppInfo = async () => {
  const result = await window.HmJsBridge.callHandler('getAppInfo');
};

返回结果

get-app-status-height 方法

获取 app 通知栏高度

用法

const getAppStatusHeight = async () => {
  const result = await window.HmJsBridge.callHandler('getAppStatusHeight');
};

返回结果

{
  code: 0，
  data: 40, // 高度值
  msg: ''
}

go-router 方法

h5 跳转原生页面 调用立即生效

用法

window.HmJsBridge.callHandler('goRouter', params);

传参

interface params {
  router: string; // 跳转路径
  params?: {[key: string]: any}; // 传参
}

close-webview 方法

h5 关闭当前 webview

用法

window.HmJsBridge.callHandler('closeWebview');

download-file 方法

下载文件到本地

用法

window.HmJsBridge.callHandler(
  'downloadFile',
  params,
  res => {
    console.log('这是downloadFile方法的回调', res);
  },
  true
);

传参

interface params {
  url: string; // 需要保存文件路径
  filesType: 'img' | 'pdf'; // 文件类型  图片文件、pdf文件
}

返回结果

{
  code: 1，// 0调用完成 1调用中 3调用失败
  data: {
    progress: 10, // 下载进度0-100
    status: 0|1|3 // 0 下载完成 1 下载中 3 下载失败 失败可在msg返回失败提示原因
  },
  msg: ''
}

upload 方法

上传文件

用法 upload 方法限制文件大小范围 image 类型 2.5M 以内 application/pdf 10M 以内

window.HmJsBridge.callHandler(
  'upload',
  params,
  res => {
    console.log('这是upload方法的回调', res);
  },
  true
);

传参

interface params {
  type: 0|1|2|3  // 0 直接拍照 1 弹窗 (拍照 相册 文件上传) 2 弹窗 (拍照 相册) 3 直接文件上传
  privatization: boolean // 是否是私有化上传
  filesNumber: number // 文件个数
  MIMETypes?: Array<'image/jpeg'|'image/png'|'application/pdf'> // 文件MIME类型 数组 可以多种类型 ['image/jpeg','image/png','application/pdf'] 传空代表不限制文件MIME类型
}

返回结果

{
  code: 1，// 0调用完成 1调用中 3调用失败
  data: {
    progress: 10, // 上传进度0-100
    url: [], // 上传文件完成的网络链接
    status: 0|1|2|3 // 0 上传完成 1 上传中 2 取消上传 3 上传失败 失败可在msg返回失败提示原因
  },
  msg: ''
}

pay方法

=======

微信/支付宝支付

```js
window.HmJsBridge.callHandler('pay', params, (res) => {
  console.log('这是pay方法的回调', res)
}, true)

传参

interface params {
  payMethod: "ALIPAY" | "WECHAT"; // ALIPAY 支付宝支付 WECHAT 微信支付
  transactionNo: string; // 订单编号
}

返回结果

{
  code: 1，// 0支付失败 1支付成功
  msg: ''
}

open-modal 方法

h5 页面掉原生弹框 调用立即生效

用法

window.HmJsBridge.callHandler('openModal', params);

传参

interface params {
  modalName: string; // 弹框类型
  type?: string; // 可选动态传参
}

联系客服 方法

用法

window.HmJsBridge.callHandler('jumpToCustomer', params);

传参

interface params {
  type: string; // 客服类型
}

安卓前往应用市场下载app 方法

用法

window.HmJsBridge.callHandler('downloadApp', params);

传参

interface params {
  id: string; // app应用对应包名
}