JS 与 iOS 和 Android APP 交互

预计阅读时间: 2 分钟

业务需求：

前期在微信 H5 端与 iOS 和 Android 进行数据交互，借助的是封装的**WebViewJavascriptBridge**函数与 iOS 进行数据交互，然而与 Android 的数据交互还是一依据将交互的事件函数挂载到 window 上，以便于 Android 端 app 获取事件函数。虽然这种做法可以实现最终的效果，因为 H5 活动页面在 iOS 端 app、Android 端 app 以及微信端 H5 三端使用，与此同时还要依据不同参数或者不同 ua 信息处理不同的事件，相对来说代码逻辑比较复杂、冗余，容易出错，为此就寻找一个可以多端公用的方法。

本次封装的 JS 与 APP 进行数据交互的方法解决了iOS、Android、WeChat三端共用的问题，代码逻辑结构清晰明了、便于后续逻辑的调整和优化。

设备信息判断

设备判断

1var u = navigator.userAgent;
2// Android 终端
3var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
4// iOS 终端
5var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
6var isWeChat = u.match(/MicroMessenger/gi) == "micromessenger";
7// 或者
8let ua = navigator.userAgent;
9// Android 端
10let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;
11// iOS 终端
12let isiOS = /iPhone|mac|iPod|iPad/i.test(ua);
13//WeChat 终端
14let isWeChat = !!window.__wxjs_is_wkwebview;

📱 设备检测

通过 navigator.userAgent获取设备信息，在依据不同设备的不同参数来区分当前设备所处的环境是 Android、iOS 还是 WeChat。

设备共用方法

封装交互方法

1function connectWebViewJavascriptBridge(callback) {
2	if (isAndroid) {
3		if (window.WebViewJavascriptBridge) {
4			callback(WebViewJavascriptBridge);
5		} else {
6			document.addEventListener(
7				"WebViewJavascriptBridgeReady",
8				function () {
9					callback(WebViewJavascriptBridge);
10				},
11				false
12			);
13		}
14		return;
15	}
16	if (isiOS) {
17		if (window.WebViewJavascriptBridge) {
18			return callback(WebViewJavascriptBridge);
19		}
20		if (window.WVJBCallbacks) {
21			return window.WVJBCallbacks.push(callback);
22		}
23		window.WVJBCallbacks = [callback];
24		var WVJBIframe = document.createElement("iframe");
25		WVJBIframe.style.display = "none";
26		WVJBIframe.src = "https://__bridge_loaded__";
27		document.documentElement.appendChild(WVJBIframe);
28		setTimeout(function () {
29			document.documentElement.removeChild(WVJBIframe);
30		}, 0);
31	}
32}
33// 调用注册方法
34connectWebViewJavascriptBridge(function (bridge) {
35	if (isAndroid) {
36		bridge.init(function (message, responseCallback) {
37			responseCallback(data);
38		});
39	}
40});

设备事件交互

交互事件

1// 调用Android和iOS端方法，并接收返回数据回调js方法
2window.WebViewJavascriptBridge.callHandler(
3	"jsToAppFn",
4	{
5		orderInfo: data
6	},
7	function (res) {
8		window.console.log(res);
9	}
10);
11
12// 提供js方法供Android和iOS端调用
13window.WebViewJavascriptBridge.registerHandler("appToJsFn", function (data, responseCallback) {
14	// data 是 APP 传递过来的数据.
15	// data数据两端协商好，若使用JSON字符串，js端需要转换JSON对象
16	// responseCallback 是 JS 调用完毕之后传递给 APP 的数据
17	responseCallback({
18		key: "value"
19	});
20});

#JS 与 iOS 和 Android APP 交互

#业务需求：

#设备信息判断

#设备共用方法

#设备事件交互

JS 与 iOS 和 Android APP 交互

业务需求：

设备信息判断

设备共用方法

设备事件交互