解决React中打开App或者下载App问题
摘要
最近在写H5页面，项目中有个唤醒App的功能，由于没有接触过这类功能，就去学习了一波大佬们的经验。在此分享出来和大家一起学习学习。
内容
一、唤醒方式
经过查找资料，找到了三类较为客观的唤醒方式：
1.URL Schemes
2.Chrome
3.ios UniversalLink / android appLink
二、常用的唤醒媒介
除了需要确定的唤醒方式，还需要搭配唤醒媒介来一起作用，具体的常用的唤醒媒介如下：
1.ifame
2.a 标签(元素)
3.widnow.location
三、常规打开方式：URL Scheme
唤醒打开一个App，最常规的方式就是通过URL Scheme。那scheme是什么呢，它就像是路标一样，它可以让操作者通过scheme这个路标来打开App，对于App的开发处理就不做过多的描述，感兴趣的朋友可以去百度、谷歌搜索。对于前端而言，抛出scheme路标的媒介有三个，其中个人认为比较友好的方式是通过iframe媒介来抛出，对于其他媒介抛出方式感兴趣的朋友可以去探寻一番，接下来直接用代码分享，清晰明了的去使用常规scheme唤醒App方式。
四、代码
1、首先我们需要一个iframe媒介。
2、其次是我们需要一个URL Scheme唤醒方式。
3、最后就是通过设备判断，并打开我们需要的App应用。
为了方便引用这个唤醒APP的方式，我把它封装成了一个通用的downloadApp.js函数组件，重点代码如下：
（1）创建iframe媒介：
// 创建iframe
const createIframe = (function() {
let iframe;
return function() {
if (iframe) {
return iframe;
} else {
iframe = document.createElement('iframe')
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
}
})()
（2）定义url Scheme唤醒方式：
// 定义App的scheme 测试使用淘宝的scheme
const baseScheme = "taobao://";
const createScheme = function(options, isLink) {
let urlScheme = baseScheme;
for(let item in options) {
urlScheme = urlScheme + item + '=' + encodeURIComponent(options[item]) + '&';
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return encodeURIComponent(urlScheme);
}
（3）定义唤醒App函数：（函数中的判断客户端设备类型的函数可以去百度，或者看我上一篇文章：Javascript判断客户端是Android还是IOS,判断浏览器类型）
const openApp = function() {
let localUrl = createScheme();
let openIframe = createIframe();
if (isIos) {
// 判断是否是ios
window.location.href = localUrl;
const loadDateTime = Date.now();
setTimeout(function() {
const timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "下载URL";
}
}, 25);
} else if (isAndroid) {
// 判断是否是安卓
if (isChrome) {
// Chrome浏览器用iframe打不开
window.location.href = localUrl;
} else {
// 抛出scheme
openIframe.src = localUrl;
}
setTimeout(function() {
window.location.href = "下载URL";
}, 500);
} else {
// 给winphone用户准备
openIframe.src = localUrl;
setTimeout(function() {
window.location.href = "下载URL";
}, 500);
}
}
总结
这就实现了唤醒打开App的功能，当然的，唤醒打开需要你有App，如果你没有App，就需要跳过下载链接去下载App了。在代码中不但实现了唤醒打开功能，还加入了下载功能，这样应用起来就更全面，用户体验也更加友好。但是这样的常规方式还是不够完美，就比如ios9.0以上版本唤醒或者下载App时就不会直接的跳转，有时甚至还会有允许的弹窗。存在的问题还需要进一步的去优化，本次就先分享唤醒App应用那么多功能，如果感兴趣可以一起去研究如何更全面、更友好的去优化唤醒功能。这篇文章是在看了很多资料后，提取合并大佬们的经验来分享编写的，如有错误，请指教。最后附上参考的大佬文章地址：参考文章...
