Business requirements:

In the early stage, wechat H5 used encapsulated WebViewJavascriptBridge function to conduct data interaction with iOS and Android. However, the data interaction with Android was based on mounting interactive event functions to Windows. So that the Android app can get the event function. Although this approach can achieve the final effect, because the H5 activity page is used in the iOS app, Android app and wechat H5 app, and at the same time, it needs to process different events according to different parameters or UA information, so the code logic is relatively complex, redundant and error-prone. To this end, look for a method that can be common. The method of data interaction between THE ENCAPSULATED JS and APP solves the problem shared by iOS, Android and WeChat, and the code logic structure is clear and convenient for subsequent logic adjustment and optimization.

First, determine the device information:

var u = navigator.userAgent;
/ / Android terminal
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
/ / iOS terminal
varisiOS = !! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/);
var isWeChat = u.match(/MicroMessenger/ig) = ="micromessenger";
/ / or
let ua = navigator.userAgent;
/ / the Android side
let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;
/ / iOS terminal
let isiOS = /iPhone|mac|iPod|iPad/i.test(ua);
/ / WeChat terminals
let isWeChat = !!window.__wxjs_is_wkwebview;
Copy the code

Note: Device information can be obtained through navigator.userAgent, and the environment of the current device can be distinguished as Android, iOS or WeChat according to different parameters of different devices.

Encapsulate common methods for Android and iOS:

function connectWebViewJavascriptBridge(callback) {
	if (isAndroid) {
		if (window.WebViewJavascriptBridge) {
			callback(WebViewJavascriptBridge)
		} else {
			document.addEventListener(
				'WebViewJavascriptBridgeReady'.function() {
					callback(WebViewJavascriptBridge)
				},
				false
			);
		}
		return;
	}
	if (isiOS) {
		if (window.WebViewJavascriptBridge) {
			return callback(WebViewJavascriptBridge);
		}
		if (window.WVJBCallbacks) {
			return window.WVJBCallbacks.push(callback);
		}
		window.WVJBCallbacks = [callback];
		var WVJBIframe = document.createElement('iframe');
		WVJBIframe.style.display = 'none';
		WVJBIframe.src = 'https://__bridge_loaded__';
		document.documentElement.appendChild(WVJBIframe);
		setTimeout(function() {
			document.documentElement.removeChild(WVJBIframe)
		}, 0)}}// Call the registration method
connectWebViewJavascriptBridge(function(bridge) {
	if (isAndroid) {
		bridge.init(function(message, responseCallback) { responseCallback(data); }); }});Copy the code

Event interaction:

// Call the Android and iOS methods and receive the return data callback js methods
window.WebViewJavascriptBridge.callHandler('jsToAppFn', {
	orderInfo: data
}, function(res) {
	window.console.log(res)
});

// Provide js methods for Android and iOS to call
window.WebViewJavascriptBridge.registerHandler('appToJsFn'.function(data, responseCallback) {
	// Data is the data passed by the APP.
	// data The two sides of the data negotiate. If the JSON string is used, the JS side needs to convert the JSON object
	// responseCallback is the data passed to APP after the JS call is completed
	responseCallback({
		key: 'value'
	});
});
Copy the code