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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
js实现上下左右键盘控制div移动
Jan 16 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
python处理csv数据的方法
2015/03/11 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python类的继承用法示例
2019/01/31 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
请假条的格式
2014/04/11 职场文书
保险专业求职信
2014/07/07 职场文书
农业生产宣传标语
2014/10/08 职场文书
医院见习报告范文
2014/11/03 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
Redis数据同步之redis shake的实现方法
2022/04/21 Redis