收藏夹

H5打开APP指定页面爬坑记录

2018-11-27  本文已影响163人  没有故事的男童鞋

一：需求说明：

做过客户端开发的应该都遇到过分享APP内内容至第三方平台吧；
一般而言，主要是分享至QQ，微信，微博，QQ空间等平台；
对于一些国际化的APP可能会有分享至Facebook，twitter等平台的要求；
因为公司APP主要面对的是国内用户，所以下面只考虑国内的一些平台，国外不做兼容；

二：H5打开APP指定页面跳转要求

三：通过H5打开APP的几种写法

方法一、利用HTML的a标签，通过设置href，在用户点击之后直接跳转

//直接在HTML中设置跳转地址
<a href="dsblockchain://">打开星域</a> 
//通过jQuery设置跳转
$("#openapp").attr("href", "dsblock://");

方法二、通过ifr.src设置跳转链接

var ifr = document.createElement('iframe');
ifr.src = config.scheme_IOS;
ifr.style.display = 'none';
document.body.appendChild(ifr);

方法三、通过设置window.locatin或者window.location.href打开

window.location.href = config.download_url;

四：根据需求初次实现方案如下：(后期改进采用方案二)

//打开app按钮
<span id="open"></span>

//点击之后的相关判断
 var config = {
        scheme_IOS: 'dsblock://',   //iOS发开给
        scheme_Adr: 'block://ds/wakeapp',   //Android开发给
        download_url: '下载链接',
        timeout: 2000
 };
 openclient();
 function openclient() {
     var startTime = Date.now();

     //---点击打开之后--尝试打开APP---start------
     var ifr = document.createElement('iframe');
     if (navigator.userAgent.match(/Android/i) != null) {//Android
        //传递参数给客户端
        ifr.src = (config.scheme_Adr + "?Type=2&"+"MatchId="+matchid);
     }else if(navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null) {//iOS
        ifr.src = (config.scheme_IOS + "?Type=2&"+"MatchId="+matchid);
     } else {//PC端无法打开app。点击后直接下载安卓安装包即可
        ifr.src = "下载链接";
     }
     ifr.style.display = 'none';
     document.body.appendChild(ifr);
    //---点击打开之后--尝试打开APP---end------

     //根据当前平台修改打开失败的跳转链接
     if (navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null) {//iOS跳至App Store
         config.download_url = 'APP在App Store的链接地址';
     } else if (navigator.userAgent.match(/Android/i) != null) {//安卓直接下载
         config.download_url = '下载链接';
     }else{//PC
         config.download_url = '下载链接';
     }
     
    //打开失败要执行的操作
     var t = setTimeout(function () {
         var endTime = Date.now();
         if (!startTime || endTime - startTime < config.timeout + 200) {
             window.location = config.download_url;
         }
     }, config.timeout);
     //当前页面失去焦点，清除延时任务，不提示用户下载
     window.blur = function () {
         clearTimeout(t);
     }
 }

五：最终方案

var articleId = getParamValue("ArticleId");
if (isIos()) {
    if (isWeibo()||is_weixin()){//微博微信打不开APP，(所以要做区分，这里区分和在后面的fn方法中区分都行)直接将跳转地址设置为中转页
        //之所以这里区分出微信和微博，而不是直接通过延时任务的location.href直接跳转到App Store，
        //是因为跳转到中转页会提示用户在浏览器打开，可以打开指定页面
        $("#openapp").attr("href", createUrl("中转页地址", {'Type': 1, 'PostType': 1,'ArticleId': articleId}));
    } else{
        $("#openapp").attr("href", createUrl("dsblock://", {'Type': 1, 'PostType': 1, 'PostId': articleId}));
    }
} else if (navigator.userAgent.match(/Android/i) != null) {
    $("#openapp").attr("href", createUrl("block://ds/wakeapp", {'Type': 1, 'PostType': 1, 'PostId':articleId}));
} else {
    $("#openapp").attr("href", "apk下载地址");
}

function fn() {
    var config = {
        scheme_IOS: 'dsblock://',
        scheme_Adr: 'block://ds/wakeapp',
        download_url: '中转页',
        timeout: 1200
    };
    var startTime = Date.now();
    if (navigator.userAgent.match(/Android/i) != null) {
        config.download_url = createUrl("中转页地址",{'Type': 1, 'ArticleId': articleId});
    } else if (navigator.userAgent.match(/(iPhone|iPad|iPod|iOS)/i) != null) {
        config.download_url = 'App Store跳转地址';
    } else {//pc置空，因为前面已经设置了，要不然会提示下载多个文件，不过只要调用了window.location,href都会刷新当前页面
        config.download_url = '';
    }
    var t = setTimeout(function () {
        var endTime = Date.now();
        if (!startTime || endTime - startTime < config.timeout + 2500) {
            window.location.href = config.download_url;
        }
    }, config.timeout);
    window.blur = function () {
        clearTimeout(t);
    }
}

六：中转页部分代码及网页截图

中转页.png 
//如果是微博，微信，则隐藏打开按钮，显示下载按钮，显示打开提示文字，其余平台隐藏提示文字，显示下载和打开按钮
tip 顶部提示文字：已安装，在浏览器打开
open： 打开APP，继续按钮
<a class="open-button download-button" id="install">立即安装</a>
<p><a class="open-button" id="open">打开 APP 继续</a></p>
if (browserName === "Wechat" || browserName === "Weibo") {
    showDiv("#tip", true);
    showDiv("#open", false);
} else {
    showDiv("#tip", false);
    showDiv("#open", true);
}

//获取地址栏携带的参数,获取之后传递给客户端
var params = window.location.href.split("?")[1];
console.log(params);
if (isIos()) {//iOS
    $("#open").attr("href", "dsblockchain://"+"?"+params);
    $("#install").attr("href", "App Store推广链接");
} else {//安卓
    $("#open").attr("href", "block://ds/wakeapp"+"?"+params);
    if (browserName === "Wechat") {//微信无法下载，打开应用宝推广页
        $("#install").attr("href", "应用宝推广链接");
    } else {
        $("#install").attr("href", "APK下载地址");
    }
}

function showDiv(divName, isShow) {
    if (isShow) {
        $(divName).show();
    } else {
        $(divName).hide();
    }
}

总结：

上一篇 下一篇

猜你喜欢

热点阅读