部署 App 自訂發佈平台- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 預期效果

使用者希望自訂 App 發布平台，保留自己的企業特色，方便下載管理，方便內部員工使用。如下圖所示：

1_1686880253.6927178.png

1.2 實現思路

使用伺服器儲存 App 安裝包，將安裝包下載位址嵌入到一個 HTML 頁面，部署 App 自訂發布平台。

2. 範例

2.1 下載安裝包

開啟「帆軟市場」>「使用者中心」>「App」打包，將打包好的 App 安裝包下載到本地，如下圖所示：

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.zip

注：代碼中注釋處需要根據您的需求自行修改。

<?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.zip

注：代碼中注釋處需要根據您的需求自行修改。

<!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 下載頁面，如下圖所示：