android ios 内嵌 H5页面使用jsbridge

1、使用vue.js框架搭建前段项目页面  在main.js中初始化 WebViewJavascriptBridge 对象，

WebViewJavascriptBridge 是app端定义的，在前端页面中获取 获取过程需要等待 ， 所以vue实例的创建要在

WebViewJavascriptBridge 获取成功之后，因为我的vue入口页面用到了jsbridge方法调用app端的数据获取header信息，

然后把header信息放到我需要请求后台数据接口里（接口有权限 需要登录 h5页面没有登录入口 只有从app端获取header信息进行身份验证）

下面是在main.js中初始化 WebViewJavascriptBridge 对象 的代码：

// android
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}

connectWebViewJavascriptBridge(function(bridge) {
    initVueApp();

    bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': '测试中文!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });
});
// ios
function setupWebViewJavascriptBridge(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)
}
setupWebViewJavascriptBridge(function (bridge) {
        initVueApp(); // vue 实例
});

// vue 实例

function initVueApp() {
    new Vue({
        el: '#app',
        router,
        store,
        components: {
            App
        },
        data () {
            return {
                listData: []
            };
        }
    }).$mount('#app');
}

2、然后创建一个js文件，里面定义调用app端数据的方法， 在需要使用的vue模板中import 这个js文件就行

jsbridge.js :

function requestBack () {
    // 请求返回
    return new Promise(function (resolve, reject) {
        window.WebViewJavascriptBridge.callHandler(
            'jsToNativeGoBack',
            {
                "code": 0,
                "msg": "",
                "data": {
                   "backType": 0 // 关闭
                }

            },
            function (responseData) {
            }
        );
    });
}

function getHeader () {
    // 获取请求头信息
    return new Promise(function (resolve, reject) {
        window.WebViewJavascriptBridge.callHandler(
            'jsToNativeGetHeader'
            , {'header': ''}
            , function (responseData) {
                let headerDate = JSON.parse(String(responseData));
                window.headers = headerDate.data;
                resolve(headerDate.data);
            }
        );
    });
}

在模块中：

import jsBridge from 'common/js/jsbridge';

在vue钩子函数中：

jsBridge.getExtra(JSON.stringify(self.toAppJson)).then(function (value) {
    let companyId = value.companyId;
    // 获取header
    jsBridge.getHeader().then(function (value) {
        self.$http({
            url: '/approve/setting/flow/list?companyId=' + companyId,
            method: 'GET',
            headers: value
        }).then((res) => {
            if (res.body.code === 0) {
                self.$store.state.homeFlag = false;
                self.modules = res.body.data.list;
                self.SAVE_HOMETYPELISTS(res.body.data.list);
            } else {
                self.$store.state.homeFlag = true;
            }
        }, (res) => {
            self.$store.state.homeFlag = true;
        });
    });
});

methods: 

backToApp () {
    jsBridge.requestBack().then(function () {
        self.$store.state.stuffsFlag = true;
        self.$store.state.homeFlag = true;
    });
}


3、安卓物理返回键 页面跳转重定向 

在Android 中监测物理返回键点击事件 点击后通知h5页面

在h5页面中 给jsbridge 注册一个事件 

mounted () {
   // 安卓 控制全局物理返回键页面跳转
    WebViewJavascriptBridge.registerHandler("androidPhysicalBack", () => {
        this.backTo();
    });
},

backTo方法 是我页面中左上角自定义返回路径的方法：

methods: {
    backTo () {
        if (!this.go) {
           // this.$router.back 会触发onpopstate
            this.$router.back();
        } else if (this.go === 'app') {
           this.$emit('backToApp');
        } else if (this.go === 'toHome') { 
            this.$emit('ifLeave');
        } else if(this.go === 'draftToList'){ 
            this.$emit('doBack');
        } else if (this.go === 'applyToHome') { 
           this.$emit('resetMyApplyStatus');
        } else if (this.go === 'approvalToHome') { 
            this.$emit('resetMyApprovalStatus');
        } else { 
            this.$router.replace(this.go);
        }
    }
}