HTML5 Plus應用概述

HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App可以通過擴展的JS API任意調用手機的原生能力，實現與原生App同樣強大的功能和性能。

HTML5 Plus規範

通過HTML5開發移動App時，會發現HTML5很多能力不具備。爲彌補HTML5能力的不足，在W3C中國的指導下成立了HTML5中國產業聯盟www.html5plus.org組織，推出HTML5+規範。目前該聯盟已經掛靠在工信部信通院標準所下，相關標準已經成爲行業標準。
HTML5+規範是一個開放規範，隸屬於工信部，允許三方瀏覽器廠商或其他手機runtime製造商實現。
HTML5+擴展了JavaScript對象plus，使得js可以調用各種瀏覽器無法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。
除了功能外，HTML5+很重要的特點是提供了原生的渲染能力，通過plus.webview、plus.nativeObj、plus.nativeUI，讓開發者可以使用js來調用原生渲染能力，實現體驗的大幅提升。
原生的api多達40萬，HTML5+的封裝並非把40萬api都封裝了一遍，而是分成了2個層面：

HTML5Plus規範：常用的擴展能力，比如二維碼、語音輸入，都封裝到了規範中，同時實現了Android和iOS的解析引擎，使得開發者的代碼編寫一次，可跨平臺運行。
Native.js是另一項創新技術。手機OS的原生API有四十多萬，大量的API無法被HTML5使用。Native.js把幾十萬原生API映射成了js對象，通過js可以直接調ios和android的原生API。這部分就不再跨平臺，寫法分別是plus.ios和plus.android，比如調ios game center，或在android手機桌面創建快捷方式，這些都是平臺專有的api。

Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，將一個原生對象android.content.Intent映射爲js對象obj，然後在js裏操作obj對象的方法屬性就可以了。
Native.js的詳細教程可以參考：5+ App開發Native.js入門指南
在5+App裏，同時包含了HTML5Plus規範和Native.js的實現，開發者可以在5+App裏自由使用相關技術。

5+ App概念解析

首先開發者需要清楚你要做什麼，是一個mobile web項目，運行在瀏覽器裏？還是要做一個app，安裝和運行在手機上？或者要把一個mobile web項目打包成app？

做一個mobile web項目
在這個模式下，開發者用不到HTML5Plus，使用標準的HTML5語法，運行在瀏覽器裏。這不算5+ App。
此時開發者仍然可以使用HBuilder這個開發工具，新建項目時選擇web項目。
開發者也仍然可以使用DCloud提供的mui開源框架，來簡化ui的開發。
但這就是一個普通的web項目，b/s方式，不可脫線運行，不能調用HTML5Plus的增加api。
做一個正統的app
傳統意義上的app，是c/s方式的，它的程序要安裝和運行在手機上，不通過瀏覽器在線下載。
此時開發者在HBuilder裏新建項目時，選擇“移動App”。（HBuilderX裏選擇5+App）
在App項目下編寫的HTML、js等文件，是會被打包到原生的安裝包（Android是apk包、iOS是ipa包）裏的。
此時本地的js和服務器通過ajax交互，由服務器按接口方式給出數據（一般是json），然後客戶端的js文件解析json，並根據本地的業務邏輯來渲染頁面和執行功能。
所以請不要在App項目中放置運行在服務器端的php等文件。
使用wap2app打包mobile web項目爲app
如果開發者想把一個做好的mobile web站，方便快速的打包成app，那麼要使用DCloud的wap2app框架。
在HBuilder中新建項目時，選wap2app項目，把mobile web站的url輸入進去，參考框架的教程來配置。
wap2app不同於普通的web打包技術，wap2app可真正做達到原生應用的功能和性能體驗。
具體教程另見：文檔中心-wap2app，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
wap2app屬於5+app，它底層也是強大的HTML5Plus規範和Native.js在支撐。
wap2app項目下的所有文件，也都是打包在本機運行的。
如果你想開發一次，全端覆蓋，那麼需要使用DCloud的另一個產品uni-app

HTML5+ 應用架構

HTML5+ 規範 API 及demo示例

最新規範請參考http://www.html5plus.org/#specification
手機端體驗各個API的實現效果，ios手機在Appstore搜索Hello H5+，Android手機下載地址。
在HBuilder中新建移動App，選Hello H5+，即可看到這個demo的源代碼。

開發環境HBuilder

HBuilder內置HTML5+ APP開發環境，提供一套完整的移動應用開發解決方案。內置HTML5+ API語法提示，提高開發效率；集成真機運行環境，方便開發後即時在真機上查看運行效果；集成應用雲端打包系統，不用部署xcode和Android sdk就可以打包應用。使開發者只需要使用HTML5、Javascript、CSS技術就可以快速開發跨平臺的移動應用。
下載地址：http://www.dcloud.io/

平臺支持

iOS 5.0及以上
Android 2.3及以上

手把手教你開發HelloWorld（重點，重點，重點，必須說三遍）

創建HelloWorld應用

啓動HBuilder（下載地址：http://www.dcloud.io/）；
在菜單欄中選擇“文件”-> “新建”->“移動App”（快捷鍵Ctrl+N A），打開“創建移動App”對話框，在應用名稱中輸入“HelloWorld”；
如果是HBuilderX，則新建項目時選5+App。
注意新建移動App需要聯網分配一個appid，在真機聯調、打包發行時都需要這個ID，所以不聯網無法創建移動App。
創建完成後，會在項目管理器中顯示新建的“HelloWorld”項目

manifest.json（超級重要的配置文件）

在項目管理器中雙擊“manifest.json”文件，打開應用配置頁面：

對於要打包的原生應用而言，其各種配置均在此處。具體配置教程見：Manifest.json文件配置，或者點擊配置頁面上的“manifest文件配置指南”鏈接。

配置鏈接：https://ask.dcloud.net.cn/article/94

配置如下：

概述

manifest.json文件是5+移動App的配置文件，用於指定應用的顯示名稱、圖標、入口頁面等信息。用戶可通過HBuilder|HBuilderX的可視化界面視圖進行配置，也可在源碼視圖中根據以下規範直接修改。
manifest.json文件根據w3c的webapp規範制定，plus節點下內容爲HTML5 Plus擴展規範，其下包括iOS和Android子節點，內容來源分別爲iOS和Android原生打包所要求的參數，用於對5+移動App打包爲ipa或apk安裝包進行配置。
uni-app項目的manifest.json規範參考：https://uniapp.dcloud.io/collocation/manifest

鏈接：https://uniapp.dcloud.io/collocation/manifest

屬性	類型	描述
android	Object	Android 應用配置，詳見: 完整 manifest.json
ios	Object	iOS 應用配置，詳見: 完整 manifest.json
sdkConfigs	Object	SDK配置，僅打包生效詳見
orientation	Array	重力感應、橫豎屏配置，可取值："portrait-primary"：豎屏正方向；"portrait-secondary"：豎屏反方向；"landscape-primary"：橫屏正方向；"landscape-secondary"：橫屏反方向。

App SdkConfigs

三方原生SDK配置。三方SDK的使用需要向這些SDK提供商申請，並配置參數到此處。可在HBuilderX可視化界面（App SDK配置）輸入配置，此配置僅雲打包後生效，本地打包需自行在原生工程中配置。

屬性	類型	描述
oauth	Object	授權登錄，配置後可調用 uni.login 進行登錄操作，目前支持的授權登錄平臺有：QQ、微信、新浪微博。
share	Object	分享，配置後可調用 uni.share 進行分享，目前支持QQ、微信、新浪微博等分享，具體配置詳見。
push	Object	push配置，使用方式詳見，目前支持：uniPush、個推、小米推送，注意App僅支持一種 push 方式，配置多個 push 無效，建議使用 uniPush，支持多廠商推送。
payment	Object	三方支付配置，配置後可調用 uni.payment 進行支付，目前支持微信支付、支付寶支付、蘋果內購，具體配置詳見。
statics	Object	統計配置，目前僅支付友盟統計，詳見，在uni-app中只用 plus.statistic 進行調用。
speech	Object	語音識別配置，支持訊飛語音、百度語音，詳見，在uni-app中只用 plus.speech 進行調用。
maps	Object	原生地圖配置，目前僅支持高德地圖，申請方式可參考：地圖插件配置。

nvue

nvue 頁面佈局初始設置

屬性	類型	描述
flex-direction	String	flex 成員項的排列方向，支持項，row：從左到右； row-reverse：從右到左；column：從上到下；column-reverse：與 column 相反，默認值 column。

h5

屬性	類型	說明
title	String	頁面標題，默認使用 manifest.json 的 name
template	String	index.html模板路徑，相對於應用根目錄，可定製生成的 html 代碼。參考：自定義模板
router	Object	參考：router
async	Object	參考：async
devServer	Object	開發環境 server 配置，參考：devServer
publicPath	String	引用資源的地址前綴，僅發佈時生效。參考：publicPath
sdkConfigs	String	SDK配置，例如地圖... 參考：sdkConfigs
optimization	Object	打包優化配置（HBuilderX 2.1.5 以上支持），參考optimization

自定義模板

需要使用自定義模板的場景，通常有以下幾種情況：

調整頁面 head 中的 meta 配置
補充 SEO 相關的一些配置（僅首頁）
加入百度統計等三方js

使用自定義模板時，1. 工程根目錄下新建一個html文件；2. 複製下面的基本模板內容，到這個html文件，在此基礎上修改meta和引入js；3. 在 `manifest.json->h5->template` 節點中關聯這個html文件的路徑。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

在hello uni-app示例中有一個template.h5.html文件，即是此用途。

關於SEO的補充說明

H5平臺是SPA單頁應用，普通的SEO信息即加meta字段只能在，自定義的模板html裏配置首頁。

但SEO的時代在變，現在更有效的方式，是用uni-app同時發佈一版百度小程序，這個搜索權重更高。DCloud的ask社區的H5版也是uni-app做的，同時發佈了百度小程序，權重更高，每天來自百度的搜索量非常多。是一個可現身說法的好案例。

router

屬性	類型	默認值	說明
mode	String	hash	路由跳轉模式，支持 hash、history
base	String	/	應用基礎路徑，例如，如果整個單頁應用服務在 /app/ 下，然後 base 就應該設爲 "/app/"

注意：history 模式發行需要後臺配置支持，詳見：history 模式的後端配置

async

屬性	類型	默認值	說明
loading	String	AsyncLoading	頁面 js 加載時使用的組件（需註冊爲全局組件）
error	String	AsyncError	頁面 js 加載失敗時使用的組件（需註冊爲全局組件）
delay	Number	200	展示 loading 加載組件的延時時間（頁面 js 若在 delay 時間內加載完成，則不會顯示 loading 組件）
timeout	Number	3000	頁面 js 加載超時時間（超時後展示 error 對應的組件）

devServer

屬性	類型	默認值	說明
https	Boolean	false	啓用 https 協議
disableHostCheck	Boolean	false	禁用 Host 檢查

Tips：`uni-app` 中 `manifest.json->h5->devServer` 實際上對應 `webpack` 的 devServer，鑑於 manifest 爲 json 文件，故 `webpack.config.js->devServer` 配置項下的簡單類型屬性均可在`manifest.json->h5->devServer`節點下配置，funciton 等複雜類型暫不支持。

publicPath

配置 publicPath 爲 cdn 資源地址前綴，這樣編譯出來的 html 文件，引用的 js，css 路徑會自動變成 cdn 上的地址。

示例

以 hello-uniapp 發佈 H5 時爲例

未配置 publicPath 時，發佈時 index.html 中的結果：

<script src=/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=/h5/static/js/index.34e8497d.js>

配置 publicPath 爲 https://www.cdn.com/h5/（無效地址僅用作示例）後，發佈時 index.html 中的結果：

<script src=https://www.cdn.com/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=https://www.cdn.com/h5/static/js/index.34e8497d.js>

注意

打包部署後，在服務器上開啓 gzip 可以進一步壓縮文件。具體的配置，可以參考網上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

sdkconfig

示例

"h5": {
    "sdkConfigs": {
        "maps": {
            "qqmap": {
                //騰訊地圖祕鑰（key）
                "key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"
            }
        }
    }
}

optimization

屬性	類型	默認值	說明
prefetch	Boolean	false	資源預取
preload	Boolean	false	資源預加載
treeShaking	Object		搖樹優化，根據項目需求，動態打包框架所需的組件及API，保持框架代碼最精簡化，參考treeShaking

treeShaking

屬性	類型	默認值	說明
enable	Boolean	false	是否啓用搖樹優化

示例：

"h5": {
    "optimization": {
        "treeShaking": {
            "enable": true
        }
    }
}

Tips：關於搖樹優化（treeShaking）原理及優化結果，參考：https://ask.dcloud.net.cn/article/36279

mp-weixin

屬性	類型	說明
appid	String	微信小程序的AppID，登錄 https://mp.weixin.qq.com 申請
usingComponents	Boolean	是否啓用自定義組件模式，`v1.8.0+`，默認爲false，編譯模式區別詳情
setting	Object	微信小程序項目設置，參考setting
functionalPages	Boolean	微信小程序是否啓用插件功能頁，默認關閉
requiredBackgroundModes	Array	微信小程序需要在後臺使用的能力,詳見
plugins	Object	使用到的插件，詳見
resizable	Boolean	在iPad上小程序是否支持屏幕旋轉，默認關閉
navigateToMiniProgramAppIdList	Array	需要跳轉的小程序列表，詳見
permission	Object	微信小程序接口權限相關設置，比如申請位置權限必須填此處詳見
workers	String	Worker 代碼放置的目錄。詳見

setting

編譯到微信小程序平臺下的項目設置。

屬性	類型	說明
urlCheck	Boolean	是否檢查安全域名和 TLS 版本
es6	Boolean	ES6 轉 ES5
postcss	Boolean	上傳代碼時樣式是否自動補全
minified	Boolean	上傳代碼時是否自動壓縮

mp-alipay

屬性	類型	說明
usingComponents	Boolean	是否啓用自定義組件模式，`v2.0+`，默認爲false，編譯模式區別詳情

mp-baidu

屬性	類型	說明
appid	String	百度小程序的 AppID，登錄 https://smartprogram.baidu.com/docs/introduction/enter_application/ 申請
usingComponents	Boolean	是否啓用自定義組件模式，`v2.0+`，默認爲false，編譯模式區別詳情
requiredBackgroundModes	Array	小程序需要在後臺使用的能力，目前支持背景音頻播放，"requiredBackgroundModes": ["audio"]，詳見
prefetches	Array	預請求的所有url的列表，詳見

mp-toutiao

屬性	類型	說明
appid	String	頭條小程序的 AppID，登錄 https://developer.toutiao.com/ 申請
setting	Object	頭條小程序項目設置，參考頭條小程序項目設置
usingComponents	Boolean	是否啓用自定義組件模式，`v2.0+`，默認爲false，編譯模式區別詳情
navigateToMiniProgramAppIdList	Array	需要跳轉的小程序列表，詳見

頭條小程序項目設置

屬性	類型	說明
urlCheck	Boolean	是否檢查安全域名和 TLS 版本
es6	Boolean	ES6 轉 ES5
postcss	Boolean	上傳代碼時樣式是否自動補全
minified	Boolean	上傳代碼時是否自動壓縮

mp-qq

屬性	類型	說明
appid	String	qq 小程序的 AppID，登錄 https://q.qq.com 申請
requiredBackgroundModes	Array	小程序需要在後臺使用的能力，目前支持背景音頻播放，"requiredBackgroundModes": ["audio"]，詳見
navigateToMiniProgramAppIdList	Array	需要跳轉的小程序列表，詳見
permission	Object	小程序接口權限相關設置，比如申請位置權限必須填此處詳見
workers	String	Worker 代碼放置的目錄。詳見
groupIdList	String Array	需要打開羣資料卡的羣號列表，詳見button的open-type

mp-qq只支持自定義組件模式，不存在usingComponents配置

完整 manifest.json （重點內容）

{
    "appid": "__UNI__XXXXXX，創建應用時雲端分配的，不要修改。",
    "name": "應用名稱，如uni-app",
    "description": "應用描述",
    "versionName": "1.0.0",
    "versionCode": "100",
    // app-plus 節點是 5+App 特有配置，推薦在 HBuilderX 的 manifest.json 可視化界面操作完成配置。
    "app-plus": {
        // HBuilderX->manifest.json->模塊權限配置
        "modules": {
            "Contacts": {},
            "Fingerprint": {},
            "Maps": {},
            "Messaging": {},
            "OAuth": {},
            "Payment": {},
            "Push": {},
            "Share": {},
            "Speech": {},
            "Statistic": {},
            "VideoPlayer": {},
            "LivePusher": {}
        },
        "distribute": {
            // Android 與 iOS 證書相關信息均在打包時完成配置
            "android": {
                "packagename": "Android應用包名，如io.dcloud.uniapp",
                "keystore": "Android應用打包使用的密鑰庫文件",
                "password": "Android應用打包使用密鑰庫中證書的密碼",
                "aliasname": "Android應用打包使用密鑰庫中證書的別名",
                "schemes": [
                    "應用支持的scheme，大小寫相關，推薦使用小寫"
                ],
                "theme": "程序使用的主題",
                "android:name": "自定義程序入口類名",
                "custompermissions": "Boolean類型，是否自定義android權限，true表示自定義權限，只使用permissions下指定的android權限，不根據用戶使用的5+模塊自動添加android權限，false表示自動根據用戶使用的5+模塊自動添加android權限",
                "permissions": [
                    "要添加的額外的android權限，如<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\" />",
                    "<uses-permission android:name=\"com.android.launcher.permission.UNINSTALL_SHORTCUT\" />"
                ],
                "minSdkVersion": "apk支持的最低版本，默認值爲14",
                "targetSdkVersion": "apk的目標版本，默認值爲21"
            },
            "ios": {
                "appid": "iOS應用標識，蘋果開發網站申請的appid，如io.dcloud.uniapp",
                "mobileprovision": "iOS應用打包配置文件",
                "password": "iOS應用打包個人證書導入密碼",
                "p12": "iOS應用打包個人證書，打包配置文件關聯的個人證書",
                "devices": "iOS應用支持的設備類型，可取值iphone/ipad/universal",
                "urltypes": [{
                        "urlschemes": [
                            "hbuilder",
                            "必選，程序所支持的自定義協議名稱"
                        ],
                        "id": "可選，自定義協議的標識",
                        "icon": "可選，打開程序時顯示的圖標"
                    },
                    {
                        "urlschemes": [
                            "http",
                            "https",
                            "必選，程序所支持的自定義協議名稱，大小寫無關，推薦使用小寫"
                        ],
                        "id": "可選，自定義協議的標識",
                        "icon": "可選，打開程序時顯示的圖標"
                    }
                ],
                "frameworks": ["使用native.js調用API要引用的庫文件名稱，如CoreLocation.framework", "QuartzCore.framework"],
                "idfa": "true|false，是否使用廣告標識符，默認值爲false",
                "plistcmds": [
                    "Set :權限 使用權限的原因",
                    "Set :NSCameraUsageDescription 說明使用用戶相機的原因"
                ]
            },
            // HBuilderX->manifest.json->SDK配置
            "sdkConfigs": {
                "maps": {
                    // 地圖只能選一個，這裏選的是百度。
                    "baidu": {
                        "appkey_ios": "",
                        "appkey_android": ""
                    }
                },
                "oauth": {
                    // 微信登錄
                    "weixin": {
                        "appid": "",
                        "appsecret": ""
                    },
                    // QQ登錄
                    "qq": {
                        "appid": ""
                    },
                    // 新浪微博登錄
                    "sina": {
                        "appkey": "",
                        "appsecret": "",
                        "redirect_uri": ""
                    },
                    // 小米登錄
                    "xiaomi": {
                        "appid_ios": "",
                        "appsecret_ios": "",
                        "redirect_uri_ios": "",
                        "appid_android": "",
                        "appsecret_android": "",
                        "redirect_uri_android": ""
                    }
                },
                "payment": {
                    // Apple應用內支付
                    "appleiap": {},
                    // 支付寶支付
                    "alipay": {
                        "scheme": ""
                    },
                    // 微信支付
                    "weixin": {
                        "appid": ""
                    }
                },
                "push": {
                    // 推送只能選擇一個，這裏選的是個推。
                    "igexin": {
                        "appid": "",
                        "appkey": "",
                        "appsecret": ""
                    }
                },
                "share": {
                    // 微信分享
                    "weixin": {
                        "appid": ""
                    },
                    // 新浪微博分享
                    "sina": {
                        "appkey": "",
                        "appsecret": "",
                        "redirect_uri": ""
                    },
                    // 分享到QQ
                    "qq": {
                        "appid": ""
                    }
                },
                "statics": {
                    // 友盟統計
                    "umeng": {
                        "appkey_ios": "",
                        "channelid_ios": "",
                        "appkey_android": "",
                        "channelid_android": ""
                    }
                }
            },
            // 屏幕方向
            "orientation": [
                "portrait-primary",
                "landscape-primary",
                "portrait-secondary",
                "landscape-secondary"
            ],
            // HBuilderX->manifest.json->圖標配置
            "icons": {
                "ios": {
                    "appstore": "必選, 1024x1024, 提交app sotre使用的圖標",
                    "iphone": {
                        "app@2x": "可選，120x120，iOS7-11程序圖標（iPhone4S/5/6/7/8）",
                        "app@3x": "可選，180x180，iOS7-11程序圖標（iPhone6plus/7plus/8plus/X）",
                        "spotlight@2x": "可選，80x80，iOS7-11 Spotlight搜索圖標（iPhone5/6/7/8）",
                        "spotlight@3x": "可選，120x120，iOS7-11 Spotlight搜索圖標（iPhone6plus/7plus/8plus/X）",
                        "settings@2x": "可選，58x58，iOS5-11 Settings設置圖標（iPhone5/6/7/8）",
                        "settings@3x": "可選，87x87，iOS5-11 Settings設置圖標（iPhone6plus/7plus/8plus/X）",
                        "notification@2x": "可選，40x40，iOS7-11 通知欄圖標（iPhone5/6/7/8）",
                        "notification@3x": "可選，60x60，iOS7-11 通知欄圖標（iPhone6plus/7plus/8plus/X）"
                    },
                    "ipad": {
                        "app": "可選，76x76，iOS7-11程序圖標",
                        "app@2x": "可選，152x152，iOS7-11程序圖標（高分屏）",
                        "proapp@2x": "可選，167x167，iOS9-11程序圖標（iPad Pro）",
                        "spotlight": "可選，40x40，iOS7-11 Spotlight搜索圖標",
                        "spotlight@2x": "可選，80x80，iOS7-11 Spotlight搜索圖標（高分屏）",
                        "settings": "可選，29x29，iOS5-11 設置圖標",
                        "settings@2x": "可選，58x58，iOS5-11 設置圖標（高分屏）",
                        "notification": "可選，20x20，iOS7-11 通知欄圖標",
                        "notification@2x": "可選，40x40，iOS7-11 通知欄圖標（高分屏）"
                    }
                },
                "android": {
                    "mdpi": "必選，48x48，普通屏程序圖標",
                    "ldpi": "必選，48x48，大屏程序圖標",
                    "hdpi": "必選，72x72，高分屏程序圖標",
                    "xhdpi": "必選，96x96，720P高分屏程序圖標",
                    "xxhdpi": "必選，144x144，1080P高分屏程序圖標",
                    "xxxhdpi": "可選，192x192"
                }
            },
            // HBuilderX->manifest.json->啓動圖配置
            "splashscreen": {
                "ios": {
                    "iphone": {
                        "retina35": "可選，640x960，3.5英寸設備(iPhone4)啓動圖片",
                        "retina40": "可選，640x1136，4.0英寸設備(iPhone5)啓動圖片",
                        "retina40l": "可選，1136x640，4.0英寸設備(iPhone5)橫屏啓動圖片",
                        "retina47": "可選，750x1334，4.7英寸設備（iPhone6）啓動圖片",
                        "retina47l": "可選，1334x750，4.7英寸設備（iPhone6）橫屏啓動圖片",
                        "retina55": "可選，1242x2208，5.5英寸設備（iPhone6Plus）啓動圖片",
                        "retina55l": "可選，2208x1242，5.5英寸設備（iPhone6Plus）橫屏啓動圖片",
                        "iphonex": "可選，1125x2436，iPhoneX啓動圖片",
                        "iphonexl": "可選，2436x1125，iPhoneX橫屏啓動圖片"
                    },
                    "ipad": {
                        "portrait": "可選，768x1004，需支持iPad時必選，iPad豎屏啓動圖片",
                        "portrait-retina": "可選，1536x2008，需支持iPad時必選，iPad高分屏豎屏圖片",
                        "landscape": "可選，1024x748，需支持iPad時必選，iPad橫屏啓動圖片",
                        "landscape-retina": "可選，2048x1496，需支持iPad時必選，iPad高分屏橫屏啓動圖片",
                        "portrait7": "可選，768x1024，需支持iPad iOS7時必選，iPad豎屏啓動圖片",
                        "portrait-retina7": "可選，1536x2048，需支持iPad iOS7時必選，iPad高分屏豎屏圖片",
                        "landscape7": "可選，1024x768，需支持iPad iOS7時必選，iPad橫屏啓動圖片",
                        "landscape-retina7": "可選，2048x1536，需支持iPad iOS7時必選，iPad高分屏橫屏啓動圖片"
                    }
                },
                "android": {
                    "mdpi": "必選，240x282，普通屏啓動圖片",
                    "ldpi": "必選，320x442，大屏啓動圖片",
                    "hdpi": "必選，480x762，高分屏啓動圖片",
                    "xhdpi": "必選，720x1242，720P高分屏啓動圖片",
                    "xxhdpi": "必選，1080x1882，1080P高分屏啓動圖片"
                }
            }
        },
        // HBuilderX->manifest.json->啓動圖配置->啓動界面選項
        "splashscreen": {
            "waiting": true,
            "autoclose": true,
            "delay": 0
        },
        "error": {
            "url": "頁面加載錯誤時打開的頁面地址，可以是網絡地址，也可以是本地地址"
        },
        "useragent": {
            "value": "自定義ua字符串",
            "concatenate": "是否爲追加模式"
        },
        "useragent_ios": {
            "value": "與useragent的value一致，僅在iOS平臺生效，當useragent和useragent_ios同時存在時優先級useragent_ios>useragent",
            "concatenate": "與useragent的concatenate一致，僅iOS平臺生效"
        },
        "useragent_android": {
            "value": "與useragent的value一致，僅在Android平臺生效，當useragent和useragent_android同時存在時優先級useragent_android>useragent",
            "concatenate": "與useragent的concatenate一致，僅Android平臺生效"
        },
        "ssl": "accept|refuse|warning，訪問https網絡時對非受信證書的處理邏輯",
        "runmode": "normal",
        "appWhitelist": [
            "Android平臺下載apk地址白名單列表",
            "iOS平臺跳轉appstore地址白名單列表"
        ],
        "schemeWhitelist": [
            "URL Scheme白名單列表，如：mqq" //iOS要求預先指定要打開的App名單，不能隨意調用任何App
        ],
        "channel": "渠道標記，可在DCloud開發者中心查看各渠道應用的統計數據",
        "adid": "廣告聯盟會員id，在DCloud開發者中心申請後填寫",
        "safearea": { //安全區域配置，僅iOS平臺生效  
            "background": "#CCCCCC", //安全區域外的背景顏色，默認值爲"#FFFFFF"  
            "bottom": { // 底部安全區域配置  
                "offset": "none|auto" // 底部安全區域偏移，"none"表示不空出安全區域，"auto"自動計算空出安全區域，默認值爲"none"  
            },
            "left": { //左側安全區域配置（橫屏顯示時有效）  
                "offset": "none|auto"
            },
            "right": { //右側安全區域配置（橫屏顯示時有效）  
                "offset": "none|auto"
            }
        },
        "softinput": {
            "navBar": "auto", //是否顯示iOS軟鍵盤上的“完成”導航條
            "mode": "adjustResize|adjustPan" //軟鍵盤彈出模式，
        },
    "popGesture": "none" //iOS上是否支持屏幕左邊滑動關閉當前頁面。默認是可關閉。設爲none則不響應左滑動畫。
    },
    // 快應用特有配置
    "quickapp": {},
    // 微信小程序特有配置
    "mp-weixin": {
        "appid": "wx開頭的微信小程序appid"
    },
    // 百度小程序特有配置
    "mp-baidu": {
        "appid": "百度小程序appid"
    },
    // 頭條小程序特有配置
    "mp-toutiao": {
        "appid": "頭條小程序appid"
    },
    "h5": {
        "title": "演示", //頁面標題，默認使用 manifest.json 的 name
        "template": "index.html", //index.html模板路徑，相對於應用根目錄，可定製生成的 html 代碼
        "router": {
            "mode": "history", //路由跳轉模式，支持 hash|history ,默認 hash
            "base": "/hello/" //應用基礎路徑，例如，如果整個單頁應用服務在 /app/ 下，然後 base 就應該設爲 "/app/"
        },
        "async": { //頁面js異步加載配置
            "loading": "AsyncLoading", //頁面js加載時使用的組件（需註冊爲全局組件）
            "error": "AsyncError", //頁面js加載失敗時使用的組件（需註冊爲全局組件）
            "delay": 200, //展示 loading 加載組件的延時時間（頁面 js 若在 delay 時間內加載完成，則不會顯示 loading 組件）
            "timeout": 3000 //頁面js加載超時時間（超時後展示 error 對應的組件）
        }
    }
}

更多配置相關的說明，請參考 manifest.json文檔說明中的描述。可能節點的位置與普通的 5+App 有差異，請按照配置的名稱進行對應。

FAQ

Q：iOS 應用調用相機等權限時，彈出的提示語如何修改？
A：在 manifest.json 可視化界面-App模塊權限配置-iOS隱私信息訪問的許可描述

manifest.json

以下是完整的manifest.json配置文件，在HBuilder|HBuilderX中切換到“源碼視圖”按以下規範進行手動配置。

模塊標識	模塊名稱
Bluetooth	低功耗藍牙
Contacts	通訊錄
Fingerprint	指紋識別
iBeacon	iBeacon
LivePusher	直播推流
Maps	地圖
Messaging	短彩信、郵件
OAuth	登錄鑑權
Payment	支付
Push	消息推送
Speech	語言識別
Statistic	統計
SQLite	數據庫
VideoPlayer	視頻播放

20191107 關於mui的app打包

HTML5 Plus應用概述

HTML5 Plus規範

5+ App概念解析

HTML5+ 應用架構

HTML5+ 規範 API 及demo示例

開發環境HBuilder

平臺支持

手把手教你開發HelloWorld（重點，重點，重點，必須說三遍）

創建HelloWorld應用

manifest.json（超級重要的配置文件）

配置鏈接：https://ask.dcloud.net.cn/article/94

概述

使用自定義模板時，1. 工程根目錄下新建一個html文件；2. 複製下面的基本模板內容，到這個html文件，在此基礎上修改meta和引入js；3. 在 manifest.json->h5->template 節點中關聯這個html文件的路徑。

Tips：uni-app 中 manifest.json->h5->devServer 實際上對應 webpack 的 devServer，鑑於 manifest 爲 json 文件，故 webpack.config.js->devServer 配置項下的簡單類型屬性均可在manifest.json->h5->devServer節點下配置，funciton 等複雜類型暫不支持。

配置 publicPath 爲 cdn 資源地址前綴，這樣編譯出來的 html 文件，引用的 js，css 路徑會自動變成 cdn 上的地址。

打包部署後，在服務器上開啓 gzip 可以進一步壓縮文件。具體的配置，可以參考網上的分享：https://juejin.im/post/5af003286fb9a07aac24611b

完整 manifest.json （重點內容）

allowsInlineMediaPlayback

是否允許html頁面中video標籤非全屏播放，僅iOS平臺有效 Boolean類型，值爲true表示允許，false表示不允許，默認值爲不允許。 html頁面的video標籤必須添加webkit-playsinline屬性才支持非全屏播放，如下示例：

<video controls="controls" src="http://.../x.mp4" webkit-playsinline>

此配置與VideoPlayer（視頻播放）控件功能無關

iOS平臺打包配置，uni-app項目對應爲"app-plus" -> "distribute" -> "ios"節點

Android平臺打包配置，uni-app項目對應爲"app-plus" -> "distribute" -> "android"節點

雲端打包時要求所有圖標路徑都相對於應用下".manifest"目錄。提交雲端打包時需做路徑轉換，請在HBuilderX的manifest.json可視化界面“（App）啓動圖配置”中操作設置

發行打包（重要，重要，,重要）

通過菜單欄中的“發行”->“App打包”，打開“App雲端打包”對話框提交。 注意只有App項目纔可以打包。

對於iOS平臺，可以選擇越獄包或正式包（Appstore專用或企業證書），前者只能安裝在已越獄的設備上，後者則可通過iDP證書打包提交到Appstore發佈、或通過iEP證書打包在企業內部發布。

Android發佈（重點，重點，重點）

對於Android平臺，可以選擇使用DCloud生成的公用證書或自己生成的證書，兩者不影響安裝包的發佈，唯一的差別就是證書中開發者和企業信息不同。

生成Android簽名證書

（使用DCloud公用證書可忽略此操作）確保電腦上安裝了JRE，我們將使用JRE自帶的創建和管理數字證書的工具Keytool。使用以下命令生成證書：

keystore helloworld.keystore 表示生成的證書，可以加上路徑（默認在用戶主目錄下）；

alias helloworld 表示證書的別名是helloworld；

keyalg RSA 表示採用的RSA算法；

validity 10000 表示證書的有效期是10000天。

配置打包信息

使用DCloud公用證

App包名：Android應用包名，使用反向域名風格的字符串，如“com.domainname.appname”。

查看打包狀態

已經打好的安裝包，允許開發者在指定天內下載指定次數。超時或超次後服務器端會清除文件。

UI框架

開發資源

API手冊：HTML5+規範

HelloH5+示例應用，應用中包括幾乎所有plus API的示例：

iOS：Appstore中搜索Hello H5+

Android：下載地址

獲取Hello H5+的源代碼，在HBuilder中新建移動App，選Hello H5+。可以查看所有plus api的調用樣例代碼。

Hello mui示例應用，漂亮且高性能的前端UI框架：下載頁面

進階教程

如果想開發出接近原生體驗的App，請訪問如下教程：

三方培訓

HTML5中國產業聯盟裏有專業的培訓機構爲HTML5開發者提供DCloud產品的培訓。 詳見專門文章http://ask.dcloud.net.cn/article/299

發行和變現服務

最後，祝你通過DCloud的免費工具，快速完成自己的移動App，並獲得更多用戶和變現收益！

使用自定義模板時，1. 工程根目錄下新建一個html文件；2. 複製下面的基本模板內容，到這個html文件，在此基礎上修改meta和引入js；3. 在 `manifest.json->h5->template` 節點中關聯這個html文件的路徑。

Tips：`uni-app` 中 `manifest.json->h5->devServer` 實際上對應 `webpack` 的 devServer，鑑於 manifest 爲 json 文件，故 `webpack.config.js->devServer` 配置項下的簡單類型屬性均可在`manifest.json->h5->devServer`節點下配置，funciton 等複雜類型暫不支持。

是否允許html頁面中video標籤非全屏播放，僅iOS平臺有效
Boolean類型，值爲true表示允許，false表示不允許，默認值爲不允許。
html頁面的video標籤必須添加webkit-playsinline屬性才支持非全屏播放，如下示例：

`<video controls="controls" src="http://.../x.mp4" webkit-playsinline>`

雲端打包時要求所有圖標路徑都相對於應用下".manifest"目錄。
提交雲端打包時需做路徑轉換，請在HBuilderX的manifest.json可視化界面“（App）啓動圖配置”中操作設置

通過菜單欄中的“發行”->“App打包”，打開“App雲端打包”對話框提交。
注意只有App項目纔可以打包。

`keystore` helloworld.keystore 表示生成的證書，可以加上路徑（默認在用戶主目錄下）；

`alias` helloworld 表示證書的別名是helloworld；

`keyalg` RSA 表示採用的RSA算法；

`validity` 10000 表示證書的有效期是10000天。

Hello mui示例應用，漂亮且高性能的前端UI框架：
下載頁面

HTML5中國產業聯盟裏有專業的培訓機構爲HTML5開發者提供DCloud產品的培訓。
詳見專門文章http://ask.dcloud.net.cn/article/299