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 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
angular 服务随记小结
May 06 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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
PHP中for与foreach的区别分析
2011/03/09 PHP
php的sso单点登录实现方法
2015/01/08 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python 内置函数complex详解
2016/10/23 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
python列表推导式入门学习解析
2019/12/02 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
什么时候用assert
2015/05/08 面试题
小学标准化建设汇报材料
2014/08/16 职场文书
2014年医生工作总结
2014/11/21 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
行政复议决定书
2015/06/24 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python