APP中嵌入h5，如何通过window.WebViewJavascriptBridge进行交互

最新推荐文章于 2025-05-12 13:42:28 发布

别忘了微笑_cuicui

最新推荐文章于 2025-05-12 13:42:28 发布

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：移动端

本文链接：https://blog.csdn.net/CuiCui_web/article/details/110436567

移动端专栏收录该内容

9 篇文章

订阅专栏

公司移动端项目以H5形式开发并嵌入APP壳子，可减少APP安装数量。但存在H5与原生APP交互问题，如原生APP跳转H5需携带用户信息。本文从H5角度讲解，包括创建bridge.js文件、全局注册bridge，以及在H5界面进行交互的方法。

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

本文主要是涉及这样一个需求，公司的移动端项目比较多，但是不想安装过多的APP，于是所有项目以H5的形式开发，最后嵌入进APP的壳子中，继而只需要安装一个app；那么这里边存在一个问题，h5与原生app如何进行交互呢？
原生app跳转进相应的H5界面，需要携带一些用户信息，本文主要是通过window.WebViewJavascriptBridge悄悄的进行数据交互。

本文主要站在h5的角度进行讲解：

第一步：创建一个bridge.js文件，编写如下公共代码：

/* eslint-disable */
// 根据navigator.userAgent判断一下当前环境属于ios环境还是按住哦环境
let isAndroid =
  navigator.userAgent.indexOf("Android") > -1 ||
  navigator.userAgent.indexOf("Adr") > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

/** 针对安卓和ios系统，对window.WebViewJavascriptBridge进行兼容性处理 */
//这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
  //Android使用
  if (isAndroid) {
    if (window.WebViewJavascriptBridge) {
      callback(WebViewJavascriptBridge);
    } else {
      //添加dom事件
      document.addEventListener(
        "WebViewJavascriptBridgeReady",
        function() {
          callback(WebViewJavascriptBridge);
        },
        false
      );
    }
    sessionStorage.phoneType = "android";
  }

  //iOS使用
  if (isiOS) {
    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 = "wvjbscheme://__BRIDGE_LOADED__";
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() {
      document.documentElement.removeChild(WVJBIframe);
    }, 0);
    sessionStorage.phoneType = "ios";
  }
}
//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function(bridge) {
  if (isAndroid) {
    //初始化
    bridge.init(function(message, responseCallback) {
      var data = {
        "Javascript Responds": "Wee!"
      };
      responseCallback(data);
    });
  }
});

export default {
  // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
  callHandler(name, data, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
      bridge.callHandler(name, data, callback);
    });
  },
  // APP调js方法 （参数分别为:js提供的方法名  回调）
  registerHandler(name, callback) {
    setupWebViewJavascriptBridge(function(bridge) {
      bridge.registerHandler(name, function(data, responseCallback) {
        callback(data, responseCallback);
      });
    });
  }
};

第二步：全局注册bridge
在main.js中

import Bridge from '@/utils/bridge'
Vue.prototype.$bridge = Bridge

第三步：去相应h5项目中的界面中开始交互

// 设置用信息

this.$bridge.callHandler("sendUserInfo", JSON.stringify(temp), () => {})

// 获取用户信息

this.$bridge.callHandler("getUserInfo","", res =>{
          const temp = JSON.parse(res)
     }
})

// 切换系统的方法（多个h5项目在原生app的壳子中进行切换）

changeSys(){
      var temp={
        flag:'1',
        system:'MTS'
      }
      this.$bridge.callHandler("changeSys",JSON.stringify(temp),()=>{})
    },

在这里插入图片描述