最近在项目中遇到一个需求：
从app内部分享出去的网页顶部有一个“打开”按钮，用户点击后：
1、若用户客户端安装我们的app，直接跳转到我们的app;
2、若用户没有安装，跳转到应用宝提示用户下载；
我们需要知道的是：
- 我们并不能通过浏览器来判断用户手机是否安装某个app；
- 但是我们可以通过JS设置一个定时器试着唤醒手机端的某个app的本地协议（url scheme）如果能解析这个协议那么就能直接打开app，如果唤醒超时则跳转到应用宝下载页；
- 微信内置浏览器已禁止使用外部url scheme直接跳转至其他app；
让我们简单了解一下什么是url scheme？
url scheme：
1、简单来说就是一个让app相互之间跳转的协议。
2、每一个app的url scheme是不一样的，例如微信的scheme协议：weixin://。
3、如果两个app拥有相同的url scheme，那么后安装的app会把之前安装的app的url scheme覆盖掉；
4、一般url scheme是有服务端的同事提供，我们只要复制上去就可以了；
5、我们的app需要使用支付宝的三方支付功能、app需要使用微信分享好的文章，那么此时就可以通过URL Scheme来传递这些数据到支付宝app或者微信app系统会通过这些app的url scheme来调起这些app，完成你所需要做的跨app的功能
参考代码（开头提到的需求）：
思路：
- 我们需要考虑微信端和非微信端的调起情况；
- 可以新建一个iframe，iframe的src指向app的scheme协议，然后把iframe操作在DOM上。
(可以网上自行查找常用的url scheme进行demo)
var app_links = "应用宝跳转链接（同事提供）",
url_scheme = "app的url scheme协议（同事提供）",
// app link
function deeplink() {
if (/MicroMessenger/i.test(navigator.userAgent)) {
window.location.href = app_links;
} else {
window.location.href = url_scheme;
var ifr = document.createElement("iframe");
ifr.src = url_scheme;
ifr.style.display = "none"
document.body.appendChild(ifr);
window.setTimeout(function () {
document.body.removeChild(ifr);
if (!document.hidden) {
window.location.href = app_links;
}
}, 2000)
}
}
//调用方法
//js调用
//var open_btn = //document.getElementById("open_btn");
//open_btn.onclick = function () {
// deeplink();
// };
//jQuery调用
$(document).ready(function () {
$('#open-btn').on('click', function () {
deeplink();
});
})
补充需求：
有些项目还需要给分享之后的链接拼接一个动态的time时间戳：
- 可先获取当前的时间戳
var time = new Date().getTime(); - 然后拼接到app协议的后边：如：
var app_links = "应用宝跳转链接（同事提供）"+'&time='+time;
项目踩坑记录，会不断完善，如果有错误的地方，可以指出，共同进步。
网友评论