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 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python爬取网易云音乐评论
2018/11/16 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
Java中实现多态的机制是什么?
2014/12/07 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
人事部岗位职责范本
2014/03/05 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
怎样写辞职信
2015/02/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Python中的程序流程控制语句
2022/02/24 Python
2022年四月新番
2022/03/15 日漫