UI5 快速入门教程

news2024/11/23 4:00:37

环境准备

node >16.8 ,VSCode，官方网址

开始

创建一个根文件夹，根文件中创建一个package.json文件

{
  "name": "quickstart-tutorial",
  "private": true,
  "version": "1.0.0",
  "author": "SAP SE",
  "description": "UI5 Demo App - Quickstart Tutorial",
  "scripts": {
    "start": "ui5 serve",
    "build": "ui5 build"
  },
  "devDependencies": {
    "@ui5/cli": "^3"
  }
}

然后再创建一个webapp文件夹，文件夹中创建index.html文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5快速入门教程</title>
	<script id="sap-ui-bootstrap" 
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
		data-sap-ui-libs="sap.m" 
		data-sap-ui-compat-version="edge" 
		data-sap-ui-async="true" 
		data-sap-ui-on-init="module:ui5/quickstart/index"
		data-sap-ui-resource-roots='{ "ui5.quickstart": "./" }'> 
	</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
  • id="sap-ui-bootstrap"：为 script 元素指定了一个 ID，可以在其他地方引用它。
  • src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"：指定了要加载的 JavaScript 文件的 URL，这里是 SAPUI5 库的 URL。
  • data-sap-ui-libs="sap.m"：指定了要加载的 SAPUI5 库中的模块，这里是 sap.m，表示加载 SAPUI5 的移动设备模块。
  • data-sap-ui-compat-version="edge"：指定了 SAPUI5 库的兼容版本，这里是使用最新版本。
  • data-sap-ui-async="true"：指定了加载 SAPUI5 库的方式，这里是异步加载。
  • data-sap-ui-on-init="module:ui5/quickstart/index"：指定了初始化完成后要执行的 JavaScript 模块。这里是 ui5/quickstart/index 模块。
  • data-sap-ui-resource-roots='{"ui5.quickstart": "./"}'：指定了用于加载资源的根路径。这里是将 ui5.quickstart 映射到当前目录。

在webapp文件夹中，创建一个新文件index.js 

sap.ui.define([
	"sap/m/Button",
	"sap/m/MessageToast"
], (Button, MessageToast) => {
	"use strict";
	new Button({
		text: "Ready...",
		press() {
			MessageToast.show("Hello World!");
		}
	}).placeAt("content");

});

  1. sap.ui.define([...], (Button, MessageToast) => {...})：这是 SAPUI5 提供的模块定义函数，用于定义一个模块。它接受两个参数：

    • 第一个参数是一个数组，包含了当前模块所依赖的其他模块。在这里，依赖了两个模块："sap/m/Button" 和 "sap/m/MessageToast"。

    • 第二个参数是一个回调函数，用于定义模块加载完成后的逻辑。回调函数的参数是对应依赖模块的引用，这里用 Button 和 MessageToast 来引用两个模块。

  2. "use strict";：这是 JavaScript 的严格模式声明，启用严格模式可以帮助捕获一些常见的编码错误并使代码更加规范。

  3. new Button({...})：这里创建了一个新的 SAPUI5 Button 控件的实例，通过传入一个包含控件属性的对象来配置控件。在这里，配置了按钮的文本为 “Ready1…” 和按钮点击事件的处理函数。

  4. press() {...}：这是按钮的点击事件处理函数，使用了 ES6 的简写语法来定义一个匿名函数。

  5. MessageToast.show("Hello World!1");：这里调用了 SAPUI5 的 MessageToast 控件的 show() 方法来显示一条消息，消息内容为 “Hello World!1”。

  6. .placeAt("content")：这是 SAPUI5 控件的方法，用于将创建的控件实例添加到页面中的指定位置。在这里，将按钮控件添加到页面上 id 为 “content” 的元素中。

在 webapp 文件夹中创建新文件manifest.json;它也被称为“应用描述符”。

{
  "_version": "1.58.0",
  "sap.app": {
    "id": "ui5.quickstart"
  }
}

  1. "_version": "1.58.0"：这个属性指定了当前 JSON 结构的版本。它可能是用来确保读取和解析该 JSON 数据的应用程序具有兼容的功能。

  2. "sap.app"：这是一个命名空间，用于指定应用程序的基本属性。

  3. "id": "ui5.quickstart"：这个属性定义了应用程序的唯一标识符。在 SAPUI5 中，应用程序的 ID 在整个应用程序中应该是唯一的，它通常用于引用应用程序的资源或者在 SAP Fiori Launchpad 中注册应用程序。

修改index.js

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], (XMLView) => {
	"use strict";
	XMLView.create({
		viewName: "ui5.quickstart.App"
	}).then((oView) => oView.placeAt("content"));
});

  1. sap.ui.define([...], (XMLView) => {...})：这是 SAPUI5 提供的模块定义函数，用于定义一个模块。它接受两个参数：

    • 第一个参数是一个数组，包含了当前模块所依赖的其他模块。在这里，依赖了一个模块："sap/ui/core/mvc/XMLView"。

    • 第二个参数是一个回调函数，用于定义模块加载完成后的逻辑。回调函数的参数是对应依赖模块的引用，这里用 XMLView 来引用 XMLView 模块。

  2. XMLView.create({...})：这是 XMLView 模块提供的 create 方法，用于创建一个 XML 视图。它接受一个配置对象作为参数，指定了要创建的视图的相关信息。

    • viewName: "ui5.quickstart.App"：在配置对象中指定了要创建的视图的名称为 “ui5.quickstart.App”。这表示要加载名为 “App.view.xml” 的 XML 视图文件，该文件位于 “ui5/quickstart” 目录下。

  3. .then((oView) => oView.placeAt("content"))：这是一个 Promise 对象的链式调用，用于在视图创建成功后将其渲染到页面上的指定位置。

    • .then() 方法接收一个回调函数，当 Promise 对象状态变为 resolved（成功）时，该回调函数会被调用，并传入创建的视图实例 oView。

    • 在回调函数中，调用了 oView.placeAt("content") 方法，将创建的视图实例渲染到页面上的 id 为 “content” 的元素中。

在webapp文件夹下面创建App.view.xml文件

<mvc:View
	controllerName="ui5.quickstart.App"
	displayBlock="true"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<App>
		<Page title="My App">
			<Button
				text="Steady..."
				press=".onPress"
				type="Emphasized"
				class="sapUiSmallMargin"/>
		</Page>
	</App>
</mvc:View>

  1. <mvc:View ...>：这个标签定义了一个 MVC（Model-View-Controller）架构中的视图（View）。它包含了一些视图的配置信息和 UI 元素。

    • controllerName="ui5.quickstart.App"：指定了该视图所对应的控制器的名称为 “ui5.quickstart.App”。这意味着视图会与名为 “App.controller.js” 的控制器文件相关联。

    • displayBlock="true"：设置了视图的显示方式为块级显示（display: block），这意味着视图会占据父容器的整个空间。

    • xmlns="sap.m" 和 xmlns:mvc="sap.ui.core.mvc"：这些属性定义了 XML 命名空间，其中 "sap.m" 命名空间用于引用 SAPUI5 的移动设备库中的 UI 控件，而 "sap.ui.core.mvc" 命名空间用于引用 MVC 相关的元素。

  2. <App>...</App>：这是一个自定义的 XML 元素，可能是用于组织视图中的内容。它包含了一个页面（Page）作为子元素。

  3. <Page ...>：这个标签定义了一个页面，它是 SAPUI5 中常用的容器控件，用于包裹其他 UI 元素，并提供标题、内容布局等功能。

    • title="My App"：指定了页面的标题为 “My App”。

  4. <Button .../>：这个标签定义了一个按钮控件，并设置了一些属性和事件处理器。

    • text="Steady..."：设置了按钮的文本为 “Steady…”。

    • press=".onPress"：指定了按钮的点击事件处理器为控制器中的 “onPress” 方法。这个方法会在按钮被点击时被调用。

    • type="Emphasized"：设置了按钮的类型为 “Emphasized”，表示它具有强调的样式。

    • class="sapUiSmallMargin"：添加了一个 CSS 类，用于设置按钮的样式，这里是一个 SAPUI5 预定义的类，用于添加一些边距效果。

在webapp 文件夹下面创建App.controller.js文件

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], (Controller, MessageToast) => {
	"use strict";
	return Controller.extend("ui5.quickstart.App", {
		onPress() {
			MessageToast.show("Hello App!");
		}
	});
});

  1. sap.ui.define([...], (Controller, MessageToast) => {...})：这是 SAPUI5 提供的模块定义函数，用于定义一个模块。它接受两个参数：

    • 第一个参数是一个数组，包含了当前模块所依赖的其他模块。在这里，依赖了两个模块："sap/ui/core/mvc/Controller" 和 "sap/m/MessageToast"。

    • 第二个参数是一个回调函数，用于定义模块加载完成后的逻辑。回调函数的参数是对应依赖模块的引用，这里用 Controller 和 MessageToast 来引用两个模块。

  2. return Controller.extend("ui5.quickstart.App", {...})：这是通过控制器基类的 extend 方法来创建一个新的控制器。extend 方法接受两个参数：

    • 第一个参数是控制器的名称，这里是 “ui5.quickstart.App”。这个名称与 XML 视图文件中指定的控制器名称一致，确保视图与控制器正确关联。

    • 第二个参数是一个对象，包含了控制器的方法和属性。在这里，只定义了一个方法 onPress()，用于处理按钮点击事件。

  3. onPress() {...}：这是控制器中定义的一个方法，用于处理按钮点击事件。当按钮被点击时，会调用 MessageToast.show("Hello App!") 方法，显示一个消息提示框，内容为 “Hello App!”。

修改index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5快速入门教程</title>
	<script id="sap-ui-bootstrap" 
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
		data-sap-ui-libs="sap.m,sap.ui.layout,sap.tnt" 
		data-sap-ui-compat-version="edge" 
		data-sap-ui-async="true" 
		data-sap-ui-on-init="module:ui5/quickstart/index"
		data-sap-ui-resource-roots='{ "ui5.quickstart": "./" }'> 
	</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>

data-sap-ui-libs 添加sap.ui.layout,sap.tnt 两个库

  • sap.m: 这个参数表示添加 SAPUI5 的移动设备库（sap.m），它包含了用于移动设备的 UI 控件和样式。
  • sap.tnt: 这个参数表示添加 SAPUI5 的工具和导航库（sap.tnt），它包含了用于工具条和导航的 UI 控件和样式。
  • sap.ui.core: 这个参数表示添加 SAPUI5 的核心库（sap.ui.core），它包含了 SAPUI5 应用程序运行所需的核心功能和类。
  • sap.ui.layout: 这个参数表示添加 SAPUI5 的布局库（sap.ui.layout），它包含了用于布局管理的 UI 控件和样式。
  • themelib_sap_horizon: 这个参数表示添加 SAPUI5 的主题库（themelib_sap_horizon），它包含了 Horizon 主题的样式和资源。

修改App.view.xml

<mvc:View
	controllerName="ui5.quickstart.App"
	displayBlock="true"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:l="sap.ui.layout"
	xmlns:core="sap.ui.core"
	xmlns:tnt="sap.tnt">
	<App id="app">
		<Page title="My App">
			<Button
				icon="sap-icon://sap-ui5"
				text="Go!"
				press=".onPress"
				type="Emphasized"
				class="sapUiSmallMargin"/>
		</Page>
		<Page id="intro" title="Create Enterprise-Ready Web Apps with Ease">
			<l:BlockLayout background="Light">
				<l:BlockLayoutRow>
					<l:BlockLayoutCell>
						<core:Icon color="#1873B4" src="sap-icon://sap-ui5" size="20rem" class="sapUiMediumMarginBottom" width="100%"/>
						<Title level="H1" titleStyle="H1" text="This is UI5!" width="100%" textAlign="Center"/>
					</l:BlockLayoutCell>
				</l:BlockLayoutRow>
				<l:BlockLayoutRow>
					<l:BlockLayoutCell>
						<FlexBox items="{/features}" justifyContent="Center" wrap="Wrap" class="sapUiSmallMarginBottom">
							<tnt:InfoLabel text="{}" class="sapUiSmallMarginTop sapUiSmallMarginEnd"/>
						</FlexBox>
					</l:BlockLayoutCell>
				</l:BlockLayoutRow>

				<l:BlockLayoutRow>
					<l:BlockLayoutCell>
						<Panel headerText="Are you ready?" expandable="true">
							<Switch change=".onChange" customTextOn="yes" customTextOff="no"/>
							<l:HorizontalLayout id="ready" visible="false" class="sapUiSmallMargin">
								<Text text="Ok, let's get you started!" class="sapUiTinyMarginEnd"/>
								<Link text="Learn more" href="https://sdk.openui5.org/"/>
							</l:HorizontalLayout>
						</Panel>
					</l:BlockLayoutCell>
				</l:BlockLayoutRow>
			</l:BlockLayout>
		</Page>

	</App>
</mvc:View>
  1. <mvc:View ...>：这个标签定义了一个 SAPUI5 视图。其中的 mvc 命名空间用于引用 SAPUI5 的 MVC（Model-View-Controller）相关元素。
    • controllerName="ui5.quickstart.App"：指定了该视图所对应的控制器的名称为 “ui5.quickstart.App”。这意味着视图会与名为 “App.controller.js” 的控制器文件相关联。
    • displayBlock="true"：设置了视图的显示方式为块级显示（display: block），这意味着视图会占据父容器的整个空间。
    • xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:tnt="sap.tnt"：这些属性定义了 XML 命名空间，用于引用 SAPUI5 中的 UI 控件和布局元素。
  2. <App id="app">...</App>：这是一个自定义的 XML 元素，可能是用于组织视图中的内容。它包含了两个页面（Page）作为子元素，其中一个页面有一个按钮。
  3. 第一个页面：
    • <Page title="My App">...</Page>：这个标签定义了一个页面，并设置了页面的标题为 “My App”。
    • <Button .../>：这个标签定义了一个按钮控件，并设置了一些属性和事件处理器。
  4. 第二个页面：
    • <Page id="intro" title="Create Enterprise-Ready Web Apps with Ease">...</Page>：这个标签定义了另一个页面，并设置了页面的标题为 “Create Enterprise-Ready Web Apps with Ease”。这个页面包含了一些更复杂的布局和控件。
    • <l:BlockLayout>：这个标签定义了一个块布局（BlockLayout），用于将页面内容分块显示。
    • <l:BlockLayoutRow>...</l:BlockLayoutRow>：这个标签定义了一个块布局行（BlockLayoutRow），用于将内容分行显示。
    • <l:BlockLayoutCell>...</l:BlockLayoutCell>：这个标签定义了一个块布局单元格（BlockLayoutCell），用于将内容放置在块布局行中。
    • <Panel ...>...</Panel>：这个标签定义了一个面板（Panel），用于显示一个可折叠的区域，并包含了一个开关（Switch）和一些其他控件。
    • <Switch .../>：这个标签定义了一个开关控件，用于切换某些状态。
    • <l:HorizontalLayout ...>...</l:HorizontalLayout>：这个标签定义了一个水平布局（HorizontalLayout），用于将一些文本和链接水平排列显示。
    • <Text .../>：这个标签定义了一个文本控件，用于显示一些静态文本。
    • <Link .../>：这个标签定义了一个链接控件，用于显示一个可点击的链接。

修改App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/model/json/JSONModel"
], (Controller, MessageToast, JSONModel) => {
	"use strict";
	return Controller.extend("ui5.quickstart.App", {
		onPress() {
			MessageToast.show("Hello UI5!");
			this.byId("app").to(this.byId("intro"));
		},
		onInit() {
			this.getView().setModel(new JSONModel({
					features: [
						"Enterprise-Ready Web Toolkit",
						"Powerful Development Concepts",
						"Feature-Rich UI Controls",
						"Consistent User Experience",
						"Free and Open Source",
						"Responsive Across Browsers and Devices"
					]
				})
			);
		},
		onChange(oEvent) {
			const bState = oEvent.getParameter("state");
			this.byId("ready").setVisible(bState);
		}
	});
});

  1. sap.ui.define([...], (Controller, MessageToast, JSONModel) => {...})：这是 SAPUI5 提供的模块定义函数，用于定义一个模块。它接受三个参数：

    • 第一个参数是一个数组，包含了当前模块所依赖的其他模块。在这里，依赖了三个模块："sap/ui/core/mvc/Controller"、"sap/m/MessageToast" 和 "sap/ui/model/json/JSONModel"。

    • 第二个参数是一个回调函数，用于定义模块加载完成后的逻辑。回调函数的参数是对应依赖模块的引用，这里用 Controller、MessageToast 和 JSONModel 来引用三个模块。

  2. return Controller.extend("ui5.quickstart.App", {...})：这是通过控制器基类的 extend 方法来创建一个新的控制器。extend 方法接受两个参数：

    • 第一个参数是控制器的名称，这里是 “ui5.quickstart.App”。这个名称与 XML 视图文件中指定的控制器名称一致，确保视图与控制器正确关联。

    • 第二个参数是一个对象，包含了控制器的方法和属性。在这里，定义了三个方法：onPress、onInit 和 onChange。

  3. onPress() {...}：这个方法用于处理按钮点击事件。当按钮被点击时，会显示一个消息提示框，内容为 “Hello UI5!”，然后通过 this.byId("app").to(this.byId("intro")) 将视图中的名为 “app” 的导航容器（通常是一个 sap.m.NavContainer 控件）导航到名为 “intro” 的页面。

  4. onInit() {...}：这个方法用于视图初始化。在这里，通过 this.getView().setModel(...) 方法为视图设置了一个 JSON 数据模型，用于存储一些功能特性的信息。

  5. onChange(oEvent) {...}：这个方法用于处理开关控件的状态改变事件。根据事件的参数，控制页面中名为 “ready” 的布局元素的可见性。
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1606277.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

吴恩达＜用于LLM应用程序开发的LangChain＞ L1-Model_prompt_parser

吴恩达＜用于LLM应用程序开发的LangChain＞ L1-Model_prompt_parser

问题预览/关键词 课程地址如何获取openAI的API Key如何根据日期设置不同模型?如何调用OpenAI的API?如何使用OpenAI的API&#xff1f;langchain如何抽象OpenAI的API接口&#xff1f;langchain如何创建提示词模板并查看模板内容&#xff1f;langchain如何使用提示词模板生成提…
阅读更多...
【opencv】dnn示例-vit_tracker.cpp 使用OpenCV库和ViTTrack模型实现的视频追踪程序

【opencv】dnn示例-vit_tracker.cpp 使用OpenCV库和ViTTrack模型实现的视频追踪程序

这段代码是一个使用OpenCV库和ViTTrack模型实现的视频追踪程序。程序通过摄像头或视频文件获取图像序列&#xff0c;并对选定的目标对象进行实时追踪。 代码主要分为以下几个部分&#xff1a; 导入必要的库&#xff1a;程序开始时先导入了iostream&#xff0c;cmath以及相关Ope…
阅读更多...
每日两题 / 53. 最大子数组和 56. 合并区间（LeetCode热题100）

每日两题 / 53. 最大子数组和 56. 合并区间（LeetCode热题100）

53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 经典dp题&#xff0c;dp[i]表示以nums[i]为结尾的所有子数组中&#xff0c;最大的和 将i从左到右遍历&#xff0c;考虑dp[i]如何维护&#xff1f; 以nums[i]结尾的子数组只有两种情况&#xff0c;子数组只有nums[i]…
阅读更多...
[Qt网络编程]之UDP通讯的简单编程实现

[Qt网络编程]之UDP通讯的简单编程实现

hello&#xff01;欢迎大家来到我的Qt学习系列之网络编程之UDP通讯的简单编程实现。希望这篇文章能对你有所帮助&#xff01;&#xff01;&#xff01; 本篇文章的相关知识请看我的上篇文章: http://t.csdnimg.cn/UKyeM 目录 UDP通讯 基于主窗口的实现 基于线程的实现 UDP通讯…
阅读更多...
小黄脸404自动跳转源码

小黄脸404自动跳转源码

源码介绍 小黄脸404自动跳转源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 效果截图 源码下载 小黄脸404自动跳转…
阅读更多...
网络防火墙技术知多少？了解如何保护您的网络安全

网络防火墙技术知多少？了解如何保护您的网络安全

在当前以网络为核心的世界中&#xff0c;网络安全成为了至关重要的议题。网络防火墙是一种常见的保护网络安全的技术&#xff0c;用于监控和控制网络流量&#xff0c;阻止未经授权的访问和恶意活动。今天德迅云安全就带您了解下防火墙的一些相关功能和类型。 防火墙的五个功能…
阅读更多...
【EI会议征稿通知】2024年图像处理、机器学习与模式识别国际学术会议（IPMLP 2024)

【EI会议征稿通知】2024年图像处理、机器学习与模式识别国际学术会议（IPMLP 2024)

2024年图像处理、机器学习与模式识别国际学术会议&#xff08;IPMLP 2024) 2024 International Conference on Image Processing, Machine Learning and Pattern Recognition 重要信息 大会官网&#xff1a;www.ipmlp.net&#xff08;点击参会/投稿/了解会议详情&#xff09;…
阅读更多...
【操作系统】(Operator System)

【操作系统】(Operator System)

目录 1.概念2.系统调用和库函数 1.概念 1.操作系统是什么呢&#xff1f;&#xff1f; 操作系统是一款进行软硬件资源管理的软件&#xff0c;我们打开电脑第一个加载的软件就是操作系统。 2.为什么要有操作系统呢&#xff1f; 操作系统通过将软硬件资源管理好(手段)&#xf…
阅读更多...
axios的封装理解和基本使用

axios的封装理解和基本使用

axios的配置 ruoyi的前端对axios进行了封装&#xff0c;让我们发get请求或者是post请求更加方便了。 ruoyi对axios的封装在下面文件中&#xff1a;打开文件&#xff0c;可以看到它有三个显眼的方法&#xff0c;分别是request拦截器、response拦截器和通用下载方法。ruoYi接口地…
阅读更多...
ansible进阶-剧本调试方法

ansible进阶-剧本调试方法

目录 1、调试方法 2、实例 2.1 Debug模块 2.2 tags标签 2.3 忽略错误 1、调试方法 具体方法应用场景debug标签执⾏剧本的时候输出剧本的执⾏流程,⼀般配合register⼀起使⽤. 输出facts变量自定义变量tags标签给⼀些模块加上标签,运⾏剧本的时候可以运⾏指定标签的…
阅读更多...
基于非线性控制策略的电力电子电路——DC-DC电路的3种滑模控制器【MATLAB/simulink】

基于非线性控制策略的电力电子电路——DC-DC电路的3种滑模控制器【MATLAB/simulink】

第一种&#xff0c;滞环滑模控制器Buck电路 在滑模控制系统中&#xff0c;采用滞环技术&#xff0c;直接将切换函数转换成开关控制信号&#xff0c;滞环技术被看做一种降低系统结构的切换频率的调制方法&#xff0c;业界也把基于滞环滑模技术实现的滑模控制称为直接滑模控制技…
阅读更多...
【ESP32 手机配网教程】

【ESP32 手机配网教程】

【ESP32 手机配网教程】 1. 前言2. 先决条件2.1 环境配置2.2 所需零件3.3 硬件连接步骤 3. Web热点手动配网3.1. 准备工作3.2. 编译上传程序3.3. 进行手动配网 4. BLE无线配网4.1. 准备工作**4.2. 编译上传程序4.3. 使用手机APP进行无线配网 5. 总结 1. 前言 欢迎使用ESP32进行…
阅读更多...
【C++】list的介绍及使用说明

【C++】list的介绍及使用说明

目录 00.引言 01.list的介绍 模版类 独立节点存储 list的使用 1.构造函数 2.迭代器的使用 分类 运用 3.容量管理 empty()&#xff1a; size(): 4.元素访问 5.增删查改 00.引言 我们学习数据结构时&#xff0c;学过两个基本的数据结构&#xff1a;顺序表和链表。顺…
阅读更多...
基于simulink的模拟锁相环和数字锁相环建模与对比仿真

基于simulink的模拟锁相环和数字锁相环建模与对比仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 模拟锁相环&#xff08;PLL&#xff09;的基本原理 4.2 数字锁相环&#xff08;DPLL&#xff09;的基本原理 5.完整工程文件 1.课题概述 模拟锁相环和数字锁相环建模的simulink建模&#xff0c;对…
阅读更多...
深度剖析哈希

深度剖析哈希

目录 一. 哈希概念 1.1 哈希概念 1.2 哈希冲突 1.3 哈希函数 二. 闭散列 2.1 线性探测法 2.2 引进状态 2.3 闭散列的查找、插入、删除操作 2.4 闭散列插入时的扩容 2.4 仿函数 2.5 整体代码 三. 开散列 ​编辑 2.1 闭散列节点定义 2…
阅读更多...
HBuilder真机调试检测不到荣耀Magic UI系列（包括手机和电脑）解决办法

HBuilder真机调试检测不到荣耀Magic UI系列（包括手机和电脑）解决办法

HBuilder真机调试检测不到荣耀Magic UI系列&#xff08;包括手机和电脑&#xff09;解决办法解决方法&#xff1a; 1.在开发人员选项中开启USB调试 如何进入开发者选项&#xff1f; 设置->关于->版本号&#xff0c;点击版本号直至出现您已处于开发者模式 2.选择USB配置…
阅读更多...
Swin Transformer 浅析

Swin Transformer 浅析

Swin Transformer 浅析 文章目录 Swin Transformer 浅析引言Swin Transformer 的网络结构W-MSA 窗口多头注意力机制SW-MSA 滑动窗口多头注意力机制Patch Merging 图块合并 引言 因为ViT无法实现CNN中的层次化构建以及局部信息&#xff0c;由此微软团队提出了Swin Transformer来…
阅读更多...
【论文阅读】YOLO-World | 开集目标检测

【论文阅读】YOLO-World | 开集目标检测

Date&#xff1a;2024.02.22&#xff0c;Tencent AI Lab&#xff0c;华中科技大学Paper&#xff1a;https://arxiv.org/pdf/2401.17270.pdfGithub&#xff1a;https://github.com/AILab-CVC/YOLO-World 论文解决的问题&#xff1a; 通过视觉语言建模和大规模数据集上的预训练来…
阅读更多...
【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【QT+OpenCV】车牌号检测 学习记录 遇到的问题

【QTOpenCV】车牌号检测 学习记录 首先在QT里面配置好OpenCV .pro文件中加入&#xff1a; INCLUDEPATH G:/opencv/build/include LIBS -L"G:/opencv/build/x64/vc14/lib"\-lopencv_core \-lopencv_imgproc \-lopencv_highgui \-lopencv_ml \-lopencv_video \-lo.c…
阅读更多...
展览展会媒体媒体邀约执行应该怎么做？

展览展会媒体媒体邀约执行应该怎么做？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 展览展会邀请媒体跟其他活动邀请媒体流程大致相同&#xff0c;包括 制定媒体邀约计划&#xff0c;准备新闻稿&#xff0c;发送邀请函&#xff0c;确认媒体参会&#xff0c;现场媒体接待及…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023