制作一个iOS app在线下载页面

2018-12-22 0条评论 22,960次阅读本文共1627个字，预计阅读时间5分钟。
Newlearner365 最后修改:2020-06-3 07:36

Contents

1 准备工作
2 服务器部署
3 模板分享

Spread the love

在之前看见很多「iOS迅雷在线下载」这样的页面，可以绕过App Store直接下载app。上一期刚好给大家讲了如何抓取iOS app旧包，本期即可作为抓包的后续，为大家讲解如何制作一个“独乐乐不如众乐乐”的iOS app在线下载页面。

站长已经做好相关页面，是用来下载安装tgx 5.0.2的，也迎合很多telegram朋友的需求。由于服务器性能太弱，带宽不足，流量巨少，下载ipa文件太大，所以本期不提供demo页面，只提供一张png截图。感兴趣的朋友可以加入本站tg群索取查看~

tg交流群：Newlearnerの水群

准备工作

跟以往的博文不同，本期的重点在准备工作上，完成各部分的准备工作后，上传服务器是基本操作。

web

├── index.html #首页（导航页）

├── xxxxx文件夹 #用于存放静态网页所需的图片、js、css等

├── img

├── js

├── css

├── 相关软件的ipa包 #必需（否则玩个🔨）

└── ipa.plist #软件包以及开发者信息

1、抓取ipa包

必须的组件，不再多说。各大桌面操作系统均有方法，善用搜索引擎。

传送门：利用Charles抓取旧版 iOS App

2、写ipa.plist

这个文件是网页的灵魂，直接决定了能否成功安装到iPhone上，否则ipa包抓得再好网页写的再漂亮也无济于事。

标准格式：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>items</key>
    <array>
        <dict>
            <key>assets</key>
            <array>
                <dict>
                    <key>kind</key>
                    <string>software-package</string>
                    <key>url</key>
                    <string>请填上你的ipa下载地址(比如:http://www.example.com/app.ipa)</string>
                </dict>
            </array>
            <key>metadata</key>
            <dict>
                <key>bundle-identifier</key>
                <string>请填上开发者相关信息</string>
                <key>bundle-version</key>
                <string>请填上软件版本号</string>
                <key>kind</key>
                <string>software</string>
                <key>title</key>
                <string>请填上软件名称</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

<key>items</key>

<array>

<dict>

<key>assets</key>

<array>

<dict>

<string>software-package</string>

<string>请填上你的ipa下载地址(比如:http://www.example.com/app.ipa)</string>

</dict>

</array>

<key>metadata</key>

<dict>

<key>bundle-identifier</key>

<string>请填上开发者相关信息</string>

<key>bundle-version</key>

<string>请填上软件版本号</string>

<string>software</string>

<key>title</key>

<string>请填上软件名称</string>

</dict>

</array>

</dict>

</plist>

因为这个文件是开发者用xcode导出ipa时一并导出的文件，而很多软件又是闭源的。所以你几乎没有机会用xcode复现这个过程，也就不能直接得到ipa.plist。再看这个文件，需要补充的地方只有几个，除了bundle-identifier，其他地方均可以填写，因此需要通过间接方式得到它。

将我们得到的ipa在电脑上复制一份备用，解压其中一份，如图所示：

可以看到从itunes抓的包解压后得到一个iTunesMetadata.plist文件，该文件的作用是在iTunes之中可以显示出软件相应的信息，包括名称、厂商、类别、账户、购买日期等。打开一看，是不是和之前抓包的xml界面很像呢？

将softwareVersionBundleId的内容复制到bundle-identifier，(o゜▽゜)o☆[BINGO!]

这样我们就完成了ipa.plist的编写~

3、制作一个简易的index.html

<!doctype html>
<html>
<head>
	<meta content="utf-8">
	<title>标题</title>
</head>
<body>
      <div align="center" ><h1 style="font-size:20pt">xxx软件下载<h1/></div>	
      <div align="center" ><h1 style="font-size:20pt">如果点击无法下载安装，请复制超链接到Safari浏览器中打开<h1/></div>
      <div align="center" ><h1 style="font-size:20pt">
      <a title="iPhone" href="itms-services://?action=download-manifest&url=https://www.example.com/ipa.plist">点击下载</a><h1/></div>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<div align="center" ><h1 style="font-size:20pt">xxx软件下载<h1/></div>

<div align="center" ><h1 style="font-size:20pt">如果点击无法下载安装，请复制超链接到Safari浏览器中打开<h1/></div>

</body>

</html>

页面效果过于简易引起极度不适，因此我们可以根据自行需求编写此html，让界面更加好看。

服务器部署

将上述所有部分打包，放到网站根目录即可。

模板分享

点此下载模板

HTML部分：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="description" content="描述" />
	<meta name="keywords" content="关键词" />
	<title>标题</title>
    <link rel="shortcut icon" href="/assets/images/favicon.ico">
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/assets/css/style.css" />
    <link rel="stylesheet" href="/assets/css/my.css" />
</head>
<body>
    <div class="wrap">
        <div class="main">
			<div class="topbread" style="margin-bottom: 20px;">
		    	<div class="container">
		        	<h1 class="text-center">应用名称（眉头）</h1>
		    	</div>
			</div>
			<div style="margin-top:70px; margin-bottom: 20px;">
		        <div style="text-align:center;">
		  			<div class="polaroid">
                        <div class="logo">
                            <img src="/assets/images/icon.jpg" class="img-circle" width="120" height="120" />
                        </div>
                    </div>
		            <ul class="breadcrumb" id="ul">
		                <li>Version: 版本号 </li>
		            	<li>Size: 大小 </li>
					</ul>
		            <div style="padding-top:20px;">
                        <div class="id" id="id" style="display:none;">
							<div class="panel panel-default">
								<div class="panel-body" style="text-align:left;">
        							<p>首次进行安装请使用提供的账号登录。</p>
                                    <p>账号：account </p>
                                    <p>密码：passed </p>
								</div>
							</div>
                      	</div>
		                <span id="checkinfo">
		                    <a href="itms-services://?action=download-manifest&url=https://www.example.com/ipa.plist" class="btn btn-success btn-lg btn-circle" id="uaApp">安装</a>
		                    <div class="uatip" id="uaTip">
								<span class="uatip-icon"></span>
								<p class="uatip-txt">点击右上角<br/>选择在Safari中打开</p>
							</div>
		                </span>
		            </div>
		        </div>
                <br/>
			</div>
			<div class="col-md-8 col-md-offset-2">
		        <hr class="devider devider-dotted">
		    </div>
        </div>
    </div>
	<div class="footer">
        <div class="text-center">
             ©&nbsp;2018 </a>
        </div>
	</div>
<script type="text/javascript" src="/assets/js/jquery-1.7.2.min.js"></script>
<script>
	function weixinTip(ele){
		var ua = navigator.userAgent;
		var Browser = /Safari/.test(ua) && !/Chrome/.test(ua);
		if(Browser == 0){
			ele.onclick=function(e){
				window.event? window.event.returnValue = false : e.preventDefault();
				document.getElementById('uaTip').style.display='block';
			}
		} else {
			$("#uaApp").click(function () {
				$("#uaApp").attr("style","display:none;");
                $("#ul").attr("style","display:none;");
                $("#id").attr("style","display:block;");
            });
        }
	}
	var btn1 = document.getElementById('uaApp');
	weixinTip(btn1);
</script>
</body>
</html>