通过JsBridge进行app与webview通信（Vue版）

通过JsBridge进行app与webview通信（Android版）

一、问题

现在很多app都是嵌套h5页面的混合型app，实现方式就是app加一个webview，webview加入h5的项目地址，那么有时候我们需要获取设备id、获取定位等等信息，都是h5获取不了的，这时候就需要app与h5建立一个通信，实现信息传输，我们可以使用JsBridge来实现这个需求。

二、JsBridge

通过JsBridge，Web端可以调用Native端的Java接口，同样Native端也可以通过JsBridge调用Web端的JavaScript接口，实现彼此的相互调用。
了解JsBridge-https://github.com/lzyzsd/JsBridge

三、Vue2结合WebViewJavascriptBridgeReady

1.封装一个JsBridge方法

JsBridge.js

//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , ()=> {
                callback(window.WebViewJavascriptBridge)
            },
            false
        );
    }
}

//注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
connectWebViewJavascriptBridge(function(jsbridge) {
    //初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
   jsbridge.init(function(message, callback) {
       callback({'Javascript Responds': 'Android调用JS初始化方法!'});
   });
})

export default  {
    registerHandler: function(name, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
           jsbridge.registerHandler(name, function(data, responseCallback) {
                responseCallback(fun(data));
            });
        })
    },
    callHandler: function(name, data, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //JS调用Android方法：接收Android传递过来的数据，并做处理
           jsbridge.callHandler(name, data, function(data) {
                fun(data);
            });
        })
    }
}

2.main.js

import JsBridge from "./utils/JsBridge"

Vue.prototype.$jsbridge = JsBridge;

3.在app.vue使用(其他文件也可以)

<template>
  <div id="app">
    <div class="mianBox">
      <div>app主动发送数据给h5：{{monitor}}</div>
      <div>h5触发app方法接收的结果：{{contnet}}</div>
      <button @click="getData" >调用app方法getAppData</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      contnet:"",
      monitor:""
    }
  },
  mounted(){
  	// 监听app触发monitorTestData，进行监听接收数据
    this.$jsbridge.registerHandler('monitorTestData', (data) => {
        console.log("监听到的数据",data)
        this.monitor= data;
    })
  },
  methods:{
    getData(){
    	// 触发 app 内部设定好的方法，触发完成会有回调接收结果
      this.$jsbridge.callHandler('getAppData',{'param': "你好，这是我JS传递给你的数据"}, (data) => {
         console.log("获取到的数据",data)
          this.contnet = data;
      })
    }
  }
}
</script>

<style>
#app {
  height: 100%;
}
</style>

四、结合Android实现效果

通过JsBridge进行app与webview通信（Android版）
运行出来的界面

JS 通过 JSBridge 调用 Android

Android 通过 JSBridge 调用 JS