一个地址或二维码自动识别设备，并跳转到各自相应的下载地址，兼容微信
程序员文章站
2022-07-07 20:26:56
如题，以前都是给客户提供安卓和iOS两个二维码，实在觉得麻烦，就是一劳永逸了一下。不会传附件，需要相关素材的可以私我。 ......
如题，以前都是给客户提供安卓和iOS两个二维码，实在觉得麻烦，就是一劳永逸了一下。不会传附件，需要相关素材的可以私我。
1 <html>
2 <head>
3 <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui">
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>下载 Space X APP</title>
6 <script language="javascript" type="text/javascript">
7 window.onload = function(){
8 //下载地址，下面三个编写需根据需求修改
9 var androidurl = "http://192.168.18.83:8080/testweb/abc.apk";
10 var iosurl = "https://itunes.apple.com/cn/app/id1165700634?mt=8";
11 var appname = "点击下载"+"Space X";
12
13 //设置下载地址到下载链接
14 document.getElementById('appname').innerHTML = appname;
15 document.getElementById('admanual').href = androidurl;
16 document.getElementById('iosmanual').href = iosurl;
17 //判断浏览器
18 var u = navigator.userAgent.toLowerCase();//获取判断用的对象，不区分大小写
19 var uA = navigator.userAgent;//获取判断用的对象，区分大小写
20 var isandroid = uA.indexOf('Android') > -1 || uA.indexOf('Adr') > -1; //android终端
21 var isios = !!uA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
22 if(isios){//iOS系统
23 window.location.href = iosurl;
24 }else if(isandroid){//安卓系统
25 if(u.match(/MicroMessenger/i)=="micromessenger"){
26 //如果是微信，安卓则提示在浏览器中打开
27 document.getElementById('downloadmsg').innerHTML='请点击右上角图标，在浏览器中打开。';
28 document.getElementById('downloadmsg').style.cssText="font-size: 1.4rem; text-align: right;;display: block;";
29 //显示箭头
30 document.getElementById('weixinjiantou').innerHTML='<img src="箭头@2x.png" width="40"/>';
31 document.getElementById('weixinjiantou').style.cssText="font-size: 1.4rem; text-align: right;;display: block; padding-right:5%;";
32 }else{
33 //如果不是微信，安卓跳转下载
34 window.location.href = androidurl;
35 }
36 }else{//不是手机?
37 document.getElementById('downloadmsg').innerHTML = "请手机浏览器中打开进行下载。";
38 document.getElementById('downloadmsg').style.cssText="font-size: 1.4rem; text-align: center;display: block;padding-top: 10%";
39 document.getElementById('apppic').style.cssText="background-repeat: no-repeat; background-size:414px 736px;background-position:center";
40 document.getElementById('maintable').style.cssText="margin-top:5%";
41 }
42 }
43 </script>
44 </head>
45 <body id="apppic" background="背景.png" style="background-size:100% 100%;">
46 <span id="weixinjiantou"></span>
47 <span id="downloadmsg"></span>
48
49 <table id="maintable" align="center" style="margin-top: 20% ">
50 <tr>
51 <td style="text-align: center;">
52 <span id="appname" style="font-size: 1.4rem;"></span>
53 </td>
54 </tr>
55 <tr>
56 <td style="text-align: center;">
57 <a href="#" id="iosmanual" target="_blank"><img src="iOS按钮@2x.png" style="width: 70%;"></img></a>
58 </td>
59 </tr>
60 <tr>
61 <td style="text-align: center;margin-top: 10px; ">
62 <a href="#" id="admanual" target="_blank"><img src="Android按钮@2x.png" style="width: 70%;"></img></a>
63 </td>
64 </tr>
65 </table>
66 </body>
67 </html>
上一篇： html的初了解（更新中···）
下一篇： 后面还要看呢