最近做活动，需要用到在H5中打开/下载APP，PC端扫码下载APP相关业务，看似很小的一个功能，却蕴藏很大玄机。主要的难点在于在微信中唤醒APP，参考了很多产品的实现方式，对唱吧、今日头条、SegmentFault等平台颇为满意。最终我们团队，也实现了想要的功能。

功能描述

①Android端 微信中，依托应用宝实现打开、下载逻辑；
浏览器中，本地没有APP，跳到指定下载页，有APP可以唤醒APP并打开指定活动页。
②IOS端 微信中，本地没有APP，依托应用宝进行下载，本地有APP，则可以在微信中唤醒APP，并且在APP中打开该活动页。
浏览器中，本地没有APP，跳iTunes下载，有APP，唤醒。

一、方案流程

二、针对以上方案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下载路径

1. 应用宝地址:
   http://a.app.qq.com/o/simple.jsp?pkgname=com.winwin.tax
2. 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，之后进行下载业务处理

本人的第一篇博客，感谢您阅读到了最后，文中如果有不足之处，还请批评指正。