vue与原生（ios，安卓）交互

September 18, 2021 2941

一、原生调用H5（vue）的方法：

  1. 在methods中定义方法
    1
    2
    3
    4
    5
    6
    //判断app是否安装成功 （Android触发）1->完成 2->未完成
        appIsInstall(packageName, status) {
          if (parseInt(status) === 1) {
            this.sendTaskStatus(104);
          }
        }
  2. 将要给原生调用的方法挂载到 window 上面
    1
    window.appIsInstall = this.appIsInstall;
  3. 注意：要注意这里写法是this.appIsInstall指向window，this.appIsInstall()这样就是直接调动了
  4. 原生安卓或者ios会在window上读取appIsInstall这个约定的方法名，传参调用

二、h5调用原生

  1. js注入（第一种方式）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const { isAndroid } = this.judgeSystem();  //判断系统
    if (isAndroid) {
        //安卓端--PggH5Js--需要是约定的字段
        window.PggH5Js.lookAdsForGuaZi(extraAdTask);
        } else {
        //ios端
        window.webkit.messageHandlers.lookAdsForGuaZi.postMessage({
        extraAdTask
        });
    }
  2. url拦截（第二种方式，ios跟安卓一样）
    1
    2
    3
    4
    // 跳转到指定视频
    export function toVideoView(videoId: string) {
      	window.location.href = `${NativeAPI.TO_VIDEO_VIEW}?videoId=${videoId}`;
    }
  3. 判断系统
    1
    2
    3
    4
    5
    6
    static judgeSystem() {
           const u = navigator.userAgent;
           const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
           const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
           return { isAndroid, isIOS };
       }
这个原理也很简单，其实就是前端发送一个请求出去，url里面带参，原生会去拦截这个请求，获取到数据

三、总结

  1. 一般用的最多的就是：H5调用原生（安卓可以直接回调参数，ios不行），然后原生调用H5这边方法，传参过来

    • 第一步：H5调用原生方法
    1
    2
    3
    4
    5
    6

    // 通知原生获取设备唯一标识
    const getDeviceIdentify = async () => {
      PggNative.getDevicesID();
    };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // nativeInterface.ts  文件

    export default class PggNative {
      /**
       * @description: 通知原生获取设备的唯一标识
       * @param {*}
       * @return {*}
       */
      static getDevicesID() {
        const { isAndroid, isIOS } = this.judgeSystem();
        try {
          if (isAndroid) {
            window.NFTH5JS.getDeviceIdentify();
          } else if (isIOS) {
            window.webkit.messageHandlers.getDeviceIdentify.postMessage({});
          }
        } catch (error) {
          console.log(error);
        }
      }
    }

    第二步：原生调用H5这边方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //  main.ts文件  js方法挂载全局

    import { createApp } from "vue";
    import App from "./App.vue";
    import JavaCallJs from "@/services/jsInterface";
    window.JavaCallJs = JavaCallJs;

    const app = createApp(App);
    useVantComponent(app);
    app.use(store, key).use(router).mount("#app");

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    // jsInterface.ts  文件

    import emitter from "@/utils/emit";
    import { store } from "@/store";
    import useTaskState from "@/composables/useTaskState";
    const { getCompletionInfo, finishXuanshang } = useTaskState()
    export default class JavaCallJs {
        /**
       * @description: 设置设备码存到本地
       * @param {设备码}
       * @return {*}
       */
      static setDeviceIdentify(params: string) {
        console.log('-------ios回调设备标识参数----', params)
        localStorage.setItem("DeviceIdentify", params);
      }
    }