hybrid app 通讯最好的一片文章_hybrid app 请求方法封装-优快云博客

本文链接：https://blog.youkuaiyun.com/github_39319000/article/details/89945671

博客围绕Hybrid App混合开发，介绍移动端与原生APP的交互。提到webview可在原生安卓、ios、小程序上运行html。阐述了非jsbrige和jsbrige两种交互方式，非jsbrige简单但不安全，jsbrige简单且安全，并说明了jsbrige使用步骤。

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

Hybrid App 混合app 开发
 移动端与原生APP的交互 WebViewJavascriptBridge

webview 可以理解为一个浏览器，在原生的安卓，ios，小程序上用来运行html，或者是基于html封装的组件。

非jsbrige（简单，但是不安全）：

原生与js通信：由于ios是宿主元素，ios可以调用windows上面的方法，常见的就是ios直接 location.href 直接请求h5的页面，然后查询字符串携带token等。然后js去截取token。 android同ios。
js与原生通讯：由于html是在ios 的webview中，所以，js 的任何操作原生都可以捕捉到，一般都是原生给已路径，js跳转过去（如：window.location = 'showcart://'），安卓也一样。

jsbrige（简单，安全）如下面

第一步：全局的

export default function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
  } else {
    document.addEventListener(
      "WebViewJavascriptBridgeReady",
      function() {
        callback(WebViewJavascriptBridge)
      },
      false
    )
  }
  // =====以下是iOS必须的特殊处理========
  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)
  // =====以上是iOS必须的特殊处理========
}

第二部：引入

import setupWebViewJavascriptBridge from "@/assets/modules/setupWebViewJavascriptBridge"

第三步：调用原生ios封装的方法：

// //ios获取返回方法，比如ios封装的名字叫做goBack
setupWebViewJavascriptBridge(bridge => {
          bridge.callHandler("goBack", function (response) {
            console.log("JS got response", response);
          });
        });

 //ios获取token方法，比如ios封装的名字叫做getNativeToken
      setupWebViewJavascriptBridge(bridge => {
        bridge.callHandler("getNativeToken", function (response) {
          window.localStorage.setItem("token", response)
          me.getListData()
        })
      })