JS实现下载呼出相应的链接(Android、iOS)

JS实现下载呼出相应的链接(Android、iOS)

PS.从网上找到的方法，走通了顺便记录一下，免得自己以后要用时找不到。

1、先判断是不是内置浏览器（比如微信、QQ、支付宝这些）

function is_neizhi() {
			var ua = navigator.userAgent.toLowerCase();
			// var browserName = "unknow";
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				return "weixin";
			} else if (ua.match(/QQ/i) == "qq") {
				return "QQ";
			} else if (ua.match(/Alipay/i) == "alipay" && payway == 2) {
				return "alipay";
			}

		}

2、判断机型

function verifyBrand() {
			const userAgent = navigator.userAgent.toLowerCase()
			const isIphone = userAgent.match(/(iphone|ipad|ipod)/i);
			const isHuawei = userAgent.match(/huawei/i);
			const isHonor = userAgent.match(/honor/i);
			const isOppo = userAgent.match(/oppo/i);
			const isOppoR15 = userAgent.match(/PACM00/i);
			const isVivo = userAgent.match(/vivo/i);
			const isXiaomi = userAgent.match(/mi\s/i);
			const isXIAOMI = userAgent.match(/xiaomi/i);
			const isXiaomi2s = userAgent.match(/mix\s/i);
			const isRedmi = userAgent.match(/redmi/i);

			if (isIphone) {
				return 'iphone'
			} else if (isHuawei || isHonor) {
				return 'huawei';
			} else if (isOppo || isOppoR15) {
				return 'oppo';
			} else if (isVivo) {
				return 'vivo';
			} else if (isXiaomi || isRedmi || isXiaomi2s || isXIAOMI) {
				return 'xiaomi';
			} else {
				return 'other';
			}
		}

3、相对应的下载

function goDownload() {
			if (is_neizhi()) {
				//针对内置浏览器写对应的方法，此处写了让用户去浏览器打开进行下载，效果如下图
				//这句js是说针对id为fullScreenId的状态改为可见的（原本可以设置为不可见的）
				document.getElementById('fullScreenId').style.visibility = 'visible';
				return;
			}

			const iosLinkUrl = "iOS链接";
			const androidLinkurl = "Android链接";
			const huaweiUrl = 'appmarket://details?id=包名';
			const oppoUrl = "oppomarket://details?packagename=包名";
			const vivoUrl = "vivomarket://details?id=包名";
			const xiaomiUrl = 'mimarket://details?id=包名';
			//小米这两个都可以，其他的暂时没找到
			//const xiaomiUrl = 'https://app.mi.com/details?id=包名';
			switch (this.verifyBrand()) {
				case 'iphone':
					window.location.href = iosLinkUrl;
					break;
				case 'xiaomi':
					window.location.href = xiaomiUrl;
					break;
				case 'huawei':
					window.location.href = huaweiUr;
					break;
				case 'vivo':
					window.location.href = vivoUrl;
					break;
				case 'oppo':
					window.location.href = oppoUrl;
					break;
				default:
					window.location.href = androidLinkurl;
					break;
			}
		}

效果图：

设置初始状态为不可见的div:

<div id="fullScreenId" class='fullScreen' style="visibility: hidden;">
	<img class="yindao" src="路径" alt="">
</div>

此处用了点小技巧，用了张图片放上去做引导。（因为自己写的话不会）