合码 js bridge

HemaJSBridge.js

const mustFunc = (v) => {
  return getObjectType(v) === 'Function'
         ? v
         : () => {}
}
const getObjectType = (v) => {
  return Object.prototype.toString.call(v).slice(8, -1)
}
class HemaJSBridge {
  /**
   * 版本
   */
  static version () {
    return '1.0.3'
  }
  /**
   * h5 主动发起交互
   * @param {string} action 触发的事件
   * @param {object/function} option 传参，当 option 是 function，则 callback = option
   * @param {function} callback 操作完成后 APP 回调事件
   */
  invoke (action, option, callback) {
    let iframe = document.createElement('iframe')
    iframe.style.width = '1px'
    iframe.style.height = '1px'
    iframe.style.display = 'none'
    if (getObjectType(option) === 'Function') {
      this.callback = mustFunc(option)
      iframe.src = `jsbridge://${action}`
    } else {
      this.callback = mustFunc(callback)
      iframe.src = `jsbridge://${action}${Object.keys(option).length > 0 ? `?${JSON.stringify(option)}` : ''}`
    }
    document.body.appendChild(iframe)
    setTimeout(() => {
      iframe.remove()
    }, 100)
  }
  /**
   * header 头部导航条
   * @param {
        left,
        center,
        right,
        autoTitle,
        type,
        noborderBottom
      }
   */
  header (option) {
    if (getObjectType(option) !== 'Object') option = {}
    if (getObjectType(option.left) === 'Function') {
      this.headerLeft = option.left
    } else if (getObjectType(option.left) === 'Object') {
      this.headerLeft = mustFunc(option.left.click)
      delete option.left.click
      option.left = Object.assign({
        text: null,
        color: null
      }, option.left)
    }
    if (getObjectType(option.center) === 'Function') {
      this.headerCenter = option.center
    } else if (getObjectType(option.center) === 'String') {
      option.center = {
        text: option.center
      }
    } else if (getObjectType(option.center) === 'Object') {
      this.headerCenter = mustFunc(option.center.click)
      delete option.center.click
      option.center = Object.assign({
        text: null,
        color: null
      }, option.center)
    }
    if (getObjectType(option.right) === 'Function') {
      this.headerRight = option.right
    } else if (getObjectType(option.right) === 'Object') {
      this.headerRight = mustFunc(option.right.click)
      delete option.right.click
      option.right = Object.assign({
        text: null,
        color: null
      }, option.right)
    }
    this.invoke('header', {
      left: option.left,
      center: option.center,
      right: option.right,
      autoTitle: option.autoTitle === undefined ? true : option.autoTitle,
      type: option.type === undefined ? '' : option.type,
      noborderBottom: option.noborderBottom === undefined ? false : option.noborderBottom
    }, this.callback)
  }
}
window.HemaJSBridge = new HemaJSBridge()

window.HemaJSBridge

前端

初始化获取数据

/**
 * res 格式
 * res.data 成功返回值
 * res.error 错误返回内容
 * res.status 执行状态，0 表示成功的，其他的都是异常 
 * data.store_id 
 * data.merchant_id 
 * data.role 用户角色，0:店主，1:店长，2:收银员
 * data.store_ids 返回门店数组
 */
window.HemaJSBridge.invoke('init', {
  query: ['store_id']
}, res => {
  window.alert(res)
})

h5 主动发起交互

/**
 * @param {string} action 触发的事件
 * @param {object/function} option 传参，当 option 是 function，则 callback = option
 * @param {function} callback 操作完成后原生 APP 回调事件
 *
 * 回调携参 res 格式
 * {
 *   status: {number}, //执行状态，0 表示成功的，其他的都是异常
 *   data: {any}, // 成功返回值
 *   error: {string} // 错误提示
 * }
 */
import './jsbridge'
window.HemaJSBridge.invoke(action, option, callback)
window.HemaJSBridge.invoke(action, callback)

// 栗子
/**
 * 启动扫码页面
 * res 格式
 * res.data 成功返回值
 * res.error 错误返回内容
 * res.status 执行状态，0 表示成功的，其他的都是异常
 * title 页面标题
 * tipText 扫描二维码时的提示文本
 * data.qr_code 扫描的二维码
 * /
window.HemaJSBridge.invoke('camera', {
  title: '扫描二维码',
  tipText: '请扫描收钱吧工作人员提供的二维码'
}, res => {
  if (res.status === 0) {
    console.log('调用相机成功', JSON.stringify(res.data))
  } else {
    console.warn('调用相机失败')
  }
})

/**
 * 启动页面
 * res.data 成功返回值
 * res.error 错误返回内容
 * res.status 执行状态，0 表示成功的，其他的都是异常
 *
 * title 页面标题
 * rightText 导航栏右边文本
 * url 页面跳转url
 * entry 页面跳转入口
 */
window.HemaJSBridge.invoke('startPage', {
  title: '储值',
  url: 'http:\/\/anne-stored.oss-cn-beijing.aliyuncs.com\/index.html',
  entry:'/home/index'
}, res => {
})

/**
 * 门店列表
 * data.store_id 门店id
 * data.store_name 门店名称
 */
window.HemaJSBridge.invoke('stores', res => {
})

/**
 * 打电话
 * phone 电话号码
 */
window.HemaJSBridge.invoke('callPhone', {
  phone: '18238495876'
},res => {
})

APP 头部导航条

/**
 * @param {string} option = {
 *                            left {function/object} {
 *                              text {string}, // default: null
 *                              color {string}, // default: null
 *                              click {function}, // default: () => {}
 *                            },
 *                            center {function/object/string} {
 *                              text {string}, // default: null
 *                              color {string}, // default: null
 *                              click {function}, // default: () => {}
 *                            },
 *                            right {function/object} {
 *                              text {string}, // default: null
 *                              color {string}, // default: null
 *                              click {function}, // default: () => {}
 *                            },
 *                            autoTitle {boolean}, // default: true
 *                            type {string}, // default: ''
 *                            noborderBottom {boolean} // default: false
 *                          }
 */
window.HemaJSBridge.header(option)

APP 主动发起交互

// 头部
window.HemaJSBridge.header({
  left: res => { // 头部导航栏左侧（可选参数）
    console.log(JSON.stringify(res))
  },
  center: res => { // 头部导航栏标题/中间部分（可选参数）
    console.log(JSON.stringify(res))
  },
  right: res => { // 头部导航栏右侧（可选参数）
    console.log(JSON.stringify(res))
  }
})

APP 部分

拦截的url = "jsbridge://methodName?jsonObj"

h5 主动发起交互

// action
action = 'camera'

// option
option = {
  ...
}

// callback
window.HemaJSBridge.callback(option)

APP 头部导航条

// option
option = {
  left: {
    text: null, // default: null
    color: null // default: null
  },
  center: {
    text: null, // default: null
    color: null // default: null
  },
  right: {
    text: null, // default: null
    color: null // default: null
  },
  autoTitle: true, // default: true
  type: 'primary', // default: '', "select_store":显示门店标题
  noborderBottom: false // default: false
}

// callback
window.HemaJSBridge.headerLeft(option) // 头部导航栏左侧
window.HemaJSBridge.headerCenter(option) // 头部导航栏标题/中间部分
window.HemaJSBridge.headerRight(option) // 头部导航栏右侧

//报表
HemaJSBridge.headerCenter({
    "data": {"store_ids": [
        "a5d89296-3388-40ec-836f-6dcd601a057f",
        "f5246c5a-24e8-49b1-af65-335428e21191"
    ]},
    "status": 0
});