【无标题】

第一次接触的小伙伴来说，确实不能很快理解，只有自主写出来之后，有一种“不过如此”的感觉

废话少说，上代码

重点写在前面 在调用各端的方法时，方法名一定要一致
比如移动端调用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