二维码的扩展 - 二维码实现多端跳转和多应用配置

二维码的扩展 - 二维码实现多端跳转和多应用配置

1.应用场景

一个APP
安卓端一个二维码，苹果端一个二维码
如果安卓端要做多应用市场跳转，则需要更多的二维码

最好有一个二维码，安卓设备（手机，pad等）扫码安装安卓应用，苹果设备（iphone，ipad等）扫码指向苹果应用商店的指定应用。
另外，这个二维码最好具有极高的识别率，一次扫码的成功率极高，避免多次扫码的发生。

2.多端跳转的组成图

3.测试用例

点击识别设备

扫码可以进行设备识别

4.设备识别代码

// JavaScript代码
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
  alert('你的设备的IOS'); 
} else if (/(Android)/i.test(navigator.userAgent)) {  
  alert('你的设备是android'); 
} else { 
  alert('你的设备的pc'); 
};

5.二维码扫描后的运行路径

6.制作二维码

1.到APP store点击分享APP。得到APP在APP store的精准链接。这个链接可以直达这个应用。
2.安卓端的APK文件放置在服务器的一个文件夹，可以直接访问并下载，并获取链接。
3.在服务端写一个空白页面，用于设备识别，页面插入如下的JS代码，并获取链接。

// JavaScript代码
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
  window.location.href = '第一步获取到的链接';
} else if (/(Android)/i.test(navigator.userAgent)) {  
  window.location.href = '第二步获取到的链接';
} else { 
  window.location.href = 'APP的官方网站，或者其它';
};

4.把第三步获取的链接进行网址缩短，得到一个短链。
5.把这个短链生成一个二维码，并加上LOGO。

7.多应用模式

一个应用的多端可以用一个二维码来解决，多个应用也可以用一个二维码来解决并支持多端识别。
即：一个二维码，扫描支持多个APP，并且支持多端。

在制作二维码的时候，第三步提到的空白页面可以利用起来，而不仅仅只是做一个跳转支持。

在这里做一个页面，提供点击。
把上面的自动跳转封装成一个函数。

// 应用A
function jumpA(){navigation('','','');}
// 应用B
function jumpB(){navigation('','','');}
// 应用C
function jumpC(){navigation('','','');}
// 应用D
function jumpD(){navigation('','','');}

function navigation(androidURL,IOSURL,pcURL){
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { 
      window.location.href = IOSURL;
    } else if (/(Android)/i.test(navigator.userAgent)) {  
      window.location.href = androidURL;
    } else { 
      window.location.href = pcURL;
    };
}