反馈已提交

网络繁忙

部署 App 自定义发布平台

  • 文档创建者:Carly
  • 编辑次数:5次
  • 最近更新:Carly 于 2020-08-04
  • 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

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服