记一次app内嵌h5

最新推荐文章于 2025-06-24 22:39:30 发布

转载最新推荐文章于 2025-06-24 22:39:30 发布 · 531 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longflag/p/10578948.html

文章标签：

#javascript #移动开发 #ViewUI

因公司项目开发需要，进行一次简单的vue开发app内嵌h5页面。先使用vue脚手架搭建项目，在main.js中引入ios及android的bridge方法，未发布到手机app时注释掉initVueApp；然后在相应页面事件中调用与App开发人员定好的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于公司项目开发需要，小计一次简单的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格式（传递参数）
          }
        })

最后完成

转载于:https://www.cnblogs.com/longflag/p/10578948.html