Skip to content

Instantly share code, notes, and snippets.

@bhaltair
Created March 6, 2018 03:15
Show Gist options
  • Save bhaltair/5c8a0376aafafbc90647bef1cef26d38 to your computer and use it in GitHub Desktop.
Save bhaltair/5c8a0376aafafbc90647bef1cef26d38 to your computer and use it in GitHub Desktop.
合码 js bridge
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()
@bhaltair
Copy link
Author

bhaltair commented Mar 6, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment