手机app下载页根据不同设备选择下载渠道

手机app下载页

手机APP开发已经很热门了，下面这段JS主要用于APP下载页面的构建，根据用户不同的设备类型自动选择不同的下载渠道。

JavaScript源码：

  1. /*
  2.       * 判断手机浏览器内核并跳转不同的下载渠道
  3.       */
  4. var browser = {
  5.     versions: function () {
  6.         var u = navigator.userAgent, app = navigator.appVersion;
  7.         return {//移动终端浏览器版本信息
  8.             trident: u.indexOf('Trident') > -1, //IE内核
  9.             presto: u.indexOf('Presto') > -1, //opera内核
  10.             webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  11.             gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
  12.             mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
  13.             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
  14.             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
  15.             iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
  16.             iPad: u.indexOf('iPad') > -1, //是否iPad
  17.             webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
  18.         };
  19.     }(),
  20.     language: (navigator.browserLanguage || navigator.language).toLowerCase()
  21. }
  22. ///获取URL参数 
  23. function getUrlParam(name) {
  24.     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  25.     var r = window.location.search.substr(1).match(reg);  //匹配目标参数
  26.     if (r != null) return unescape(r[2]); return null; //返回参数值
  27. }
  28.    function isWeiXin() {
  29.             var ua = window.navigator.userAgent.toLowerCase();
  30.             if (ua.match(/MicroMessenger/i) == 'micromessenger') {
  31.                 return true;
  32.             } else {
  33.                 return false;
  34.             }
  35.         }
  36. //去下载页
  37. function gotodown_user() {
  38.     var androidDown = "APK源文件链接";
  39.     var iosDown = "苹果应用商店链接";
  40.     var wxdown="应用宝微链接";
  41.     var downurl=androidDown;
  42.      if (isWeiXin()) {
  43.                 var p = document.getElementById("wechat")
  44.                 var u = window.navigator.userAgent;
  45.                  downurl=wxdown;
  46.             }
  47.             else{
  48.     //如果为安卓手机
  49.     if (browser.versions.mobile && browser.versions.android) {
  50.        downurl=androidDown;
  51.     }
  52.       if (browser.versions.mobile && browser.versions.ios) {
  53.        downurl=iosDown;
  54.     }
  55.       if (browser.versions.mobile && browser.versions.iPhone) {
  56.        downurl=iosDown;
  57.     }
  58.      if (browser.versions.mobile && browser.versions.iPad) {
  59.        downurl=iosDown;
  60.     }
  62.     }
  63.     window.location.href = downurl;
  64. }
  65. function gotomobilePage() {
  67.       if (isWeiXin()) {
  68.               window.location.href = "跳转网页";
  69.             }
  70.      if (browser.versions.mobile && browser.versions.android) {
  71.       window.location.href = "跳转网页";
  72.     }
  73.     if (browser.versions.mobile && browser.versions.ios)
  74.     {  window.location.href = "跳转网页";
  75.     }
  76. }
  77. //去下载页
  78. function gotodown_driver() {
  80.     var androidDown = "APK源文件链接";
  81.     var iosDown = "苹果应用商店链接";
  82.     var wxdown="应用宝微链接";
  83.     var downurl=androidDown;
  84.      if (isWeiXin()) {
  86.                 var u = window.navigator.userAgent;
  87.                 downurl=wxdown;
  89.             }
  90.             else{
  92.     //如果为安卓手机
  93.     if (browser.versions.mobile && browser.versions.android) {
  94.        downurl=androidDown;
  95.     }
  96.      if (browser.versions.mobile && browser.versions.ios) {
  97.        downurl=iosDown;
  98.     }
  99.       if (browser.versions.mobile && browser.versions.iPhone) {
  100.        downurl=iosDown;
  101.     }
  102.      if (browser.versions.mobile && browser.versions.iPad) {
  103.        downurl=iosDown;
  104.     }
  107.     }
  108.     window.location.href = downurl;
  109. }

至于HTML部分就更简单了，大家可以自己去写，波波提供一个简洁版的HTML部分源码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>XX客户端下载</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. <link type="text/css" rel="stylesheet" href="css/style.css" />
  8. <script src="js/mobile.js"></script>
  9. </head>
  11. <body onload="gotodown_user()">
  12. <div id="wechat">
  13.     <div class="download">
  14.         <div class="logo">
  15.             <img src="images/logo.png">
  17.         </div>
  18.         <a class="button" onclick="gotodown_user()">
  19.             <strong>立即下载</strong>
  20.             <span>Android(安卓版)</span>
  21.         </a>
  22.         <a class="button" href="苹果商店链接";>
  23.             <strong>立即下载</strong>
  24.             <span>IOS(苹果版)</span>
  25.         </a>
  26.         <div class="tel">
  27.             免费咨询电话<br>XXXX-XXXXXXXXX
  28.         </div>
  29.     </div>
  30. </div>
  31. </body>
  32. </html>

上述分享主要在于JS部分对应的三个下载渠道，在微信中不用跳转外部即可实现安卓和IOS版本下载，如果是浏览器的话，安卓版自动下载，IOS版自动跳转到苹果应用商店。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！