vue与原生(ios,安卓)交互
September 18, 2021
2941
一、原生调用H5(vue)的方法:
在methods中定义方法
1
2
3
4
5
6//判断app是否安装成功 (Android触发)1->完成 2->未完成
appIsInstall(packageName, status) {
if (parseInt(status) === 1) {
this.sendTaskStatus(104);
}
}将要给原生调用的方法挂载到 window 上面
1
window.appIsInstall = this.appIsInstall;
注意:要注意这里写法是this.appIsInstall指向window,this.appIsInstall()这样就是直接调动了
原生安卓或者ios会在window上读取appIsInstall这个约定的方法名,传参调用
二、h5调用原生
js注入(第一种方式)
1
2
3
4
5
6
7
8
9
10const { isAndroid } = this.judgeSystem(); //判断系统
if (isAndroid) {
//安卓端--PggH5Js--需要是约定的字段
window.PggH5Js.lookAdsForGuaZi(extraAdTask);
} else {
//ios端
window.webkit.messageHandlers.lookAdsForGuaZi.postMessage({
extraAdTask
});
}url拦截(第二种方式,ios跟安卓一样)
1
2
3
4// 跳转到指定视频
export function toVideoView(videoId: string) {
window.location.href = `${NativeAPI.TO_VIDEO_VIEW}?videoId=${videoId}`;
}判断系统
1
2
3
4
5
6static 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里面带参,原生会去拦截这个请求,获取到数据
三、总结
一般用的最多的就是: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);
}
}
- 本文作者:wowangmouren
- 本文链接:https://wangwewntao.top/2021/09/18/wmr_04/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!