最近有閑跟著官方的Get Started教程學習了UI5，記錄一下自己學習中遇到的幾個問題。
本文鏈接：https://www.cnblogs.com/hhelibeb/p/17835722.html
1，文檔和實際代碼的一致性
注意文檔可能不是最新的，和實際示例代碼有出入，比如本文寫作時，Data Binding Tutorial里面的Step 1: No Data Binding
教程里寫的代碼是，
sap.ui.require([
"sap/m/Text"
], function (Text) {
"use strict";
// Attach an anonymous function to the SAPUI5 'init' event
sap.ui.getCore().attachInit(function () {
// Create a text UI element that displays a hardcoded text string
new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
});
});
示例的實際代碼卻是,
sap.ui.require([
"sap/ui/core/Core",
"sap/m/Text"
], function (
Core,
Text
) {
"use strict";
// Chain an anonymous function to the SAPUI5 'ready' Promise
Core.ready().then(function () {
// Create a text UI element that displays a hardcoded text string
new Text({text: "Hi, my name is Harry Hawk"}).placeAt("content");
});
});
這是因為在新版UI5中，attachInit方法已經(jīng)Deprecated。
通常這樣的不一致沒有太大影響，但某些不一致也有可能會導致程序運行失敗，使用時需要注意。
截止目前，我已經(jīng)向文檔提出2個PR用來修復這類不一致導致的程序運行失敗問題。
2，例子中的resources/sap-ui-core.js如何引用？
sap-ui-core.js是UI5的核心庫，大部分教程的index.html都會有類似代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:ui5/walkthrough/index"
data-sap-ui-resourceroots='{
"ui5.walkthrough": "./"
}'>
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>
其中src="resources/sap-ui-core.js"用來引用sap-ui-core.js，對于本地的項目，我們可以替換鏈接為：
src="https://ui5.sap.com/resources/sap-ui-core.js"
或者安裝SAP Fiori Tools代理，并且通過ui5.yaml配置來為/resource路徑設(shè)置代理，這樣就不需要修改index.html中的src了。以下是部分配置代碼參考，文章來源：http://www.zghlxwxcb.cn/news/detail-747363.html
server:
? customMiddleware:
? ? - name: fiori-tools-proxy
? ? ? afterMiddleware: compression
? ? ? configuration:
? ? ? ? ignoreCertError: false
? ? ? ? ui5:
? ? ? ? ? path:
? ? ? ? ? ? - /resources
? ? ? ? ? ? - /test-resources
? ? ? ? ? url: https://ui5.sap.com
3，data-sap-ui-resourceroots
注意需要設(shè)置前文index.html中的data-sap-ui-resourceroots，這個東西可以修改應用中資源的加載路徑，如果沒有指定"ui5.walkthrough": "./"，那么加載資源時會加載到/resource下，導致失敗。
相關(guān)閱讀：SAP UI5 應用 index.html 里 data-sap-ui-resourceroots 指令的含義和作用文章來源地址http://www.zghlxwxcb.cn/news/detail-747363.html
到了這里，關(guān)于SAP UI5 官方教程學習記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[UI5 常用控件] 01.Text](https://imgs.yssmx.com/Uploads/2024/01/820002-1.png)
![[UI5] ODATA V4中的CRUD](https://imgs.yssmx.com/Uploads/2024/01/811313-1.png)
![[UI5 常用控件] 09.IconTabBar，IconTabHeader，TabContainer](https://imgs.yssmx.com/Uploads/2024/02/830355-1.png)
![[UI5 常用控件] 02.Title,Link,Label](https://imgs.yssmx.com/Uploads/2024/01/824023-1.png)
