移动端混合开发

1、判断h5运行平台

const ua = window.navigator.userAgent;
let AppSource = "";
if (
  ua.match(/iPad/) ||
  ua.match(/iPhone/) ||
  ua.match(/iPod/) ||
  ua.match(/ios/)
) {
  AppSource = "ios";
} else if (/android_poly/i.test(ua)) {
  AppSource = "android";
}
Vue.prototype.$AppSource = AppSource; // vue2
app.config.globalProperties.AppSource = AppSource; // vue3

2、h5调用app方法

/**
 * APP端交互
 * @param method 交互方法
 * @param params 给app传输数据
 * @param callback 非app环境处理
 */
const jsBridge = (method: string, params: any, callback?: () => any): void => {
  if (platform === "ios") {
    if (window.webkit.messageHandlers[method]) {
      window.webkit.messageHandlers[method].postMessage(params);
    } else {
      callback && callback();
    }
  } else if (platform === "android") {
  	// android是安卓端暴露出的jsBrige对象，method是方法
    if (window.android[method]) {
      if (params) {
        window.android[method](JSON.stringify(params));
      } else {
        window.android[method]();
      }
    } else {
      callback && callback();
    }
  } else {
    // 否则是H5页面
    callback && callback();
  }
};
export default jsBridge;

android

ios