当前位置： 首页 > article >正文

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

article 2025/8/27 5:10:44

上一章讲了 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><scriptid="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 parentUIComponent.prototype.init.apply(this, arguments);// set data modelconst 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 格式的清单文件，包含以下关键信息：

  1. 应用程序的基本信息：应用ID、版本、标题、描述等

  2. 数据源配置：OData 服务的定义和模型配置

  3. 路由和导航配置：定义应用的导航结构和路由规则

  4. UI5组件配置：使用的UI5库版本、组件设置等

  5. i18n国际化设置：支持的语言和资源文件位置

  6. 扩展点配置：允许扩展的点和自定义配置

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博客

http://www.lryc.cn/news/2401001.html

相关文章：

  • 分类与逻辑回归 - 一个完整的guide
  • 一键试衣，6G显存可跑
  • 跟着deepseek浅学分布式事务（2） - 两阶段提交（2PC）
  • 【仿生机器人软件架构】通过整合认知系统实现自主精神性——认知系统非常具有可执行性
  • 20250602在Ubuntu20.04.6下修改压缩包的日期和时间
  • Fullstack 面试复习笔记：项目梳理总结
  • 星闪开发之Server-Client 指令交互控制OLED灯案例
  • MySQL补充知识点学习
  • 《前端面试题：CSS有哪些单位！》
  • [ctfshow web入门] web80
  • 【设计模式-4.5】行为型——迭代器模式
  • C++_核心编程_继承中的对象模型
  • 使用cephadm离线部署reef 18版并配置对接openstack
  • Redis最佳实践——性能优化技巧之缓存预热与淘汰策略
  • 2024年数维杯国际大学生数学建模挑战赛D题城市弹性与可持续发展能力评价解题全过程论文及程序
  • 3D Gaussian splatting 06: 代码阅读-训练参数
  • QT聊天项目DAY13
  • Web3如何重塑数据隐私的未来
  • 【鸿蒙】HarmonyOS NEXT之如何正常加载地图组件
  • 前端框架进化史
  • “轻量应用服务器” vs. “云服务器CVM”：小白入门腾讯云，哪款“云机”更适合你？(场景、配置、价格对比解析)
  • day63—回溯—全排列（LeetCode-46）
  • （二）stm32使用4g模块(移远ec800k)连接mqtt
  • 防火墙iptables项目实战
  • webpack继续学习
  • Scrapy爬虫框架Spiders爬虫脚本使用技巧
  • PowerBI企业运营分析—全动态盈亏平衡分析
  • docker的基本命令
  • 【运维实战】Rsync将一台主Web服务器上的文件和目录同步到另一台备份服务器!
  • 实时通信RTC与传统直播的异同