记一次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格式（传递参数）
          }
        })

最后完成