1、使用vue.js框架搭建前段項目頁面 在main.js中初始化 WebViewJavascriptBridge 對象，
WebViewJavascriptBridge 是app端定義的，在前端頁面中獲取 獲取過程需要等待 ， 所以vue實例的創(chuàng)建要在
WebViewJavascriptBridge 獲取成功之后，因為我的vue入口頁面用到了jsbridge方法調(diào)用app端的數(shù)據(jù)獲取header信息，

然后把header信息放到我需要請求后臺數(shù)據(jù)接口里（接口有權(quán)限 需要登錄 h5頁面沒有登錄入口 只有從app端獲取header信息進(jìn)行身份驗證）
下面是在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、然后創(chuàng)建一個js文件，里面定義調(diào)用app端數(shù)據(jù)的方法， 在需要使用的vue模板中import 這個js文件就行

jsbridge.js :

function requestBack () {
    // 請求返回
    return new Promise(function (resolve, reject) {
        window.WebViewJavascriptBridge.callHandler(
            'jsToNativeGoBack',
            {
                "code": 0,
                "msg": "",
                "data": {
                   "backType": 0 // 關(guān)閉
                }

            },
            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鉤子函數(shù)中：
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、安卓物理返回鍵 頁面跳轉(zhuǎn)重定向

在Android 中監(jiān)測物理返回鍵點擊事件 點擊后通知h5頁面

在h5頁面中 給jsbridge 注冊一個事件

mounted () {
   // 安卓 控制全局物理返回鍵頁面跳轉(zhuǎn)
    WebViewJavascriptBridge.registerHandler("androidPhysicalBack", () => {
        this.backTo();
    });
},

backTo方法 是我頁面中左上角自定義返回路徑的方法：

methods: {
    backTo () {
        if (!this.go) {
           // this.$router.back 會觸發(fā)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);
        }
    }
}