看這段測試代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="./resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index">
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
運作之後,會彈出一個 Alert 對話框。
代碼關鍵點逐行解釋:

data-sap-ui-theme
指定主題為 sap-fiori-3.
詳情參考文章:SAP UI5 應用指定主題 theme 的幾種方式和其優先級
data-sap-ui-libs
要在 HTML 頁面中使用 SAPUI5 功能,您必須加載并初始化 SAPUI5 庫。
您可以在頁面中使用 SAPUI5 引導程式腳本,以便在浏覽器加載和執行腳本後自動初始化 SAPUI5 運作時。 對于簡單的用例以及預設的 SAPUI5 安裝,這足以建構和運作 UI。 除此之外,您可以在配置設定中指定一組 SAPUI5 庫和用于您的應用程式的主題。這通過 script 的屬性 data-sap-ui-libs 來完成。
如果我們删除上圖第10行的 data-sap-ui-libs 屬性以及 sap.m, 整個應用仍然能夠正常運作,那為什麼我們還需要這一行代碼呢?
data-sap-ui-libs 由 UI5 Core 的引導程式考慮。 該架構将確定預加載 data-sap-ui-libs 屬性中列出的所有庫,然後才觸發應用程式可以附加到的 init 事件。 當您删除庫預加載時,這可能導緻庫的每個所需子產品的單個請求,在最壞的情況下是同步請求并導緻性能問題(您可以在網絡跟蹤中看到這一點)。 但是,如果您開發了 UI5 應用程式(元件)并且在清單中正确維護了庫依賴項,則應用程式/元件加載器會在應用程式/元件初始化之前小心地為您預加載這些庫。
注意:如果您獨立運作應用程式,則引導程式将添加到您的 HTML 頁面中。 在 SAP Fiori 啟動闆環境中,啟動闆執行引導程式,不需要額外的 HTML 頁面來顯示應用程式。
data-sap-ui-compatVersion
這個屬性和 SAP UI5 的相容性設計有關。
相容性版本标志允許應用程式對 SAPUI5 中不相容的更改做出反應。
如相容性規則中所述,對 SAPUI5 功能的更改是相容的,請參閱相容性規則。但是,在某些情況下,更改功能的行為可能是有意義的,例如更改預設值或使用優化的實作,而這些更改可能會導緻不相容。
相容版本配置工作如下:
(1) 如果功能更改不相容,則會引入版本标志。
(2) 版本标志必須在 SAPUI5 引導标記中定義為全局(data-sap-ui-compatVersion 或為每個功能單獨定義(例如 data-sap-ui-compatVersion-xyz).
看個例子:
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_blue_crystal"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-compatVersion="1.18"
data-sap-ui-compatVersion-<featureName>="1.16"
>
</script>
如果未定義版本,則應用該功能的預設行為。
如果指定了顯式版本,則應用指定版本的行為。
如果指定了 edge 版本,則應用該功能的最新行為。
關于剩下的 data-sap-ui-async,data-sap-ui-resourceroots 和 data-sap-ui-oninit 的含義,請參閱我的部落格:SAP UI5 初學者教程之二:SAP UI5 的引導過程。