H5 内嵌 App 混合开发几种常见的交互方式

方式一：使用常规UA的方式。

1，判断是安卓端还是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，给客户端(安卓，ios)传参，并调用其方法

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，客户端调用H5的方法，并传参

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

方式二：使用 jsBridge的方式。

1，封装一个 jsbridge.js 的文件
需要和客户端沟通好ua中某些字段，用来判断是否是安卓还是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，调用 jsbridge 实现交互

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，客户端调用H5的方法，并传参

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