H5內嵌APP，前端用vue，APP之間的互動處理，適配安卓ios, 為了降低開發成本，減少前端適配工作量，三端統一使用  WebViewJavascriptBridge

在進行後端介面請求的時候統一先把引數返給APP端，APP端進行加密之後，再返回給前端，前端再進行非同步請求

由於這裡涉及到非同步操作，直接寫的話直接不顯示，要一步一步的操作，上一步成功之後進行下一步操作，所以最終利用promise把APP，H5和後端之間的互動進行處理，

一步一步進行互動操作，最終成功

1. 先寫web端的bridge.js

var u = navigator.userAgent;
 
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
// alert('是否是Android：'+isAndroid);
// alert('是否是iOS：'+isiOS);
function setupWebViewJavascriptBridge(callback) {
  if(isAndroid){
    if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
    } 
 
else {
      document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
          if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge);
          callback(WebViewJavascriptBridge)
      }, false)
    }
  }
  
  
 
if(isiOS){
    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 = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
  
}

export default {
  callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
      bridge.callHandler(name, data, callback)
    })
  },
  registerhandler (name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

2. 封裝和APP互動的方法 callBridge.js

export default {
    methods:{
        callBridgefn(json){ // 呼叫app加密方法
            let p = new Promise((resolve, reject)=>{
                this.$bridge.callhandler('encryptParams', JSON.stringify(json),(data) =>{  //encryptParams是APP端規定的方法名

　　　　　　　　　　　　resolve(data) })
           }) return p; 
       }, 
　　　　goBack(){ // 呼叫APP的返回 
　　　　　　this.$bridge.callhandler('goBack', (data) =>{ // goBack是APP端規定的方法名 
　　　　}) 
　　} 
  } 
}

3. 利用promise重寫axios非同步請求方法 promise.js

import axios from 'axios'

export default{
    methods:{
     sendServer(param) { 
        return new Promise((resolve,reject)=>{            
                axios.post(url ,param).then(res=>{ // url為請求地址
                resolve(res.data)
            }).catch(err=>{
                reject(err)
            })
        })
     },
    }
}
    

4. 頁面中請求介面的方法

_sendServer(param){
this.callBridgefn(param).then(data=>{ 
　　this.sendServer(JSON.parse(data))
　　　　.then(res=>{

                // 這裡寫要對後端返回的資料進行的操作
            })
        })
}

5. 在頁面初始化的時候呼叫

created(){
     this._sendServer(param) //param是要傳遞給APP進行加密的引數
}