iOS和Android使用同一个二维码自动跳转不同下载页面链接（附生成二维码地址方法）

一、使用场景

开发了一款App，包括iOS及Android版，到了推广阶段，准备生成二维码让用户扫码下载，那这个二维码该怎么生成？iOS及Andorid各自生成一个二维码让用户区分下载？当然这种方式是可行的，但却增加了用户的使用成本！那是不是有一种方式可以通过一个二维码使手机自动下载相应App包？

本文主要讲的就是如何在没有个人/公司网站的情况下，利用同一个二维码自动识别手机系统（Android/iOS）跳转不同的下载页面。

测试地址：https://xiaze.github.io/autodownload/index.html

二、解决方案

我们可以编写一个html网页，通过js识别当前终端属性，根据相应终端属性重定向到相应下载界面。然后将该html网页上传至网站，生成该网页链接的二维码图片，用户扫描二维码会自动进入对应下载界面。

三、代码部分：index.html

<!DOCTYPE HTML>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>简听 - 随时随地，想听就听</title><script type="text/javascript">// 获取终端的相关信息var Terminal = {// 辨别移动终端类型platform : function(){var u = navigator.userAgent, app = navigator.appVersion;return {// android终端或者uc浏览器android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,// 是否为iPhone或者QQHD浏览器iPhone: u.indexOf('iPhone') > -1 ,// 是否iPadiPad: u.indexOf('iPad') > -1};}(),// 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...language : (navigator.browserLanguage || navigator.language).toLowerCase()}// 根据不同的终端，跳转到不同的地址var theUrl = 'https://itunes.apple.com/app/id1299542018';if(Terminal.platform.android){//安卓端document.write('抱歉，“简听 - 随时随地，想听就听”暂时没有安卓版APP!');//theUrl = 'https://itunes.apple.com/app/id1299542018';//location.href = theUrl;} else {if(Terminal.platform.iPhone){//iPhone端theUrl = 'https://itunes.apple.com/app/id1299542018';}else if(Terminal.platform.iPad){//iPad端// 还可以通过language，区分开多国语言版switch(Terminal.language){case 'en-us'://iPad英文版APP Store地址theUrl = 'https://itunes.apple.com/app/id1299542018';break;case 'ko-kr'://iPad韩语版APP Store地址theUrl = 'https://itunes.apple.com/app/id1299542018';break;case 'ja-jp'://iPad日文版APP Store地址theUrl = 'https://itunes.apple.com/app/id1299542018';break;default://iPad默认APP Store地址theUrl = 'https://itunes.apple.com/app/id1299542018';}}location.href = theUrl;}</script>
</head>
<body><!---->
</body>
</html>

在使用的时候将相应链接替换即可

四、制作二维码

本人推荐两个制作二维码的网址

草料二维码：http://cli.im
联图网：http://www.liantu.com

Snip20180505_4.png

如果没有个人/公司网站可以上传上述html网页文件，请继续浏览以下内容；如果已经有了相应网站，那么你可以直接制作相应二维码了。

五、将网页文件上传至github，配置相关选项实现网页自动跳转

注册一个github账号：https://github.com
创建一个工程

Snip20170804_1.png
填写相关工程信息创建工程

Snip20170804_2.png
进入工程页面复制工程的git链接

Snip20170804_3.png
利用git工具（本例使用Mac系统下的Tower）clone工程

Snip20170804_4.png
进入本地工程文件夹可以看到工程已经被clone下来了，不过目前只有一个初始的说明文件

Snip20170804_7.png
将之前建好的html文件导入本地工程文件夹

Snip20170804_8.png
进入Tower填写相关信息并提交文件到github库中

Snip20170804_9.png

Snip20170804_10.png
刷新github工程网页可以看到文件已经提交成功

Snip20170804_11.png
点击Settings进入工程设置页面

Snip20170804_12.png
滚动到GitHub Pages项

Snip20170804_13.png
选择分支并保存

Snip20170804_14.png
保存完后可以看到工程对应的网址链接

Snip20170804_16.png
直接在该链接后拼接之前创建的html文件即可生成最终链接，用最终链接生成的二维码就可实现自动跳转的功能了。欢迎大家通过图中二维码下载简听App哦，不过目前只有iOS版。(简听 - 懒人听网页听小说的神器)

Snip20180505_4.png

根据代码部分逻辑：用iOS设备扫图中二维码会跳转 AppStore 简听页面，用安卓设备扫则会在页面上提示暂时没有安卓版App，用其他设备扫也会跳转AppStore页面。

本文测试地址：https://xiaze.github.io/autodownload/index.html

本文demo地址：https://github.com/xiaze/autodownload

iOS和Android使用同一个二维码自动跳转不同下载页面链接（附生成二维码地址方法）相关推荐

一码多用:扫描一个二维码自动跳转支付宝/微信小程序、安卓/iosAPP
随着支付宝,微信小程序的慢慢崛起,现在很多公司同一款程序都开发了四个版本.支付宝/微信小程序.安卓/iosAPP.但是随着程序的增加,引导用户使用就成了问题.比如,一家店门口如何贴一张二维码.实现用户 ...
链接如何生成二维码？怎样创建一个网址二维码？
现在很多小伙伴都发现,可以通过扫描二维码跳转到对应的链接页面,比如商品详情页.问卷调查.线上工具.网页推广等等多种类型内容.那么这些链接转二维码是如何操作的呢?下面来给大家分享一下使用二维码在线生成器 ...
前端页面中根据链接随机生成二维码
前端页面中根据链接随机生成二维码 1.需要安装qrcodejs2 npm install qrcodejs2 -save 2.在所需要的页面中引入 import QRCode from 'qrcode ...
链接怎么生成二维码？教你学会制作二维码
链接怎么生成二维码?现如今二维码的应用十分广泛,我们几乎每天都会接触到二维码.二维码蕴含着丰富的信息,通过扫描二维码,我们可以获取很多信息.那么大家会制作二维码吗?其实制作二维码并非是什么难事,这里小 ...
如何实现扫描二维码自动跳转到网页
二维码在我们的生活中随处可见,比如扫码付款,扫描进入小程序,扫码关注等等.二维码可以存储各种信息,主要包括网址.名片.文本信息.特定代码等.今天就以QR code二维码为例,教大家使用条码软件生成二维 ...
Java实现将文本内容、网址链接url,生成二维码与反解析
2019独角兽企业重金招聘Python工程师标准>>> Java实现将文本内容.网址链接url,生成二维码与反解析 QR码的"QR"是Quick Response ...
聚合支付二维码如何实现自动识别扫码客户端跳转相应支付页面
前言前面有一篇<聚合支付之流程概述>和大家聊了一下关于聚合支付的一个简单流程.很多小伙伴私信我,如何实现聚合支付码的自动跳转呢? 其实,刚开始接触的时候我也很迷茫,一个静态的二维码 ...
在web页面上快速生成二维码的三种实用方法
转载自:在web页面上快速生成二维码的三种实用方法二维码是桌面和移动端快速分享的高效手段之一,这里介绍两个不错的快速开发二维码的方法,和大家分享一下~~ 方法1:使用极客标签提供的二维码快速生成服务 ...
帝国CMS虚拟商城源码自动发货网盘下载俄罗斯源码博客风格
帝国CMS虚拟商城源码自动发货网盘下载俄罗斯源码博客风格支持游客下单,无需登录,发货为网盘下载形式系统版本:帝国CMS7.5 UTF-8 服务器:win/linux 语言:PHP 数据库:MYSQ ...