由于公司项目开发需要，小计一次简单的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: '
       '  }) }

由于使用bridge需要在页面挂载的时候，所以在没有发布到手机app中时将initVueApp注释掉最好；

2.下一步就是在相应的页面中的点击事件或者其它事件中调用事先与App开发人员定好的方法

window.WebViewJavascriptBridge.callHandler(          'jsCallApp',{          "action" : "jsSaveImage",//定义的方法动作名          "entity" : {            "image": dataURL   // * 保存的图片Base64格式（传递参数）          }        })

最后完成