JSBridge sample

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
letisiOS = !! navigator.userAgent.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/);

// This is mandatory to create some Settings
function setupWebViewJavascriptBridge(callback) {
    / / use Android
    if (isAndroid) {
        if (window.WebViewJavascriptBridge) {
            callback(window.WebViewJavascriptBridge);
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'.() = > {
                    callback(window.WebViewJavascriptBridge);
                },
                false
            );
        }
        console.log('tag'.'android');
        sessionStorage.phoneType = 'android';
    }

    / / iOS use
    if (isiOS) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(() = > {
            document.documentElement.removeChild(WVJBIframe);
        }, 0);
        console.log('tag'.'ios');
        sessionStorage.phoneType = 'ios'; }}// Register the callback function and call the initialization function on the first connection (Android requires initialization,ios does not)
setupWebViewJavascriptBridge((bridge) = > {
    if (isAndroid) {
        / / initialization
        bridge.init((message, responseCallback) = > {
            var data = {
                'Javascript Responds': 'Wee! '}; responseCallback(data); }); }});export default {
    // call APP method with js (the parameters are respectively: the data callback from the method name provided by APP to APP)
    callHandler(name, data, callback) {
        setupWebViewJavascriptBridge((bridge) = > {
            bridge.callHandler(name, data, callback);
        });
    },
    // APP calls the js method (arguments are: method name callback provided by js)
    registerHandler(name, callback) {
        setupWebViewJavascriptBridge((bridge) = > {
            bridge.registerHandler(name, (data, responseCallback) = >{ callback(data, responseCallback); }); }); }};Copy the code

import Bridge from './JSbridge.js'
Vue.prototype.$bridge = Bridge
Copy the code

<template> </template> <script> export default {data () {return {}}, $bridge. CallHandler ('dataToAndroid', MSG,(res)=>{alert(' get app response data :'+res)) This.test = res})}, // app call js getAPPDate() {this.$bridge. RegisterHandler ('dataToJs', (data, ResponseCallback) => {alert('app calls js method, ResponseCallback (data)}}, mounted(){this.getAppDate ()}} </script>Copy the code