APP端与js交互，调用app方法 $bridge

webview_javascript_bridge.js

主要代码，可直接复制为一个文件。后续引入使用。

/*
* APP端与js交互
*
* 变量：phoneType：手机类型 android / ios / false
*
* 方法
* getPhoneType: 返回手机类型
* setupWebViewJavascriptBridge： 获取 window.WebViewJavascriptBridge
* init: 安卓端 定义一个默认的处理程序，这样Java就可以在没有分配handlerName的情况下向js发送消息
* callHandler：webView调用java的方法。 参数：name：方法名 data：传的数据 callback：成功后的回调方法
* registerHandler：是注入到桥梁中 JS 函数的别名。以供 APP 调用。name：函数名 callback：js函数
*
* 原生的方法：
* scanQRCodeForResult : 扫码
* */

/**
 * 函数描述：js调用webview事件
 *
 * callHandler(method, data, callBack(response));
 * @param method {string} 方法名
 * @param data {Object} 参数
 * @return {Object} 回调
 */

/**
 * 函数描述：webView调用JS事件
 *
 * registerHandler(method, callBack(response));
 * @param method {string} 方法名
 * @return {Object} 回调
 */

const getPhoneType = () => {
    if ((/android/gi).test(navigator.appVersion)) {
        return 'android';
    } else if ((/iphone|ipad|iPod/gi).test(navigator.appVersion)) {
        return 'ios';
    } else {
        return false;
    }
};

const setupWebViewJavascriptBridge = (callback) => {
    if (phoneType === 'ios') {
        // console.log("Enter ios");
        if (window.WebViewJavascriptBridge) {
            console.log("callback WebViewJavascriptBridge");
            // eslint-disable-next-line no-undef
            return callback(WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            // console.log("have window.WVJBCallbacks");
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        const 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 (phoneType === 'android') {
        // console.log("Enter android");
        if (window.WebViewJavascriptBridge) {
            // console.log("callback WebViewJavascriptBridge");
            // eslint-disable-next-line no-undef
            callback(WebViewJavascriptBridge);
        } else {
            console.log("No window.WebViewJavascriptBridge addEventListener");
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                function () {
                    console.log("callbackadd EventListener WebViewJavascriptBridge");
                    // eslint-disable-next-line no-undef
                    callback(WebViewJavascriptBridge);
                },
                false
            );
        }
    }
};

const phoneType = getPhoneType();

export default {
    phoneType,
    init() {
        if (phoneType === 'android') {
            console.log('enter bridge android init');
            setupWebViewJavascriptBridge((bridge) => {
                bridge.init(function (message, responseCallback) {
                    console.log('JS got a message', message);
                    const data = {'Javascript Responds': 'Wee!'};
                    responseCallback(data);
                });
            });
        }
    },

    callHandler(name, data, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            console.log('callHandler__bridge', bridge);
            bridge.callHandler(name, data, callback);
        });
    },

    registerHandler(name, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            console.log('registerHandler__bridge', bridge);
            bridge.registerHandler(name, callback);
        });
    }
};

引入使用调用app方法实现app某些功能。

import $bridge from '@/utils/webview_javascript_bridge'
$bridge.callHandler('app的方法，需要app提供', 传入参数, function () {
      回调内容
})

以上用来记录，来解决问题的，自己试试就好。不行就去百度吧。