二维码的扩展

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

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，并且支持多端。

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

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

// 应用Afunction jumpA(){navigation('','','');}// 应用Bfunction jumpB(){navigation('','','');}// 应用Cfunction jumpC(){navigation('','','');}// 应用Dfunction 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;    };}