如何解决微信和微博下打开安装包地址不能下载的问题
Categories:网页技术
by 宅人 |
on 12月 27, 2021

在实际应用中，经常会遇到这种情况：在微信中打开安装包的下载链接，或扫描一个下载二维码，如果不针对微信进行处理，那此时是没法通过微信来直接下载的，下载界面会是一个空白页面，感觉是卡死了一样没有任何反应，只能点右上角【...】后选择在浏览器中打开才行。此时需要针对微信进行下设置，对用户进行下引导，可以设置在微信里打开时，展示一个提示图或提示小页面，向用户说明怎么通过微信继续下载。在微博里，也会遇到类似的情况，没法直接在微博下进行安装包的下载，需要引导用户去浏览器里打开，才能继续下载。

通常需要一个专用的下载页面或下载地址，进行相关的配置来实现这个提醒功能。此处以下载链接进行说明。
举例链接地址：http://www.example.com/example.html?other=[UrlEncode 1]&android=[UrlEncode 2]&ios=[UrlEncode 3]&weixin=guide

参数说明

  1. http://www.example.com/example.html 为跳转功能页面，example.html代码如下：
  2. [UrlEncode 1]为非安卓和iOS设备打开时的跳转地址，如http://www.example.com/pc_download.html
  3. [UrlEncode 2]为安卓设备打开时的跳转地址，如http://www.example.com/android_download.html
  4. [UrlEncode 3]为iOS设备打开时的跳转地址，如http://www.example.com/ios_download.html
  5. &weixin=guide为微信端里的引导开关，去掉后微信下不弹引导提示（有没有这个，微博下都会有引导提示，可为微博加个判断）

完整链接大概这样：http://www.example.com/example.html?other=http%3A%2F%2Fwww.example.com%2Fpc_download.html&android=http%3A%2F%2Fwww.example.com%2Fandroid_download.html&ios=http%3A%2F%2Fwww.example.com%2Fios_download.html&weixin=guide

example.html的HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>下载</title>
<style>
.body { background:#FFF;}
.img { width:100%;}
</style>
</head>
<body>

<!--
支持chid传递； 如果是双端推广，支持chid是32位的，前16位是安卓的线下推广渠道； 后16位是ios的线上推广渠道
-->
<div></div>
<div id="yindao">

</div>
<script type="text/javascript">

function getNull(v){
    if(v == null || v == "" || typeof(v) == 'undefined'){
        return null;
    }else{
        return v;
    }
}

function getParameter(param){
    var v = getValueByName(window.location.search,param);
    return v;
}

function getParamterDecode(param) {
       // var v = getParameter(param);
       var v = getQueryVariable(param);
       return decodeURIComponent(v);
}

/**
 *获取链接值
 */
function getValueByName(query,param){
    var query = query.split('?')[1];
    var iLen = param.length;
    if(getNull(query) == null) {
        return null;
    }
    var iStart = query.indexOf(param);
    if (iStart == -1) return "";
    iStart += iLen + 1;
    var iEnd = query.indexOf("&", iStart);
    if (iEnd == -1) return query.substring(iStart); 
    return query.substring(iStart, iEnd);
}

function getQueryVariable(param)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == param){return pair[1];}
       }
       return null;
}

function urlAppendChid(url, chid) {
    if(chid && chid.length > 5) {
        if(url.indexOf('?') != -1) {
            return url + '&chid=' + chid;
        } else {
            return url + '?chid=' + chid;
        }
    } else {
        return url;
    }
}

//判断是否微信
function is_weixin_guide(ua) {
    if(null == ua) {
        return false;
    }
    var weixin = getParamterDecode('weixin');
    var regex_match = /(micromessenger)/i;
    if(weixin != null && weixin == 'guide' && regex_match.test(ua)) {
        var img = document.createElement("img");
        img.setAttribute("boder", "0");
        img.setAttribute("width", "100%");
                if(is_ios(ua))
                    img.src = "images/dl_ios_guide.jpg";
                else
                    img.src = "images/dl_and_guide.jpg";
        var div = document.getElementById("yindao");
        div.appendChild(img);
        return true;
    }
    return false;
}

//判断是否新浪微博
function is_weibo_guide(){
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/WeiBo/i) == "weibo") {
                var img = document.createElement("img");
                img.setAttribute("boder", "0");
                img.setAttribute("width", "100%");
                if(is_ios(ua))
                    img.src = "images/dl_ios_guide.jpg";
                else
                    img.src = "images/dl_and_guide.jpg";
                var div = document.getElementById("yindao");
                div.appendChild(img);
                return true;
        }
        return false;
}

//判断是否IOS
function is_ios(ua) {
    if(null == ua) {
        return false;
    }
    var url = getParamterDecode('ios');
    var regex_match = /iphone|ipad|ipod/;
    if(url != null && url.length > 10 && regex_match.test(ua)) {
        document.location.href= urlAppendChid(url, ios_chid);
        return true;
    }
    return false;
}

//判断是否安卓
function is_android(ua) {
    if(null == ua) {
        return false;
    }
    var url = getParamterDecode('android');
    var regex_match = /android/;
    if(url != null && url.length > 10 && regex_match.test(ua)) {
        document.location.href= urlAppendChid(url, android_chid);
        return true;
    }
    return false;
}

var ua = navigator.userAgent.toLowerCase();
console.log("ua:" + ua);
var _chid = getParamterDecode('chid');
var chid = _chid;
var android_chid = _chid;
var ios_chid = _chid;
if(_chid && _chid.length == 32) {
    // chid = _chid.substring(0, 16);
    android_chid = _chid.substring(0, 16);
    ios_chid = _chid.substring(16, 32);
}
if(is_weibo_guide()) {
    console.log("is_weibo");
}
else if(is_weixin_guide(ua)) {
    console.log("ios redirect");
} 
else if(is_ios(ua)) {
    console.log("weixin redirect");
} 
else if(is_android(ua)) {
    console.log("android redirect");
} else {
    var url = getParamterDecode('other');
    if(url != null && url.length > 10) {
        document.location.href= urlAppendChid(url, chid);
        console.log("other redirect");
    } else {
        alert("未提供默认跳转配置");
    }
}

</script>
</body>
</html>