最近做活动，需要用到在H5中打开/下载APP，PC端扫码下载APP相关业务，看似很小的一个功能，却蕴藏很大玄机。主要的难点在于在微信中唤醒APP，参考了很多产品的实现方式，对唱吧、今日头条、SegmentFault等平台颇为满意。最终我们团队，也实现了想要的功能。
功能描述
①Android端 微信中，依托应用宝实现打开、下载逻辑；
浏览器中，本地没有APP，跳到指定下载页，有APP可以唤醒APP并打开指定活动页。
②IOS端 微信中，本地没有APP，依托应用宝进行下载，本地有APP，则可以在微信中唤醒APP，并且在APP中打开该活动页。
浏览器中，本地没有APP，跳iTunes下载，有APP，唤醒。
一、方案流程
| 端 | 难度 | 使用技术 | 能否跳转到指定页面 |
|---|---|---|---|
| Android/微信 | 简单 | 应用宝链接 | 否 |
| Android/浏览器 | 简单 | Schema | 是 |
| Ios/微信 | 复杂 | Universal Links | 是 |
| Ios/浏览器 | 复杂 | Universal Links | 是 |
二、针对以上方案ios端的配置工作：
1、需要一台https服务器，且在微信端进行过安全认证，否则在安卓微信端容易导致页面跳转失败!!!目前使用的shui5的服务器在微信端没经过认证，所以实现逻辑不太一样
①apple-app-site-association文件
注意这个文件必须没有后缀名,文件名必须为apple-app-site-association!!!，请放置在https服务器的根目录，eg:(https://171edu.com/apple-app-site-association);
②将download.html页面也放在之前的https服务器下 eg:(https://171edu.com/download.html)
{
"applinks": {
"apps": [],
"details": [
{
"appID": "add your id",
"paths": [ "*" ]
},
{
"appID": "add your id",
"paths": [ "*" ]
}
]
}
}
③之前的服务器(https://171edu.com) 要在ios的app中进行备案，当app拦截到这个domain时，会查看本地是否有app，如果有打开，并根据url后面的传参，打开相应的活动页面，如果本地没有app，则跳转至download页面，进行逻辑判断。
2、打开app在ios端的实现逻辑
iOS/微信
界面流程: 1. 扫描打开H5页面->点击打开应用按钮->打开一张不同域的网页，如存在则打开App/如不存在则打开App Store
实现流程: 1. 点击按钮 - >判断为微信/ios ->重定向到不同域的网页
iOS/浏览器
界面流程: 1. 打开H5页面->点击打开应用按钮->打开一张不同域的网页，如存在则打开App/如不存在则打开App Store
实现流程: 1. 点击按钮 - >判断为微信/ios ->重定向到不同域的网页
Itunes下载地址：https://itunes.apple.com/cn/app/id1127148565
三、Android实现
Android/微信
界面流程：1.打开H5页面->点击打开应用按钮->载入应用宝链接(移动团队提供)->逻辑交由应用宝管理
实现流程: 1.点击按钮->判断是微信端/android->重定向当前页面至应用宝页面(移动团队提供)
Android/浏览器
界面流程: 1. 打开浏览器输入地址(或微信浏览器中以外部浏览器打开)->点击打开应用按钮->如已存在则打开程序/未存在开始下载
实现流程: 1. 点击按钮 ->判断是否浏览器端/android ->重定向android规定Schema字符串->同时定时器重定向到android下载路径
- 应用宝地址:
http://a.app.qq.com/o/simple.jsp?pkgname=com.winwin.tax - Schema规则:
winwin://?type=activity&url=
http://promotion.171edu.com/swpx/index.html
四、相关页面代码
//①download.html
<script>
window.onload = function() {
var env = {
agent: window.navigator.userAgent.toLowerCase(),
downURL: 'http://appdownload.17win.com/17win150.apk',
activityURL: 'winwin://?type=activity&url=http://promotion.171edu.com/swpx/index.html?edu',
yybaoURL: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.winwin.tax',
iosURL: 'https://itunes.apple.com/cn/app/id1127148565',
eduURL: 'https://shui5.servyou.com.cn/download.html?utm_campaign=xueyuan&utm_medium=app&utm_source=ewm',（app的新版本此处链接改为https://171edu.com/...）
isWechat: function () {
return this.agent.match(/MicroMessenger/i) == 'micromessenger';
},
isAndroid: function () {
return this.agent.match(/android/i) == 'android';
},
isIphone: function () {
return this.agent.match(/iphone/i) == 'iphone';
},
init: function () {
if (env.isWechat()) {
//微信端都跳转到应用宝
window.location.href = env.yybaoURL;
} else {
if (env.isAndroid()) {
// 非微信安卓端实现思路
//首先唤醒本地app,如果本地有app，打开app,清除定时器，
//如果不存在app,则跳转到apk下载页面，下载app
timer = setTimeout(function () {
window.location.href = env.downURL;
}, 800);
window.location.href = env.activityURL;
window.onpagehide = function () {
clearTimeout(timer);
}
} else {
window.location.href = env.iosURL;
}
}
}
};
env.init();
}
</script>
//②app.html
<script>
var env = {
agent: window.navigator.userAgent.toLowerCase(),
downURL: 'http://appdownload.17win.com/17win150.apk',
activityURL: 'winwin://?type=activity&url=http://promotion.171edu.com/swpx/index.html?edu',
yybaoURL: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.winwin.tax',
// eduURL: 'https://171edu.com/download.html',
eduURL: 'https://shui5.servyou.com.cn/download.html?type=activity&url=http://promotion.171edu.com/swpx/index.html&utm_campaign=xueyuan&utm_medium=app&utm_source=ewm',
iosActivityURL: 'https://shui5.servyou.com.cn/download.html?type=activity&url=http://promotion.171edu.com/swpx/index.html',
isWechat: function(){
return this.agent.match(/MicroMessenger/i) == 'micromessenger';
},
isAndroid: function(){
return this.agent.match(/android/i) == 'android';
},
isIphone: function(){
return this.agent.match(/iphone/i) == 'iphone';
}
};
window.onload = function() {
var btn = document.getElementById('btn');
btn.click();
};
function goto () {
window.location.href = 'https://shui5.servyou.com.cn/download.html?utm_campaign=xueyuan&utm_medium=app&utm_source=ewm';
}
</script>
<button style="opacity: 0;" id="btn" onclick=goto()></button>
//③活动页面中打开app相关js
////env.js
var env = {
agent: window.navigator.userAgent.toLowerCase(),
downURL: 'http://appdownload.17win.com/',
activityURL: 'winwin://?type=activity&url=http://promotion.171edu.com/swpx/index.html?edu',
yybaoURL: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.winwin.tax',
eduURL: 'https://171edu.com/download.html?type=activity&url=http://promotion.171edu.com/swpx/index.html&utm_campaign=xueyuan&utm_medium=app&utm_source=ewm',
shui5URL: 'https://shui5.servyou.com.cn/download.html?type=activity&url=http://promotion.171edu.com/swpx/index.html&utm_campaign=xueyuan&utm_medium=app&utm_source=ewm',
iosActivityURL: 'https://shui5.servyou.com.cn/download.html?type=activity&url=http://promotion.171edu.com/swpx/index.html',
isWechat: function(){
return this.agent.match(/MicroMessenger/i) == 'micromessenger';
},
isAndroid: function(){
return this.agent.match(/android/i) == 'android';
},
isIphone: function(){
return this.agent.match(/iphone/i) == 'iphone';
}
};
;$(function() {
$('.btn-app').bind('click', function() {
//现在实现逻辑
if(env.isWechat() && env.isAndroid()){
window.location.href = env.yybaoURL;
}else {
window.location.href = env.shui5URL;
}
});
//以后用171edu服务器，直接用下面的
//window.location.href = env.eduURL;
});
五、扫码下载实现逻辑
二维码为app.html，该页面主要是模拟触发点击按钮事件，进行跳转到download.html，之后进行下载业务处理
网友评论