SAP UI5 初学者教程之二：SAP UI5 的引导过程(Bootstrap) 试读版
Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發(fā)團(tuán)隊(duì)之后開始接觸 SAP UI5，曾經(jīng)在 SAP 社區(qū)和“汪子熙”微信公眾號(hào)上發(fā)表過多篇關(guān)于 SAP UI5 工作原理和源碼解析的文章。
在 Jerry 這篇文章對(duì) SAP UI5 一無所知的新手，從哪些材料開始學(xué)習(xí)比較好？ 曾經(jīng)提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發(fā)背景的開發(fā)者，向 SAP UI5 開發(fā)領(lǐng)域轉(zhuǎn)型的不易，因此我在業(yè)余時(shí)間設(shè)計(jì)了這份適合 SAP UI5 初學(xué)者的學(xué)習(xí)教程，把開發(fā)一個(gè)完整的 SAP UI5 應(yīng)用的流程，拆分成若干個(gè)步驟，力求每個(gè)步驟里，把涉及到的知識(shí)點(diǎn)都涵蓋到。這些知識(shí)點(diǎn)可能不像我的 UI5 源碼分析系列文章那么深入，但力求淺顯易懂，便于 SAP UI5 初學(xué)者理解。
本教程每一個(gè)步驟的源代碼，都存放在我的 Github 上，分別用文件夾 01，02，03 等等來標(biāo)識(shí)。
每一個(gè)步驟均是前一步驟的基礎(chǔ)上，添加了若干新特性。建議零基礎(chǔ)或者對(duì) SAP UI5 知之甚少的初學(xué)者，按照順序從第一個(gè)步驟開始循序漸進(jìn)地學(xué)習(xí)，把這些代碼下載到本地，配合教程的文字講解，自己動(dòng)手，以加深理解。
大家如果對(duì)教程的每個(gè)步驟有任何疑問，歡迎在教程對(duì)應(yīng)的步驟文章里給我評(píng)論，進(jìn)行留言。
本教程的前一篇 Hello world 的文章，我們只是了解了一個(gè)最基本的 index.html 頁(yè)面的開發(fā)方式，尚未真正接觸到 SAP UI5.
從本文開始，我們將會(huì)在前一步驟的 index.html 的基礎(chǔ)上，導(dǎo)入 SAP UI5 的庫(kù)文件，真正開始 SAP UI5 的學(xué)習(xí)。
同本教程前一步驟一樣，請(qǐng)?jiān)谀愕?SAP UI5 工程文件夾下新建一個(gè) 02 文件夾，然后在 02 文件夾里再創(chuàng)建一個(gè) webapp 文件夾。
按照本文完成 02 步驟后，你的 Visual Studio Code 里呈現(xiàn)的 SAP UI5 項(xiàng)目的文件夾結(jié)構(gòu)，如下圖所示：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>SAPUI5 Walkthrough</title><scriptid="sap-ui-bootstrap"src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"data-sap-ui-async="true"data-sap-ui-resourceroots='{"sap.ui5.walkthrough": "./"}'data-sap-ui-oninit="module:sap/ui5/walkthrough/index"></script> </head> <body> <div>Hello World</div> </body> </html>本步驟同 01 步驟相比，除了原始的 index.html 里增添了新內(nèi)容之外，還多了一個(gè) index.js 文件。
本步驟完成的效果是，在瀏覽器里打開 index.html 后，除了看到前一步驟的 Hello World 之外，還能看到一個(gè)彈出對(duì)話框，如下圖所示：
下面詳細(xì)介紹本教程的第二步驟。
和步驟一相比，本步驟的 index.html 多了不少內(nèi)容：
下面逐一介紹。
要點(diǎn)1 SAP UI5 引導(dǎo)文件
src=“https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
這一行語句，指定了 SAP UI5 庫(kù)文件的地址，從網(wǎng)絡(luò)加載該 JavaScript 文件。這個(gè) sap-ui-core.js, 也可以看成是 SAP UI5 應(yīng)用的引導(dǎo)文件，所有其他的 UI5 庫(kù)文件，都通過 sap-ui-core.js 里的代碼負(fù)責(zé)按需加載。
我們用瀏覽器當(dāng)然是能夠根據(jù) src 里指定的 url，手動(dòng)打開這個(gè) sap-ui-core.js 文件的：
關(guān)于更多要點(diǎn)介紹，請(qǐng)參考我的文章：SAP UI5 初學(xué)者教程之二：SAP UI5 的引導(dǎo)過程 Bootstrap
總結(jié)
以上是生活随笔為你收集整理的SAP UI5 初学者教程之二：SAP UI5 的引导过程(Bootstrap) 试读版的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP UI5 初学者教程之一：Hell
- 下一篇： SAP UI5 初学者教程之三：开始接触