项目总结1：微信扫码自动识别设备类型并跳转到相应的应用下载页面（apk或App Store）之解决方案

问题分析：普通页面一般无法调用微信的扫一扫接口，从而否定通过微信扫一扫功能给我们判断当前扫码的设备类型。

解决方案：通过应用下载页面自身来获取当前访问的客户端设备类型（iPhone、Android、iPad），然后分别跳转到不同的下载链接。

新建一个静态页面，如：download.html;
在download.html中布局，分别设置安卓和iOS的下载按钮指示（避免自动跳转失败时可以让用户手动选择点击下载）；
在页面加载完成的事件ready里面（也可不放ready里）添加如下JS脚本;
把download.html放到后台应用服务器的某个能被外网访问的路径下；
对第四步的访问路径生成一个二维码即可。（生成网址如：草料在线生成二维码）

<script>
  /*浏览器版本信息*/
  var browser = {
    versions: function() {
      var u = navigator.userAgent, app = navigator.appVersion;
      return {//移动终端浏览器版本信息
        trident: u.indexOf('Trident') > -1, // IE
        presto: u.indexOf('Presto') > -1, // opera
        webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐
        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), // 是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, // 是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, // 是否iPad
        webApp: u.indexOf('Safari') == -1 // 是否web应该程序，没有头部与底部
      };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
  }

  if (browser.versions.ios || browser.versions.iPhone) {
    window.location="http://itunes.apple.com/cn/app/id1355618471"; // ios版本的下载地址
    console.log("ios平台");
  }
  else if (browser.versions.android) {
    window.location="http://www.ssme.gov.cn/entsrv_cloud/app_update_info/shqyfwy.apk"; // android版本的下载地址
    console.log("android平台");
  }

</script>

注意事项：

测试时必须在外网环境下，也就是说download.html的存放路径能被外网访问，这样微信扫一扫之后才可能加载出来下载页面。
如果跳转失败，请仔细检查和尝试使用http和https两种不同的协议（有三处：跳转App Store/下载apk/download.html路径）

项目总结1：微信扫码自动识别设备类型并跳转到相应的应用下载页面（apk或App Store）之解决方案

猜你喜欢