---

需求

ios/安卓 内嵌vue H5 页面, 页面可以同步或异步调用app的方法, 同时app也可以调用H5代码中声明的方法

---

一、dsBridge是什么？

三端易用的现代跨平台 Javascript bridge， 通过它，你可以在Javascript和原生之间同步或异步的调用彼此的函数.

二、使用步骤

1.安装

npm install dsbridge@3.1.4

2.新建js文件 src\components\dsbridge.js

var dsBridge = require('dsbridge')
export default {
  callmethod (name, data, callback) {
    callback(dsBridge.call(name, data, callback))
  },
  registermethod (tag, callback) {
    dsBridge.register(tag, callback)
  }
}

3. mian.js中引入

import Bridge from '@/components/dsbridge.js'
...
Vue.prototype.$bridge = Bridge

4. 在vue中使用

a.前端调用app声明的方法

  let data = {
    rounter: 109 /* int 类型枚举变量 */,
    callBack: true /* bool 类型，告诉客户端是否需要回调 */,
    params: {}
  }
  const that = this
  this.$bridge.callmethod('nativeTunnel', data, (res) => { // nativeTunnel为方法名
    // 注意this指向问题
    alert(res) // 这里能拿到app的返回值哦!
  })

b.app调用前端声明的方法

  this.$bridge.registermethod('h5methods', (data) => { // h5methods为方法名
     alert(data) // app端给前端的数据在这里
     return {a: 'xxx'} // 前端返回给app的值
  })

---

总结

dsBridge目前是我个人用过最好用的与App通信的组件, 若有不解, 欢迎咨询! 看到会第一时间回复哦~