vue与原生(ios,安卓)交互

一、原生调用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);
    }
    }