iOS和Android用同一个二维码实现跳转下载链接的方法


Posted in Javascript onSeptember 28, 2016

前言

最近一个项目需要iOS和安卓使用一个二维码,让扫描的机器自己识别操作系统实现跳转到相应的下载链接。比如iPhone用微信进行扫描就让他跳转appStore的下载页面,安卓机器使用微信扫描就直接跳浏览器下载。但是这二维码还有一个需求就是,用户已经下载了这个app,当用户打开app进入到注册页面时,再次扫描这个二维码时,自动填写邀请码进行注册。那么该如何实现,细节就不说了,直接上代码。

使用js实现,其实代码非常简单.

使用时直接拷贝代码,改掉相应的链接就好。

PS:该链接在微信环境打开时还是需要手动跳转到手机的浏览器才能跳到下载页面,因为微信内的webView比较特别,所以写了一个alert引导用户打开浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <script>

  /**
    出来的链接大概是长这样的
    http://xxxx.cn/243423.html?c=Q23DR32
  */

  // c=Q23DR32是注册时扫描获取的邀请码。
  // 这样加参数,后面的参数会被自动忽略,不会影响加载此网页

    goDownload();

    // 去下载
    function goDownload() {
      var u = navigator.userAgent, app = navigator.appVersion;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      // 是安卓浏览器
      if (isAndroid) {
        window.location.href = 'http://xxxxxxx.cn/release/xxxx-release.apk'; // 跳安卓端下载地址
      }
      // 是iOS浏览器
      if (isIOS) {
        window.location.href = 'https://itunes.apple.com/cn/app/xxxxxxx/id1124348115?mt=8'; // 跳AppStore下载地址
      }

      // 是微信内部webView
      if (is_weixn()) {
        alert("请点击右上角按钮, 点击使用浏览器打开");
      }

      // 是PC端
      if (IsPC()) {
        window.location.href = 'http://www.xxxxxxx.cn/index.html'; // 公司主页
      }
    }

    // 是微信浏览器
    function is_weixn(){
      var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
      } else {
        return false;
      }
    }


    function IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }

  </script>
</body>
</html>

总结

以上就是iOS和Android用同一个二维码实现跳转下载链接的方法,大家都学会了吗,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有更好的解决方案或可以通过代码判断微信客户端的系统环境的方法请留言交流。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
js统计页面上每个标签的数量实例代码
May 29 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
微信小程序 实例应用(记账)详解
Sep 28 #Javascript
JavaScript 闭包详细介绍
Sep 28 #Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 #Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 #Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 #Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 #Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
You might like
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
毕业生求职自荐信怎么写
2014/01/08 职场文书
化学教学随笔感言
2014/02/19 职场文书
应急处置方案
2014/06/16 职场文书
5.12护士节活动总结
2015/02/10 职场文书
死亡诗社观后感
2015/06/05 职场文书
春节慰问简报
2015/07/21 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS