526互联

Fiori WalkThrough学习-Step02.Bootstrap

发布时间 2023-12-08 10:51:28作者: 阿胖的阿多

1.Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>UI5 Walkthrough</title>
    <script id="sap-ui-bootstrap" 
            src="https://openui5.hana.ondemand.com/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：引用js的目录,此例子引用了远程库的js,项目中会放在本地目录:/resources/sap-ui-core.js
data-sap-ui-them：主题样式
data-sap-ui-libs：使用的库
data-sap-ui-async：异步嗲用
data-sap-ui-onInit：初始化js文件的名字，例子里的index，就是index.js,ui5/walkthrough/和ui5.walkthrough是对应的.
意思是，index.js的位置是ui5.walkthrough对应的目录下。那么ui5.walkthrough对应的具体目录，是在哪里定义的呢？是在下面的data-sap-ui-resourceroots里定义的，
data-sap-ui-resourceroots：定义ui5.walkthrough对应的目录。例子里的【./】的意思是，和index.html在同一个目录。

2.index.js

sap.ui.define([], function() {
    "use strict";
    alert("UI5 is ready");
});

执行效果，会弹出一个警告框，显示UI5 is ready