混合开发，整理下H5和原生的交互封装

混合开发时，安卓和IOS同事用的WebView库不同，在与我（H5）交互时用的js方法也不同。

jsBridge.js 是IOS定义api

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
           

app.js 是对两端的api简单包装了一下

import JsBridge from './jsBridge.js'

export function getAppParams (resolve, reject) {
    var userAgent = navigator.userAgent
    var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
    if (isAndroid) {
        //注册事件监听  
        function connectWebViewJavascriptBridge (callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function () {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
        //注册回调函数，第一次连接时调用 初始化函数  
        connectWebViewJavascriptBridge(function (bridge) {
            bridge.init(function (data, responseCallback) { //收到原生发来的数据 data
                data = JSON.parse(data)
                if (data) {
                    resolve(data)
                } else {
                    reject("no data")
                }
                var responseData = 'js got it';
                responseCallback(responseData);
            });
        })
    } else {
        JsBridge.registerHandler(
            'XXXFun',//注册的方法名，供原生调用
            (data, responseCallback) => { //收到原生发来的数据 data
                data = JSON.parse(data)
                if (data) {
                    resolve(data)
                } else {
                    reject("no data")
                }
                var responseData = "js got it";
                responseCallback(responseData);
            })
    }
}
           

使用时也很简单，可以在mouted里使用，把客户端交互的参数拿到后再做业务流程。

import {getAppParams} from './app.js'

var p = new Promise(getAppParams)
p.then((res) => {
    console.log(res)
  }).catch((error) => {
     console.log(error)
    })