1. 判断安卓或者ios的方法

const u = navigator.userAgent;
export const isAndroid = () => {
  return u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
};
export const isIOS = () => {
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};

2. 首先通过WebViewJavascriptBridge来注册事件；（安卓和ios有些不同如下）

//这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback: Function) {
  //Android使用
  if (isAndroid()) {
//判断是否支持WebViewJavascriptBridge
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge);
    } else {
// 不支持就给他注册这个事件
      document.addEventListener(
        "WebViewJavascriptBridgeReady",
        function() {
          callback(window.WebViewJavascriptBridge);
        },
        false
      );
    }
    sessionStorage.phoneType = "android";
  }

  //iOS使用
  if (isIOS()) {
    if (window.WebViewJavascriptBridge) {
      return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    const 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";
  }
}

3.如果是安卓需要执行一次init，ios不需要

//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function(bridge: Bridge) {
  if (isAndroid()) {
    //初始化
    bridge.init(function(message: string, responseCallback: Function) {
      const data = {
        "Javascript Responds": "Wee!"
      };
      responseCallback(data);
    });
  }
});

4.封装一个函数，每次调用原生方法走这里

export function callHandler(name: string, data: object, callback: Function) {
  setupWebViewJavascriptBridge(function(bridge: Bridge) {
    bridge.callHandler(name, data, callback); // 这里相当于window.WebViewJavascriptBridge.callHandler(这个是跟原生约定的方法)
  });
}

5. 可以单独创建一个文件，对每个事件进行管理如（调用相册，关闭webview…）

import { callHandler } from "@/utils/jsBridge.ts"; // 先引入我们上面封装好的文件

/**比如以下是关闭当前webview */
export function closePage(): Promise<{}> {
  return new Promise((resolve, reject) => {
    callHandler(
      "跟原生约定的方法名字",
      {给原生的参数},
      (result: string) => {
        // 原生给我们的数据
        resolve(JSON.parse(result));
      }
    );
  });
}

6. 直接可以在我们页面中调用了

import { closePage } from "@/utils/***.ts";
closePage();