最新历史版本 :部署App自定义发布平台 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

用户希望自定义 App 发布平台,保留自己的企业特色,方便下载管理,方便内部员工使用。如下图所示:

2020-06-09_15-30-55.png

1.2 实现思路

使用服务器储存 App 安装包,将安装包下载地址嵌入到一个 HTML 页面,部署 App 自定义发布平台。

2. 示例编辑

2.1 下载安装包

打开 「帆软市场」>「用户中心」>「App」 打包,将打包好的 App 安装包下载到本地,如下图所示:

2020-06-09_14-47-29.png

2.2 获取 Android 下载路径

将下载的 Android 安装包文件放置到服务器上,获得下载路径:xxx/xx.apk

2.3 获取 iOS 下载路径

2.3.1 上传安装包

将下载的iOS 安装包文件放置到服务器上,获得下载路径:http://xxx/xx.ipa

2.3.2 设置 onlineSetup.plist 文件

新建onlineSetup.plist文件,用于描述在线安装时的提示文字和安装包的地址,内容如下:

点击下载并解压文件:onlineSetup.rar

注:代码中注释处需要根据您的需求自行修改。

<?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>1.这里写步骤2.3.1中得到的 ios 安装包下载地址../xxxx.ipa</string>
                </dict>
            </array>
            <key>metadata</key>
            <dict>
                <key>bundle-identifier</key>
                <string>2.这里写bundleID(oem打包时的包名)</string>
                <key>bundle-version</key>
                <string>3.这里写版本号,随意</string>
                <key>kind</key>
                <string>software</string>
                <key>title</key>
                <string>4.这里写标题,可以随意的</string>
            </dict>
        </dict>
    </array>
</dict>
</plist>

onlineSetup.plist文件放置到服务器上,获得下载路径:../onlineSetup.plist

注:该路径必须要有有效签名的 https 链接,否则无法在线安装。

2.3.3 获得下载路径地址

最终 iOS 下载路径为:itms-services://?action=download-manifest&url=../onlineSetup.plist

url=后面拼接的是2.3.2 节得到的 plist 文件的下载路径。

2.4 获取图标下载路径

准备 App 图标、iOS 图标、Android 图标图片,并上传至服务器,获得图片下载地址。

点击下载图片:图标.rar

2.5 自定义下载页面

新建test.html文件,定义下载页面的布局和内容,内容如下:

点击下载文件:test.html

注:代码中注释处需要根据您的需求自行修改。

<!DOCTYPE html>
<html>
<head>
<!-- 设置下载页标题,背景,大小,字体 -->
    <title>数据分析</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body {
            text-align: center;
            font-size: 5px;
        }
        .oem-main-container{
            margin-top: 50px;
        }
        .oem-text-hint {
            color: #999999;
            font-size: small;
        }
 
        .oem-text-title {
            color: #1FADE5;
            font-size: medium;
        }
 
        .oem-item-wrapper {
            height: 70px;
        }
 
        .oem-entry {
            margin-top: 15px;
        }
 
        .oem-entry-ios {
            border-radius: 10px;
            margin: 0 auto;
            text-align: left;
            vertical-align: center;
            width: 80%;
            height: 70px;
            background-color: #35CBF6;
            font-size: medium;
            color: white;
        }
 
        .oem-entry-android {
            border-radius: 10px;
            margin: 0 auto;
            text-align: left;
            vertical-align: center;
            width: 80%;
            height: 70px;
            background-color: #21DC9B;
            font-size: large;
            color: white;
        }
 
        .oem-phone-logo {
            width: 15%;
            height: 15%;
        }
 
        .oem-phone-icon-panel {
            width: 50px;
            height: 50px;
            background-color: #FFFFFF;
            border-radius: 8px;
        }
 
        .oem-phone-icon {
            width: 36px;
            height: 36px;
            margin-left: 7px;
            margin-top: 7px;
        }
 
        .oem-phone-download {
            margin-left: 10%;
            width: 80%;
            text-decoration: none;
        }
 
        .oem-phone-item {
            /*float: left;*/
            margin-left: 5px;
        }
 
        .oem-center-item {
            position: relative;
            margin: 0 auto;
        }
 
        .oem-bottom {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            position: fixed;
            bottom: 0;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div class="oem-main-container">
    <div class="oem-center-item">
<!-- 设置 App 图标地址 -->
        <img
                class="oem-phone-logo"
                src=http://xxx.com/appoem_image.png
                alt="product"
        />
    </div>
<!-- 设置 Demo 名称 -->
    <span class="oem-text-title">demo</span>
    <br/>
<!-- 设置 App 版本 -->
    <span class="oem-text-hint">IOS 10.4.69/Android 10.4.69</span>
    <br/>
<!-- 设置 App 更新日期 -->
    <span class="oem-text-hint">2020-5-9 14:21:35</span>
    <div class="oem-entry">
<!-- 设置 iOS 安装包下载地址 -->
        <a
                class="oem-phone-download-ios"
                href=1.设置为2.3.3节获取的ipa下载地址
                download='ios'
        >
            <table class="oem-entry-ios">
                <tr>
                    <td>
                        <div class="oem-phone-item">
                            <div class="oem-phone-icon-panel">
<!-- 设置 iOS 图标地址 -->
                                <img
                                        class="oem-phone-icon"
                                        src="http://xxx.com/icon_ios.png"
                                />
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
<!-- 设置 iOS 安装包下载说明文字 -->
                            <span>iPhone企业版下载</span>
                            <br/>
<!-- 设置 iOS 安装包大小 -->
                            <span>大小:16.8M</span>
                        </div>
                    </td>
                </tr>
            </table>
        </a>
    </div>
    <!--<br style="clear: both"/>-->
    <div class="oem-entry">
<!-- 设置 Android 安装包下载地址 -->
        <a
                class="oem-phone-download-Android"
                href=2.apk下载地址
                download="android"
        >
            <table class="oem-entry-android">
                <tr>
                    <td>
                        <div class="oem-phone-item">
                            <div class="oem-phone-icon-panel">
<!-- 设置 Android 图标地址 -->
                                <img
                                        class="oem-phone-icon"
                                        src="http://xxx.com/icon_android.png"
                                        alt="product"
                                />
                            </div>
                        </div>
                    </td>
                    <td>
                        <div>
<!-- 设置 Android 安装包下载说明文字 -->
                            <span>Android版下载</span>
                            <br/>
<!-- 设置 Android 安装包大小 -->
                            <span>大小:36.4M</span>
                        </div>
                    </td>
                </tr>
            </table>
        </a>
    </div>
<!-- 设置版权信息 -->
    <div class="oem-bottom">
        <span class="oem-text-hint">Copyright@2006-2017 FanRuan Software Co.,Ltd</span>
        <br/>
        <span class="oem-text-hint">All Rights Reserved</span>
    </div>
</div>
</body>
</html>

test.html文件保存到服务器,即可获取到下载路径。

例如将 html 文件放到报表服务器 webroot 目录下,则下载路径为http://ip:port/webroot/test.html

2.6 效果预览

手机端访问2.5 节获得的下载链接,即可打开自定义的 App 下载页面,如下图所示:

2020-06-09_15-30-55.png