上一章讲了 Component配置（组件化）。
本章继续讲Fiori的知识。
目录
1，应用描述符(Descriptor for Applications)
1）， manifest.json
2），index.html
3），Component.js
2，SAP Fiori 应用描述符总结
2-1，什么是应用描述符？
2-2，文件位置
2-3，主要作用
2-4，示例结构
下面是详细内容。
1，应用描述符(Descriptor for Applications)
OpenUI5 SDK - Demo Kit
这个东西是啥呢？其实就是进一步的把Component.js里的内容给优化。
这里指的就是拿到manifest.json 里面来，处理都放到框架里了，以进一步减少开发代码量。
下面来看一下具体把哪些代码拿到manifest.json里， 以及写法。
1）， manifest.json
{
"_version": "1.65.0",
"sap.app": {
"id": "ui5.walkthrough",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ui5.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
},
"rootView": {
"viewName": "ui5.walkthrough.view.App",
"type": "XML",
"id": "app"
}
}
}下面来看几行关键代码：可以看到，上一章还有之前讲的很多内容都在这里了
你只需要做配置，剩下的加载什么的都交给UI5来做。
1，下面几行指定了Fiori App的文件路径(./)，Properties文件名，App的Title/描述/版本
"sap.app": {
"id": "ui5.walkthrough",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
2，这几行指定了运用的技术UI5，以及该应用会运行在哪些设备上（比如桌面，平板，手机）
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
3，这几行指定UI最低版本，以及加载的库
"dependencies": {
"minUI5Version": "1.108.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
}
4，这一段指定了国际化的处理类，以及bundle名称，该App支持的语言
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "ui5.walkthrough.i18n.i18n",
"supportedLocales": [""],
"fallbackLocale": ""
}
}
},
5，这段指定的是默认view的名称，ID，类型等
"rootView": {
"viewName": "ui5.walkthrough.view.App",
"type": "XML",
"id": "app"
}
2），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-compat-version="edge"
data-sap-ui-async="true"
data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
data-sap-ui-resource-roots='{
"ui5.walkthrough": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
</body>
</html>看一下几行关键代码：
- data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
这行代码指定了初期化跑的是Component.js，不再是index.js了，所以index.js也就没用了
- <div data-sap-ui-component data-name="ui5.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>
这行代码指定了很多信息，比如
- data-sap-ui-component 是一个标识，给UI5 用的，UI5 会根据这个标识来替换内容
- data-name 指定Component.js 路径
3），Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], (UIComponent, JSONModel) => {
"use strict";
return UIComponent.extend("ui5.walkthrough.Component", {
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
init() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
const oData = {
recipient : {
name : "World"
}
};
const oModel = new JSONModel(oData);
this.setModel(oModel);
}
});
});
看一下几行代码：
- 这几行指定了元数据已经移到manifest.json里面了
index.html里面指定Component.js，然后跑到Component.js之后，就会去读取manifest.json
metadata : {
interfaces: ["sap.ui.core.IAsyncContentCreation"],
manifest: "json"
},
跑一下看看：效果是一样的
下面来做个总结。
以下内容是从Deepseek查询整理得到。（我发现用Deepseek内容之后吧，CSDN好像审核难了）
2，SAP Fiori 应用描述符总结
在 SAP Fiori 开发中，应用描述符（通常称为 manifest.json 文件）是一个核心配置文件，它定义了 Fiori 应用程序的元数据和配置信息。
2-1，什么是应用描述符？
应用描述符是一个 JSON 格式的清单文件，包含以下关键信息：
-
应用程序的基本信息：应用ID、版本、标题、描述等
-
数据源配置：OData 服务的定义和模型配置
-
路由和导航配置：定义应用的导航结构和路由规则
-
UI5组件配置：使用的UI5库版本、组件设置等
-
i18n国际化设置：支持的语言和资源文件位置
-
扩展点配置：允许扩展的点和自定义配置
2-2，文件位置
通常位于项目的 webapp 目录下，命名为 manifest.json。
2-3，主要作用
-
作为Fiori应用的单一配置源
-
支持应用在SAP Fiori Launchpad中的集成
-
定义应用的元数据和行为
-
支持应用的扩展性（通过扩展点）
2-4，示例结构
json
{
"_version": "1.32.0",
"sap.app": {
"id": "my.app",
"type": "application",
"title": "My Fiori App",
"description": "A sample Fiori application"
},
"sap.ui5": {
"rootView": {
"viewName": "my.app.view.App",
"type": "XML"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "my.app.i18n.i18n"
}
}
}
},
"sap.fiori": {
"registrationIds": [],
"archeType": "transactional"
}
}在SAP Fiori Elements应用中，描述符文件尤为重要，因为许多应用行为都是通过这个文件配置而非硬编码实现的。
以上就是本篇的全部内容。
更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页
https://blog.csdn.net/shi_ly/category_12216766.html
东京老树根-CSDN博客
![[ctfshow web入门] web80](https://i-blog.csdnimg.cn/direct/d6feb041244d4ed194890850b95c9fb1.png)
