記一次app內嵌h5

由於公司項目開發需要，小計一次簡單的vue開發app內嵌h5頁面:

1.在項目使用vue腳手架完全搭建好之后，在main.js中將ios以及android的bridge方法引入

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();  
})

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': 'Wee!'
     };
     console.log('JS responding with', data);
     responseCallback(data);
     });
 })

 function initVueApp() {
  new Vue({
    el: '#app',
    router,
    axios,
    components: { App },
    template: '<App/>'
  })
 }

由於使用bridge需要在頁面掛載的時候，所以在沒有發布到手機app中時將initVueApp注釋掉最好；

2.下一步就是在相應的頁面中的點擊事件或者其它事件中調用事先與App開發人員定好的方法

window.WebViewJavascriptBridge.callHandler(
          'jsCallApp',{
          "action" : "jsSaveImage",//定義的方法動作名
          "entity" : {
            "image": dataURL   // * 保存的圖片Base64格式（傳遞參數）
          }
        })

最后完成