Vue使用jsBridge

在VUE中使用jsBridge 亲测可用

android 4.0+，ios8.0+ 测试通过

jsBridge文件

/** * 函数描述：js调用webview事件 * * jsBridge.callHandler(method, data, callBack(response)); * @param method {string} 方法名 * @param data {Object} 参数 * @return {Object} 回调 */
/** * 函数描述：webView调用JS事件 * * jsBridge.registerHandler(method, callBack(response)); * @param method {string} 方法名 * @return {Object} 回调 */
var JsBridge = {
    install: function(Vue) {
        Object.defineProperty(Vue.prototype, 'JsBridge', {
            value: JsBridge
        })
    },
    init: function(callback) {
        if (window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() {
            document.documentElement.removeChild(WVJBIframe)
        },
        0)
    },
    registerHandler: function(name, fun) {
        this.init(function(bridge) {
            bridge.registerHandler(name, fun);
        })
    },
    callHandler: function(name, data, fun) {
        this.init(function(bridge) {
            bridge.callHandler(name, data, fun);
        })
    }
}

export
default JsBridge

将上方代码保存在自己的项目中

引入

main.js:

import JsBridge from './jsBridge' //上方文件的位置

Vue.use(JsBridge)

使用

...
mounted() {
    this.JsBridge.registerHandler(
        'testJs',//注册的方法名，供原生调用
        (data, responseCallback) => {
        data = JSON.stringify(data)//收到原生发来的数据
        ...
        responseCallback("js say: got it!")//处理完成后返回给原生
    })
},
methods:{
    showToast(){
        this.JsBridge.callHandler(
            'toast',//原生声明的函数名称
            { data: `处理成功` },//发送给原生的数据
            (res) => {
                res = JSON.parse(res)//原生处理完成后返回的数据
                ...
            }
        )
    }
}
...

按照上方步骤，你就可以在vue项目中 ，与客户端就可以交互了