第一次接触的小伙伴来说,确实不能很快理解,只有自主写出来之后,有一种“不过如此”的感觉
废话少说,上代码
重点写在前面 在调用各端的方法时,方法名一定要一致
比如移动端调用H5方法,H5挂载在window上的方法名要与移动端请求的方法名一致
H5调移动端也一样
参考
const u = navigator.userAgent;
const ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
const iPad = u.indexOf(‘iPad’) > -1;
const iPhone = u.indexOf(‘iPhone’) > -1 || u.indexOf(‘Mac’) > -1;
const android = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1;
if (ios || iPad || iPhone) {
// 写与iOS交互的代码
}
else if (android) {
// 写与安卓交互的代码
}
移动端调H5方法 H5该如何写
首先在methods中写方法,然后挂载在window上
onLoad{
const u = navigator.userAgent;
const ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
const iPad = u.indexOf(‘iPad’) > -1;
const iPhone = u.indexOf(‘iPhone’) > -1 || u.indexOf(‘Mac’) > -1;
const android = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1;
if (ios || iPad || iPhone) {
// 写与iOS交互的代码
window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
window.mobileMuteBgMusic = this.mobileMuteBgMusic;
}
else if (android) {
// 写与安卓交互的代码
window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
window.mobileMuteBgMusic = this.mobileMuteBgMusic;
}
}
methods: {
//移动端无返回参数的情况 (这是移动端app放入后台后,背景音乐还会播放,通过调这个方法来暂停,可以看我上一个文章)
mobileMuteBgMusic() {
this.muteBgMusic = true;
},
//移动端返回参数的情况
mobilePatriarchActDetails(parmas) {
//parmas就是移动端调H5后 返回给我的数据
//要在这里进行数据处理 比如存到vuex 或 数据当作请求参数给后端时,要在这里拿到数据后就调用请求后端的方法
console.log(parmas)
},
}
H5调用移动端
由于安卓是把方法写在actDetailsInterface 这个类中,所以我直接接收这个类,也就是对象
ios则是需要单独写,单个挂载传递给我,为了统一性,接收ios方法时,我也写在了Mobilemethods里面
onLoad{
const u = navigator.userAgent;
const ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
const iPad = u.indexOf(‘iPad’) > -1;
const iPhone = u.indexOf(‘iPhone’) > -1 || u.indexOf(‘Mac’) > -1;
const android = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1;
if (ios || iPad || iPhone) {
// 写与iOS交互的代码
window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
window.mobileMuteBgMusic = this.mobileMuteBgMusic;
// 接收ios方法
this.Mobilemethods = {
backActivity: () => {
//如果ios端不需要参数,但也需要传参,可以为null,或者协商好后随便传一个,否则会报错
window.webkit.messageHandlers.backActivity.postMessage(null);
},
observe: id => {
window.webkit.messageHandlers.observe.postMessage(id);
},
};
}
else if (android) {
// 写与安卓交互的代码
window.mobilePatriarchActDetails = this.mobilePatriarchActDetails;
window.mobileMuteBgMusic = this.mobileMuteBgMusic;
// 接收安卓方法
this.Mobilemethods = window.actDetailsInterface;
}
}
methods: {
//移动端无返回参数的情况 (这是移动端app放入后台后,背景音乐还会播放,通过调这个方法来暂停,可以看我上一个文章)
mobileMuteBgMusic() {
this.muteBgMusic = true;
},
//移动端返回参数的情况
mobilePatriarchActDetails(parmas) {
//parmas就是移动端调H5后 返回给我的数据
//要在这里进行数据处理 比如存到vuex 或 数据当作请求参数给后端时,要在这里拿到数据后就调用请求后端的方法
console.log(parmas)
},
//使用移动端方法
goBack() {
let goBackActivity = this.Mobilemethods.backActivity();
goBackActivity();
},
toObs(id) {
let goObserve = this.Mobilemethods.observe(id);
goObserve(id);
},
————————————————
版权声明:本文为CSDN博主「huheiha」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_61639310/article/details/125525306