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

最后完成