简介面向苹果设备用户的IPA软件源预览系统第二版优化包是适合个人或小团队自建软件源时使用的站点前端主要用于解决IPA安装包展示零散、下载入口不清晰的问题。压缩包共9个文件、仅1.35MB包含1个PHP后台交互文件、1个HTML主页面及7张PNG素材这些图片分别用于轮播、软件左上角角标与鼠标悬停美化效果整体结构简洁便于快速部署。该版本重点优化了电脑端显示在大屏下的布局与交互明显比初版更规整新增的轮播图和悬停高亮也让软件展示更直观。资源目前已有131人浏览学习虽然压缩包是以补丁形式提供而非完整源码但PHP与HTML文件逻辑完整可直接覆盖到既有系统中使用也方便熟悉前端开发的用户在此基础上调整界面风格和展示规则适合用低成本搭建个性化软件源预览页面的场景。1. 补丁不是源码但改的是预览这条链路解开压缩包最先看到的就是 index.html、uploads 和 appstore.php 这三个核心件。作者强调这是补丁而不是全套源码意思是基础框架此前已经发过这次的第二版主要改了两块一块是电脑端适配另一块是 UI 交互细节包括轮播、ipa 图标左上角标签、鼠标悬停美化。这两块改动的本质是把「预览页」从手机端专用变成了一个可跨端展示的静态界面同时保持了原有国内软件源的指向关系。你在部署前只要记住一个结论预览系统不是下载系统它只负责让访客看到有哪些 ipa、每个 ipa 的描述和版本号真正的安装动作由 itms-services 协议去完成。适合自己搭建私人软件源或者给分发页做个好看的封面。2. 第二版改了什么从轮播、标签到悬停状态的组合判断2.1 index.html 的信息架构一个静态入口如何撑起动态预览index.html 在第二版里承担的角色是「渲染壳」。它本身不存数据页面上看到的软件列表、轮播图、标签全部来自运行时加载的 JSON 或 PHP 接口返回。这样设计的理由很简单软件源里的 ipa 会持续更新如果把数据硬编码到 HTML 里每次新增软件都要改页面静态入口加动态数据源是这一类预览系统的通用做法。看 index.html 的代码能发现几个固定位点轮播区通常是一个div.banner软件列表是div.app-list每个 app 条目由模板函数生成。第二版对这几个位点的改动是把固定宽度的布局改成了响应式栅格。电脑端浏览器窗口变宽时列表自动从三列变成五列甚至更多而手机端仍然保持两列。// 从 appstore.php 拉取软件列表渲染到页面 fetch(appstore.php) .then(res res.json()) .then(data { const list document.querySelector(.app-list); data.forEach((app, index) { const card createAppCard(app, index); list.appendChild(card); }); }); function createAppCard(app, index) { const div document.createElement(div); div.className app-card; div.setAttribute(data-bundle, app.bundleId); // 第二版新增左上角标签 if (app.badge) { const badge document.createElement(span); badge.className app-badge; badge.textContent app.badge; div.appendChild(badge); } return div; }这段代码的逻辑是用 fetch 请求同目录下的 appstore.php拿到 JSON 数组后遍历生成卡片。createAppCard里的app.badge对应了第二版左上角标签的数据来源——约定字段存在时渲染标签不存在就跳过。bundleId 则用于后续的安装链接组装。2.2 轮播与标签不是功能是数据被标记成了不同形状2.2.1 轮播数据如何取轮播对应的数据字段一般是featured或banner值为 1 的应用会被筛选出来放进顶部轮播区。第二版在电脑端适配时对轮播做的最重要调整是尺寸手机端的轮播图按 375 宽度设计放到电脑上会出现左右留白所以第二版把轮播容器改成了百分比宽度图片用background-size: cover保证比例不塌。// 轮播数据源只取标记为 featured 的应用 const featuredApps data.filter(app app.featured 1); const bannerWrap document.querySelector(.banner-inner); featuredApps.forEach(app { const slide document.createElement(div); slide.className banner-slide; slide.style.backgroundImage url(${app.bannerImage || app.icon}); bannerWrap.appendChild(slide); }); // 轮播切换逻辑 let current 0; setInterval(() { current (current 1) % featuredApps.length; bannerWrap.style.transform translateX(-${current * 100}%); }, 4000);filter(app app.featured 1)是从完整数据里筛出标记应用bannerImage优先取专属横幅没有时回退到图标。轮播切换用 transform 位移实现每次平移一个 100% 宽度。这里有个细节第二版把自动轮播间隔从默认的 3000ms 调到了 4000ms因为电脑端用户浏览速度比手机端慢切太快反而容易点错。2.2.2 标签的判定逻辑左上角标签在第二版里不是单纯的样式加了个角标它的显示逻辑是后端在 JSON 里预置了一个badge字段。常见取值包括「NEW」「热」「VIP」也可能是自定义文字。前端只判断字段是否存在不做深度处理。这样做的好处是新增第二个标签时不用改前端逻辑只要数据端把badge字段值传过来即可。2.2.3 悬停效果的 CSS 位点鼠标悬停美化是第二版电脑端适配时补的一块。它主要作用在.app-card上效果包括轻微上浮、阴影加深、图标放大三个维度。.app-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .app-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .app-card:hover .app-icon img { transform: scale(1.05); } .app-icon img { transition: transform 0.2s ease; }这块有两个需要注意的边界。第一transition不要写在:hover内部否则鼠标移出时没有过渡动画会显得生硬。第二缩放效果作用在img而不是父容器避免触发浏览器对 overflow 的重新计算。调试时优先在开发者工具的 Elements 面板里确认.app-card的实际尺寸是否被图标撑爆。2.3 电脑端适配改了哪些细节第二版对电脑端的适配核心就三件事栅格数、轮播高度、 hover 状态。手机上点击是唯一交互电脑上多了悬停预览这个维度。另外第二版还把软件名称区域加了一个text-overflow: ellipsis处理防止超长应用名把列表布局挤乱。3. 预览数据从哪来uploads 与 plist 的结构约定3.1 一个最小可用的预览数据集长什么样在部署这个系统之前先要建立一个认知uploads 目录里放的并不是 ipa 安装包而是每个应用对应的描述文件plist和图标。预览系统的数据链路是「plist 描述文件 → 解析出应用信息 → 渲染到页面」相当于一个聚合层。每个应用在 uploads 下至少有三个文件图标 png、展示截图、以及一个描述安装信息的 plist。?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dict keyitems/key array dict keymetadata/key dict keybundle-identifier/key stringcom.example.music/string keybundle-version/key string2.0.1/string keytitle/key string示例音乐/string /dict keyassets/key array dict keykind/key stringsoftware-package/string keyurl/key stringhttps://your-server.com/ipa/example-music.ipa/string /dict /array /dict /array /dict /plist这个 plist 的结构是苹果 OTA 安装的标准格式。metadata里的bundle-identifier是应用的唯一标识title会直接显示在页面卡片上。assets下的 url 指向实际 ipa 文件的下载地址预览页面上的安装按钮最终会拼接 itms-services 链接指向这个地址。3.2 plist 转 JSON 的兼容处理第二版优化里作者在电脑端适配后做了另一个改动把 plist 解析结果统一转成了 JSON 格式输出避免前端直接解析 XML 带来的跨域和兼容问题。你打开 appstore.php 时返回的是 JSON而不是原始 plist这样 index.html 里的 fetch 才能直接消费数据。常见的字段映射关系如下plist 字段JSON 字段用途metadata.titlenameipa 名称metadata.bundle-identifierbundleId应用标识metadata.bundle-versionversion版本号assets[0].urldownloadUrl安装包地址自定义字段 subtitlesubtitle列表页副标题自定义字段 badgebadge左上角标签自定义字段 featuredfeatured是否进入轮播这个表的来源是第二版源码中 appstore.php 的解析逻辑。作者用simplexml_load_file把 plist 读成对象再逐个字段映射到数组里。需要留意的是assets数组里可能同时存在software-package和full-size-image两种资源取值时要按kind字段区分不能直接拿第一个元素。3.3 appstore.php 在链路里的位置appstore.php 是这套预览系统唯一的后端入口。它做的事情可以拆成三步扫描 uploads 目录下所有 plist 文件、解析每个文件提取应用元数据、按参数过滤后输出 JSON。在一个只有静态页面的软件源场景里这样一个单文件 API 已经足够不需要引入数据库。4. 把预览系统部署到服务器的完整步骤4.1 部署前需要确认的环境这套系统对运行环境的要求很低最低配置是 Nginx 加 PHP 7.0 以上。我用的是 PHP 7.4跑第二版没有遇到兼容问题。部署前先确认 PHP 安装了simplexml扩展因为 appstore.php 依赖它解析 plist 文件。php -m | grep simplexml命令返回simplexml即代表扩展存在。如果没有Debian/Ubuntu 下执行apt install php7.4-xmlCentOS 下执行yum install php-xml装完重启 PHP-FPM 即可。这一步做好了后面就不会遇到白屏问题。4.2 Nginx PHP 的最小站点配置把解压后的文件上传到服务器我一般放在/var/www/ipa-preview。注意 uploads 目录的读写权限要交给 PHP-FPM 的运行用户否则后面新增应用时无法扫描到新 plist。server { listen 80; server_name repo.example.com; root /var/www/ipa-preview; index index.html; location / { try_files $uri $uri/ /index.html; } location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/run/php/php7.4-fpm.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } location ~* \.(plist|ipa)$ { root /var/www/ipa-preview; add_header Content-Type application/xml; } }这段配置的核心是三条 location 规则。try_files把前端路由交给 index.html 处理适合页面内用历史路由的场景。PHP 转发走 Unix socket比 TCP 方式少了 TCP 握手开销在高并发轮询时表现更好。最后一条plist|ipa的规则是第二版部署时容易漏的——如果不显式声明 plist 的 Content-Type浏览器会按文本直接打开而不是触发安装器。如果你用宝塔面板路径换成/www/wwwroot/ipa-previewPHP-FPM socket 的路径需要查一下面板配置。Apache 下则要开启mod_rewrite在站点根目录放.htaccess文件但建议还是切到 Nginx因为这套系统的伪静态规则在 Nginx 下更稳定。4.3 appstore.php 的响应头与参数说明部署过程中有个关键点容易被忽略appstore.php 输出的 JSON 必须带正确的跨域响应头否则前端 fetch 会被 CORS 拦截。源码里的输出部分大致是这样?php header(Content-Type: application/json; charsetutf-8); header(Access-Control-Allow-Origin: *); $allowed [sort, category, badge, featured, callback]; $params array_intersect_key($_GET, array_flip($allowed)); // 扫描 uploads 下的所有 plist $files glob(__DIR__ . /uploads/*.plist); $apps []; foreach ($files as $file) { $plist simplexml_load_file($file); if ($plist false) { continue; } $item $plist-dict-array-dict; $meta $item-dict[0]-dict; $apps[] array( name (string)$meta-string[2], bundleId (string)$meta-string[0], version (string)$meta-string[1], badge isset($item-dict[1]) ? (string)$item-dict[1]-string : , ); } if (isset($params[sort]) $params[sort] new) { usort($apps, function($a, $b) { return version_compare($b[version], $a[version]); }); } $output json_encode($apps); if (!empty($params[callback])) { header(Content-Type: application/javascript); $output $params[callback] . ( . $output . ); } echo $output;参数说明参数名可选值作用sortnew / default按版本号倒序排badgeNEW / 热 等按标签筛选featured1只取轮播应用callback函数名返回 JSONP 格式category分类名按分类过滤header(Access-Control-Allow-Origin: *)是必须的调试时如果发现浏览器报 CORS 错误先看响应头有没有这一行。callback参数支持 JSONP如果前端用了 jQuery 的$.ajax且请求跨域可以靠它绕过 CORS。4.4 电脑端适配的两个坑部署第二版时遇到最多的坑一个是图片懒加载在电脑端失灵另一个是列表页滚动条出现在错误容器里。懒加载失灵的原因是loadinglazy在部分 Windows 浏览器下对首屏图片不生效表现为轮播图空白。解决办法是把首屏 banner 的图片改成link relpreload预加载。滚动条问题则是高度计算时没用calc(100vh - 头部高度)导致电脑端页面过长。5. 验证数据结构与排查安装无响应5.1 用 curl 快速验证 appstore.php 的返回部署完成后先用 curl 验证后端返回的 JSON 结构是否正确这一步能帮你快速区分是数据问题还是前端渲染问题。curl -s http://127.0.0.1/appstore.php | jq .[0] | {name, bundleId, version}如果返回的name和version符合预期说明 plist 解析链路正常。这是一套典型的搭建流程改配置、清缓存、验证输出。看不到输出时先检查 PHP-FPM 是否启动了simplexml扩展再检查 uploads 目录的权限最后确认 Nginx 的 fastcgi_param 路径没有写错。5.2 页面正常但点击安装没反应页面列表渲染正常但点击安装按钮没有拉起安装器这是预览系统部署后最典型的问题。排查顺序从上到下现象原因处理方式安装按钮点击后跳转空白页itms-services 链接格式不对确认链接为itms-services://?actiondownload-manifesturlhttps://你的域名/app.plist弹出「无法连接到」提示plist 中 ipa 地址不是 https安装描述文件所在的域名和 ipa 下载地址必须全部为 https部分设备安装失败plist 未设置正确的 Content-Type检查 Nginx 配置里的plistlocation 是否生效一直转圈不开始下载ipa 文件路径 404访问 assets.url 看是否能直接下载第二个场景最容易踩坑因为预览系统本身是国内软件源很多人的 ipa 存在国内服务器的 http 地址上。iOS 的安装描述文件强制要求域名是 https这是系统层面的限制无法绕过。解决方式是把 ipa 文件放到支持 https 的对象存储或者给服务器配置 SSL 证书。补充一个调试技巧Safari 的开发者模式里可以看到 itms-services 链接的完整跳转链。如果发现 plist 请求返回的是 JSON 而不是 XML说明 Nginx 的location ~* \.(plist|ipa)$规则没生效此时在浏览器直接打开 plist 地址内容应该以 XML 格式渲染而不是纯文本。最后一处细节预览页面上的安装按钮第二版在电脑端 hover 时会显示一个 tooltip内容是「点击后用 iOS 扫码安装」。这个提示的判定条件是navigator.platform是否为 iPhone/iPad桌面端只展示提示而不触发安装跳转把真正的安装动作留给了手机扫码。如果你自己改造可以把扫码链接做成 encodeURIComponent 的短链方便分享到群里。本文还有配套的精品资源点击获取
简介面向苹果设备用户的IPA软件源预览系统第二版优化包是适合个人或小团队自建软件源时使用的站点前端主要用于解决IPA安装包展示零散、下载入口不清晰的问题。压缩包共9个文件、仅1.35MB包含1个PHP后台交互文件、1个HTML主页面及7张PNG素材这些图片分别用于轮播、软件左上角角标与鼠标悬停美化效果整体结构简洁便于快速部署。该版本重点优化了电脑端显示在大屏下的布局与交互明显比初版更规整新增的轮播图和悬停高亮也让软件展示更直观。资源目前已有131人浏览学习虽然压缩包是以补丁形式提供而非完整源码但PHP与HTML文件逻辑完整可直接覆盖到既有系统中使用也方便熟悉前端开发的用户在此基础上调整界面风格和展示规则适合用低成本搭建个性化软件源预览页面的场景。1. 补丁不是源码但改的是预览这条链路解开压缩包最先看到的就是 index.html、uploads 和 appstore.php 这三个核心件。作者强调这是补丁而不是全套源码意思是基础框架此前已经发过这次的第二版主要改了两块一块是电脑端适配另一块是 UI 交互细节包括轮播、ipa 图标左上角标签、鼠标悬停美化。这两块改动的本质是把「预览页」从手机端专用变成了一个可跨端展示的静态界面同时保持了原有国内软件源的指向关系。你在部署前只要记住一个结论预览系统不是下载系统它只负责让访客看到有哪些 ipa、每个 ipa 的描述和版本号真正的安装动作由 itms-services 协议去完成。适合自己搭建私人软件源或者给分发页做个好看的封面。2. 第二版改了什么从轮播、标签到悬停状态的组合判断2.1 index.html 的信息架构一个静态入口如何撑起动态预览index.html 在第二版里承担的角色是「渲染壳」。它本身不存数据页面上看到的软件列表、轮播图、标签全部来自运行时加载的 JSON 或 PHP 接口返回。这样设计的理由很简单软件源里的 ipa 会持续更新如果把数据硬编码到 HTML 里每次新增软件都要改页面静态入口加动态数据源是这一类预览系统的通用做法。看 index.html 的代码能发现几个固定位点轮播区通常是一个div.banner软件列表是div.app-list每个 app 条目由模板函数生成。第二版对这几个位点的改动是把固定宽度的布局改成了响应式栅格。电脑端浏览器窗口变宽时列表自动从三列变成五列甚至更多而手机端仍然保持两列。// 从 appstore.php 拉取软件列表渲染到页面 fetch(appstore.php) .then(res res.json()) .then(data { const list document.querySelector(.app-list); data.forEach((app, index) { const card createAppCard(app, index); list.appendChild(card); }); }); function createAppCard(app, index) { const div document.createElement(div); div.className app-card; div.setAttribute(data-bundle, app.bundleId); // 第二版新增左上角标签 if (app.badge) { const badge document.createElement(span); badge.className app-badge; badge.textContent app.badge; div.appendChild(badge); } return div; }这段代码的逻辑是用 fetch 请求同目录下的 appstore.php拿到 JSON 数组后遍历生成卡片。createAppCard里的app.badge对应了第二版左上角标签的数据来源——约定字段存在时渲染标签不存在就跳过。bundleId 则用于后续的安装链接组装。2.2 轮播与标签不是功能是数据被标记成了不同形状2.2.1 轮播数据如何取轮播对应的数据字段一般是featured或banner值为 1 的应用会被筛选出来放进顶部轮播区。第二版在电脑端适配时对轮播做的最重要调整是尺寸手机端的轮播图按 375 宽度设计放到电脑上会出现左右留白所以第二版把轮播容器改成了百分比宽度图片用background-size: cover保证比例不塌。// 轮播数据源只取标记为 featured 的应用 const featuredApps data.filter(app app.featured 1); const bannerWrap document.querySelector(.banner-inner); featuredApps.forEach(app { const slide document.createElement(div); slide.className banner-slide; slide.style.backgroundImage url(${app.bannerImage || app.icon}); bannerWrap.appendChild(slide); }); // 轮播切换逻辑 let current 0; setInterval(() { current (current 1) % featuredApps.length; bannerWrap.style.transform translateX(-${current * 100}%); }, 4000);filter(app app.featured 1)是从完整数据里筛出标记应用bannerImage优先取专属横幅没有时回退到图标。轮播切换用 transform 位移实现每次平移一个 100% 宽度。这里有个细节第二版把自动轮播间隔从默认的 3000ms 调到了 4000ms因为电脑端用户浏览速度比手机端慢切太快反而容易点错。2.2.2 标签的判定逻辑左上角标签在第二版里不是单纯的样式加了个角标它的显示逻辑是后端在 JSON 里预置了一个badge字段。常见取值包括「NEW」「热」「VIP」也可能是自定义文字。前端只判断字段是否存在不做深度处理。这样做的好处是新增第二个标签时不用改前端逻辑只要数据端把badge字段值传过来即可。2.2.3 悬停效果的 CSS 位点鼠标悬停美化是第二版电脑端适配时补的一块。它主要作用在.app-card上效果包括轻微上浮、阴影加深、图标放大三个维度。.app-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .app-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .app-card:hover .app-icon img { transform: scale(1.05); } .app-icon img { transition: transform 0.2s ease; }这块有两个需要注意的边界。第一transition不要写在:hover内部否则鼠标移出时没有过渡动画会显得生硬。第二缩放效果作用在img而不是父容器避免触发浏览器对 overflow 的重新计算。调试时优先在开发者工具的 Elements 面板里确认.app-card的实际尺寸是否被图标撑爆。2.3 电脑端适配改了哪些细节第二版对电脑端的适配核心就三件事栅格数、轮播高度、 hover 状态。手机上点击是唯一交互电脑上多了悬停预览这个维度。另外第二版还把软件名称区域加了一个text-overflow: ellipsis处理防止超长应用名把列表布局挤乱。3. 预览数据从哪来uploads 与 plist 的结构约定3.1 一个最小可用的预览数据集长什么样在部署这个系统之前先要建立一个认知uploads 目录里放的并不是 ipa 安装包而是每个应用对应的描述文件plist和图标。预览系统的数据链路是「plist 描述文件 → 解析出应用信息 → 渲染到页面」相当于一个聚合层。每个应用在 uploads 下至少有三个文件图标 png、展示截图、以及一个描述安装信息的 plist。?xml version1.0 encodingUTF-8? !DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd plist version1.0 dict keyitems/key array dict keymetadata/key dict keybundle-identifier/key stringcom.example.music/string keybundle-version/key string2.0.1/string keytitle/key string示例音乐/string /dict keyassets/key array dict keykind/key stringsoftware-package/string keyurl/key stringhttps://your-server.com/ipa/example-music.ipa/string /dict /array /dict /array /dict /plist这个 plist 的结构是苹果 OTA 安装的标准格式。metadata里的bundle-identifier是应用的唯一标识title会直接显示在页面卡片上。assets下的 url 指向实际 ipa 文件的下载地址预览页面上的安装按钮最终会拼接 itms-services 链接指向这个地址。3.2 plist 转 JSON 的兼容处理第二版优化里作者在电脑端适配后做了另一个改动把 plist 解析结果统一转成了 JSON 格式输出避免前端直接解析 XML 带来的跨域和兼容问题。你打开 appstore.php 时返回的是 JSON而不是原始 plist这样 index.html 里的 fetch 才能直接消费数据。常见的字段映射关系如下plist 字段JSON 字段用途metadata.titlenameipa 名称metadata.bundle-identifierbundleId应用标识metadata.bundle-versionversion版本号assets[0].urldownloadUrl安装包地址自定义字段 subtitlesubtitle列表页副标题自定义字段 badgebadge左上角标签自定义字段 featuredfeatured是否进入轮播这个表的来源是第二版源码中 appstore.php 的解析逻辑。作者用simplexml_load_file把 plist 读成对象再逐个字段映射到数组里。需要留意的是assets数组里可能同时存在software-package和full-size-image两种资源取值时要按kind字段区分不能直接拿第一个元素。3.3 appstore.php 在链路里的位置appstore.php 是这套预览系统唯一的后端入口。它做的事情可以拆成三步扫描 uploads 目录下所有 plist 文件、解析每个文件提取应用元数据、按参数过滤后输出 JSON。在一个只有静态页面的软件源场景里这样一个单文件 API 已经足够不需要引入数据库。4. 把预览系统部署到服务器的完整步骤4.1 部署前需要确认的环境这套系统对运行环境的要求很低最低配置是 Nginx 加 PHP 7.0 以上。我用的是 PHP 7.4跑第二版没有遇到兼容问题。部署前先确认 PHP 安装了simplexml扩展因为 appstore.php 依赖它解析 plist 文件。php -m | grep simplexml命令返回simplexml即代表扩展存在。如果没有Debian/Ubuntu 下执行apt install php7.4-xmlCentOS 下执行yum install php-xml装完重启 PHP-FPM 即可。这一步做好了后面就不会遇到白屏问题。4.2 Nginx PHP 的最小站点配置把解压后的文件上传到服务器我一般放在/var/www/ipa-preview。注意 uploads 目录的读写权限要交给 PHP-FPM 的运行用户否则后面新增应用时无法扫描到新 plist。server { listen 80; server_name repo.example.com; root /var/www/ipa-preview; index index.html; location / { try_files $uri $uri/ /index.html; } location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/run/php/php7.4-fpm.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } location ~* \.(plist|ipa)$ { root /var/www/ipa-preview; add_header Content-Type application/xml; } }这段配置的核心是三条 location 规则。try_files把前端路由交给 index.html 处理适合页面内用历史路由的场景。PHP 转发走 Unix socket比 TCP 方式少了 TCP 握手开销在高并发轮询时表现更好。最后一条plist|ipa的规则是第二版部署时容易漏的——如果不显式声明 plist 的 Content-Type浏览器会按文本直接打开而不是触发安装器。如果你用宝塔面板路径换成/www/wwwroot/ipa-previewPHP-FPM socket 的路径需要查一下面板配置。Apache 下则要开启mod_rewrite在站点根目录放.htaccess文件但建议还是切到 Nginx因为这套系统的伪静态规则在 Nginx 下更稳定。4.3 appstore.php 的响应头与参数说明部署过程中有个关键点容易被忽略appstore.php 输出的 JSON 必须带正确的跨域响应头否则前端 fetch 会被 CORS 拦截。源码里的输出部分大致是这样?php header(Content-Type: application/json; charsetutf-8); header(Access-Control-Allow-Origin: *); $allowed [sort, category, badge, featured, callback]; $params array_intersect_key($_GET, array_flip($allowed)); // 扫描 uploads 下的所有 plist $files glob(__DIR__ . /uploads/*.plist); $apps []; foreach ($files as $file) { $plist simplexml_load_file($file); if ($plist false) { continue; } $item $plist-dict-array-dict; $meta $item-dict[0]-dict; $apps[] array( name (string)$meta-string[2], bundleId (string)$meta-string[0], version (string)$meta-string[1], badge isset($item-dict[1]) ? (string)$item-dict[1]-string : , ); } if (isset($params[sort]) $params[sort] new) { usort($apps, function($a, $b) { return version_compare($b[version], $a[version]); }); } $output json_encode($apps); if (!empty($params[callback])) { header(Content-Type: application/javascript); $output $params[callback] . ( . $output . ); } echo $output;参数说明参数名可选值作用sortnew / default按版本号倒序排badgeNEW / 热 等按标签筛选featured1只取轮播应用callback函数名返回 JSONP 格式category分类名按分类过滤header(Access-Control-Allow-Origin: *)是必须的调试时如果发现浏览器报 CORS 错误先看响应头有没有这一行。callback参数支持 JSONP如果前端用了 jQuery 的$.ajax且请求跨域可以靠它绕过 CORS。4.4 电脑端适配的两个坑部署第二版时遇到最多的坑一个是图片懒加载在电脑端失灵另一个是列表页滚动条出现在错误容器里。懒加载失灵的原因是loadinglazy在部分 Windows 浏览器下对首屏图片不生效表现为轮播图空白。解决办法是把首屏 banner 的图片改成link relpreload预加载。滚动条问题则是高度计算时没用calc(100vh - 头部高度)导致电脑端页面过长。5. 验证数据结构与排查安装无响应5.1 用 curl 快速验证 appstore.php 的返回部署完成后先用 curl 验证后端返回的 JSON 结构是否正确这一步能帮你快速区分是数据问题还是前端渲染问题。curl -s http://127.0.0.1/appstore.php | jq .[0] | {name, bundleId, version}如果返回的name和version符合预期说明 plist 解析链路正常。这是一套典型的搭建流程改配置、清缓存、验证输出。看不到输出时先检查 PHP-FPM 是否启动了simplexml扩展再检查 uploads 目录的权限最后确认 Nginx 的 fastcgi_param 路径没有写错。5.2 页面正常但点击安装没反应页面列表渲染正常但点击安装按钮没有拉起安装器这是预览系统部署后最典型的问题。排查顺序从上到下现象原因处理方式安装按钮点击后跳转空白页itms-services 链接格式不对确认链接为itms-services://?actiondownload-manifesturlhttps://你的域名/app.plist弹出「无法连接到」提示plist 中 ipa 地址不是 https安装描述文件所在的域名和 ipa 下载地址必须全部为 https部分设备安装失败plist 未设置正确的 Content-Type检查 Nginx 配置里的plistlocation 是否生效一直转圈不开始下载ipa 文件路径 404访问 assets.url 看是否能直接下载第二个场景最容易踩坑因为预览系统本身是国内软件源很多人的 ipa 存在国内服务器的 http 地址上。iOS 的安装描述文件强制要求域名是 https这是系统层面的限制无法绕过。解决方式是把 ipa 文件放到支持 https 的对象存储或者给服务器配置 SSL 证书。补充一个调试技巧Safari 的开发者模式里可以看到 itms-services 链接的完整跳转链。如果发现 plist 请求返回的是 JSON 而不是 XML说明 Nginx 的location ~* \.(plist|ipa)$规则没生效此时在浏览器直接打开 plist 地址内容应该以 XML 格式渲染而不是纯文本。最后一处细节预览页面上的安装按钮第二版在电脑端 hover 时会显示一个 tooltip内容是「点击后用 iOS 扫码安装」。这个提示的判定条件是navigator.platform是否为 iPhone/iPad桌面端只展示提示而不触发安装跳转把真正的安装动作留给了手机扫码。如果你自己改造可以把扫码链接做成 encodeURIComponent 的短链方便分享到群里。本文还有配套的精品资源点击获取
