vue+ts项目(H5)与APP端交互_ts 获取 app-CSDN博客

本文链接：https://blog.csdn.net/weixin_58008365/article/details/122640296

1、H5向APP传输数据

@param method 交互方法

@param params 给app传输数据

@param callback 非app环境处理

首先判断App是ios还是android

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

  jsBridge(method: string | number, params: any, callback?: () => any): void {
    if (Vue.prototype.$AppSource === "ios") {
      if (window.webkit.messageHandlers[method]) {
        window.webkit.messageHandlers[method].postMessage(params);
      } else {
        callback && callback();
      }
    } else if (Vue.prototype.$AppSource === "android") {
      if (window.android[method]) {
        if (params) {
          window.android[method](JSON.stringify(params));
        } else {
          window.android[method]();
        }
      } else {
        callback && callback();
      }
    } else {
      // 否则是H5页面
      callback && callback();
      console.log("HHHH5");
    }
  }

在页面中使用

  send(): void {
    let params = "红红火火恍恍惚惚交互测试啊啊啊啊";
    this.jsBridge("sendStrings", params); // 给app传输的"sendStrings"方法名,params参数
  }

2、接收APP传输数据

需要将方法在全局的window注册一下哦~

interface Window {
  _hmt: any;
  webkit: any;
  android: any;
  nc: any;
  changeColor: any;
}

  created(): void {
    window.changeColor = this.changeColor; // 要将方法挂载在window上
  }
  changeColor(params: string): void { 
    alert(JSON.stringify(params)); // 这儿就可以对app给我们的数据进行操作啦~
  }