Varios métodos de interacción comunes para el desarrollo híbrido de aplicaciones integradas H5

Método 1: utilice el método UA convencional.

1. Determina si es Android o ios

var u = navigator.userAgent;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios

2. Pase parámetros al cliente (Android, ios) y llame a su método.

if (isAndroid) {
    
    
    window.android.客户端方法名(JSON.stringify({
    
     // 给安卓传参
       planId: scoped.tasks[index].planId,
       type: 'video',
   }));
} else {
    
    
    window.webkit.messageHandlers.客户端方法名.postMessage({
    
     // 给ios 传参
       planId: scoped.tasks[index].planId,
       type: 'video',
    }); 
} 

3. El cliente llama al método H5 y pasa parámetros.

let _this = this
// 获取客户端的传参,通过方法获取客户端传递的token等信息;
// 将setTokenToJs方法名暴露在windows下,客户端给调用setTokenToJs方法并传参
window["setTokenToJs"] = result => {
    
    
	_this.getUserInfo(result);
};

Método 2: usar jsBridge.

1. Encapsule un archivo jsbridge.js.
Debe comunicarse con el cliente sobre ciertos campos en ua para determinar si es Android o ios.

//App ios终端
let bridge = {
    
    
	isIosApp() {
    
    
	   	let isiOS = navigator.userAgent.indexOf('iOS_xxxx') > -1;
	   	return isiOS
	},
	//App Android终端
	isAndroidApp() {
    
    
		let isAndroid = navigator.userAgent.indexOf('android_xxx') > -1;
		return isAndroid
	}
}
export default bridge

2. Llame a jsbridge para realizar la interacción.

import jsbridge from "@/utils/jsbridge/jsbridge.js";
if (jsbridge.isAndroidApp()) {
    
    // 安卓
	window.appBridge.客户端方法名(JSON.stringify(data))
} else if (jsbridge.isIosLptApp()) {
    
    // ios
	window.webkit.messageHandlers.客户端方法名.postMessage(JSON.stringify({
    
    }));
} else {
    
    
	return;
}

3. El cliente llama al método H5 y pasa parámetros.

let _this = this
// 获取客户端的传参,通过方法获取客户端传递的token等信息;
// 将setTokenToJs方法名暴露在windows下,客户端给调用setTokenToJs方法并传参
window["setTokenToJs"] = result => {
    
    
	_this.getUserInfo(result);
};

Supongo que te gusta

Origin blog.csdn.net/weixin_44684357/article/details/132213241
Recomendado
Clasificación