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 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 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生成随机密码类分享
2014/06/25 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python数据归一化及三种方法详解
2019/08/06 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
文员个人的求职信范文
2013/09/26 职场文书
平面设计岗位职责
2013/12/14 职场文书
学校卫生检查制度
2014/02/03 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
mysql 索引合并的使用
2021/08/30 MySQL