SAP学习笔记 - 开发18 - 前端Fiori开发应用描述符（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博客

SAP学习笔记 - 开发18 - 前端Fiori开发 应用描述符（manifest.json）的用途

1，应用描述符(Descriptor for Applications)

1）， manifest.json

2），index.html

3），Component.js

2，SAP Fiori 应用描述符总结

2-1，什么是应用描述符？

2-2，文件位置

2-3，主要作用

2-4，示例结构

SAP学习笔记 - 开发18 - 前端Fiori开发应用描述符（manifest.json）的用途