Vue 与 安卓 交互

H5连接原生的js

H5ConnectNative.js

export default class H5ConnectNative {
constructor(handleMap) {
        this.handleMap = handleMap;
        this.bridge = window.WebViewJavascriptBridge;
        this._initBridge();
}

_initBridge() {
        var context = this;
        var getBridge = this._getBridge.bind(this);

        if(!this.bridge) {
                if(this._isIOS()) {
                        if(window.WVJBCallbacks) {
                                return window.WVJBCallbacks.push(getBridge);
                        }
                        window.WVJBCallbacks = [getBridge];
                        var WVJBIframe = document.createElement('iframe');

                        WVJBIframe.style.display = 'none';
                        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                        document.documentElement.appendChild(WVJBIframe);

                        setTimeout(function() {
                                document.documentElement.removeChild(WVJBIframe);
                        }, 0);
                } else if(this._isAndroid()) {
                        document.addEventListener(
                                'WebViewJavascriptBridgeReady',
                                function() {
                                        getBridge(window.WebViewJavascriptBridge);
                                }
                        )
                }
        } else {
                getBridge(this.bridge);
        }
}

_getBridge (bridge) {
        this.bridge || (this.bridge = bridge);

        if(this._isAndroid()) {
                this.bridge.init(function(message, responseCallback) {
                        //responseCallback();
                });
        }

        this._register();
}

_register () {
        if(!this.bridge)
                return;

        Object.keys(this.handleMap).forEach((field) => {
                this.bridge.registerHandler(field, this.handleMap[field]);
        });
}

goAppPage (value) {
        if(!this.bridge){
                return;
        }
        this.bridge.callHandler('goAPP', value);
}

_isIOS () {
        return /ip(hone|ad)/i.test(navigator.userAgent);
}

_isAndroid () {
        return /android/i.test(navigator.userAgent);
}

}

vue内main.js

放置在main.js里面 无论任何链接进入页面，都会初始化accessToken。同时，安卓登录之后，再次调用setAccessToken方法，即可在不刷新页面的情况下设置accessToken。

import H5ConnectNative from './assets/js/H5ConnectNative.js';
Vue.prototype.h5ConnectNative = new H5ConnectNative({
        setAccessToken: function(accessToken) {
                //alert("token:"+accessToken);
                if(!accessToken) {
                        localStorage.setItem('token', '');
                } else {
                        localStorage.setItem('token', accessToken);
                }
                //alert("token:"+localStorage.getItem('token'));
        }
});

vue内页面调用安卓

this.h5ConnectNative.goAppPage(JSON.stringify({returnBtn: "back"}));

注：方便起见，可以在钩子函数中，如果需要用户登录，则调起安卓。

router.beforeEach((to, from, next) => {
        {
                if(to.meta.requireAuth) {
                        if(localStorage.getItem("token") != null && localStorage.getItem("token") != '') {
                                next();
                        } else {
                                Vue.prototype.h5ConnectNative.goAppPage(JSON.stringify({
                                        login: "login"
                                }))
                        }
                } else {
                        next();
                }
        }
})