iOS 关于微信下载页面的制作
2018-05-29 本文已影响135人
Harry_Coding
关于一个下载页面有什么好说的？不就是一个html页面吗？
因为微信做了内部打开apk下载链接和appstore链接的屏蔽，也就是不能深度下载app限制。
直接在聊天朋友圈页面发下载链接也是无法完成下载的。
注：最近测试发现，在下载页面可以点击下载按钮下载apk或者iOS app
当然为了防止微信再有什么变卦，那么我们还是应用以前的机制，不用内置微信浏览器打开，而是打开其他浏览器。
我想有些问题我有些混淆了，QQ和微信到底做了哪些限制:1>在QQ和微信中不能直接打开其他的应用;因为他屏蔽了非http和https协议的跳转，也就是我们scheme跳转 2> 以前来说，他屏蔽了appstore的链接和Android的apk下载链接。相对来说我觉得这是微信和qq做的一个安全措施吧，那么相信其他的类似软件也会做同样的限制！那么相对来说手机自带的浏览器，就不会有这个限制，所以我们需要先引导用户跳转到自带的浏览器
关于下载界面的html页面代码（我也是对html+css+js略懂一二，所以自己实现一下，也是对知识的巩固吧）
那么已经清楚的了解微信和qq所做的安全防范措施之后，我们代码当然得需要依据这些防护来写。
遮盖引导用户用浏览器打开
尝试打开app
我在下载页面里加入了尝试打开app的逻辑部分。代码都是通用的，具体的视情况而定吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>anatomy runLoop download</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#main {
position: absolute;
top: 0px;
margin: 0 0;
background: bisque;
left: 0px;
height: 100%;
width: 100%;
text-align: center;
}
#download {
position: absolute;
top: 30%;
width: 100%;
}
#main button {
position: relative;
display: block;
width: 60%;
height: 50px;
background: greenyellow;
margin: 5px auto;
border-radius: 5px;
color: white;
font-size: 16px;
}
#download p {
position: relative;
}
#mask {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 70;
text-align: center;
}
p {
position: absolute;
top: 50%;
width: 100%;
margin: auto auto;
line-height: 50px;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<div id="main">
<div id="download">
<button type="button" id="button1" onclick="tapAction(event)">Android download</button>
<button type="button" onclick="tapAction(event)">iOS download</button>
<p style="color: lightgray; font-size: 15px;">请点击下载按钮进行下载</p>
</div>
</div>
<div id="mask">
<p>Please click right and selected Safari open</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
<script type="text/javascript">
var andriodApp = "" // Android app url
var iOSApp = "anatomyRunLoop://"
var isiOS = window.navigator.platform == "iPhone";
var isAndroid = window.navigator.platform == "android";
var isWX = window.navigator.userAgent.indexOf('MicroMessenger') > 0;
var isQQ = window.navigator.userAgent.indexOf("QQ") > 0;
var maskEle = document.getElementById("mask");
var appUrl;
if (isiOS) {
appUrl = iOSApp;
} else {
appUrl = andriodApp;
}
if (isWX || isQQ) {
maskEle.style.display = "block";
} else {
maskEle.style.display = "none";
}
window.location.href = "anatomyRunLoop://";
setTimeout(function() {
// location.href = 'http://192.168.31.234/download.html';
}, 2000);
function tapAction(e) {
if (e.target.innerHTML == "Android download") {
alert("downloading...");
} else {
alert("downloading...");
}
}
</script>
</body>
</html>
代码基本就是这样，也不用详细的解释，因为我是js的新手，所以写的也不是特别规整，但是作为一名iOS开发工作者，那我觉得和我们有关的不管是后台还是其他的东西，我们还是需要去明白他的运作原理的！
如果有什么错误欢迎大家指正！
