VUE H5 页面借助 dsbridge 嵌入到 app 中（前端）

H5 页面嵌入 app 中，不得不面对 web 和 native 之间进行交互的问题，比如：传递参数、调用函数等；至于交互的桥梁目前 github 上有一些开源的，其中使用最广的是 jsBridge，然而，最近刚开源了一个新项目 dsbridge；本文就看看 dsbridge 是如何实现 web 和原生之间同步或异步的调用彼此的函数，以及传递参数的；
官网：https://github.com/wendux

1、安装

//cdn方式引入初始化代码(中国地区慢，建议下载到本地工程)
//<script src="https://cdn.jsdelivr.net/npm/dsbridge@3.1.4/dist/dsbridge.js"> //</script>
//npm方式安装初始化代码
npm install dsbridge@3.1.4

2、创建一个新的 js 文件，引入 dsbridge

var dsBridge=require("dsbridge")
export default {
  //方法名，web传递给原生的数据，原生返回的回调函数
  callFn (name, data, callback) {
    callback(dsBridge.call(name, data, callback))
  },
  //方法名，原生传递过来的数据
  registerFn (tag, callback) {
    dsBridge.register(tag, callback)
  }
}

call前端主动触发与原生约定好的方法，进而给原生传值， 以希望原生做出一些操作;
register注册一个app原生定义好的事件，当原生触发该事件时， //前端这里就会监听到，进行一些业务操作;

3、main.js 引入

import Bridge from '@/utils/dsbridge.js'
Vue.prototype.$bridge = Bridge
```4、使用
web 端触发原生定义的方法，并传递数据到原生端；
```cpp
//同步
this.$bridge.callFn('nativeFn',{})
//异步
this.$bridge.callFm('nativeFn',{},(res)=>{
	console.log(res) //拿到原生返回的值	
})

原生端触发 web 端定义方法，传递数据给 web 端；

this.$bridge.registerFn('webFn',(data)=>{
	console.log(data)//拿到原生传递过来的数据
})

5、原理（安卓）

原生和 web 交互桥梁的实现主要是利用了 WebView 为我们提供了两种注入方法：evaluateJavascript、loadUrl 来向页面注入 javascript 代码，让安卓可以调用 H5 脚本中定义的方法；然后在通过安卓向页面注入一个对象，这样 javascript 就可以拿到这个对象，并调用里面的方法；

dsbridge 主要是针对上面的方式做了一个封装，将 call()、register() 等方法重新定义，供前端页面使用，在原生端做了一个分发的动作；

详细分析请参考：一步一步带你了解Hybrid开发框架之DsBridge