当前位置: 首页 > news >正文

鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)天气应用案例

文章目录

      • 一、布局简介
      • 二、典型布局场景
      • 三、侧边栏 SideBarContainer
        • 1、子组件
        • 2、属性
        • 3、事件
      • 四、案例 天气应用
        • 1、UX设计
        • 2、实现分析
        • 3、主页整体实现
        • 4、具体代码
      • 五、运行效果

一、布局简介

布局可以分为自适应布局和响应式布局,二者的介绍如下表所示。

名称简介
自适应布局当外部容器大小发生变化时,元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种:拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
响应式布局当外部容器大小发生变化时,元素可以根据断点、栅格或特定的特征(如屏幕方向、窗口宽高等)自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种:断点、媒体查询、栅格布局。响应式布局可以实现界面随外部容器大小有不连续变化,通常不同特征下的界面显示会有较大的差异。

自适应布局多用于解决页面各区域内的布局差异,响应式布局多用于解决页面各区域间的布局差异。

自适应布局和响应式布局常常需要借助容器类组件实现,或与容器类组件搭配使用。

  • 自适应布局常常需要借助Row组件、Column组件或Flex组件实现。

在这里插入图片描述

  • 响应式布局常常与GridRow组件、Grid组件、List组件、Swiper组件或Tabs组件搭配使用。

在这里插入图片描述

二、典型布局场景

虽然不同应用的页面千变万化,但对其进行拆分和分析,页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件,实现应用中的典型布局场景。

布局场景实现方案
页签栏Tab组件 + 响应式布局
运营横幅(Banner)Swiper组件 + 响应式布局
网格Grid组件 / List组件 + 响应式布局
侧边栏SideBar组件 + 响应式布局
单/双栏Navigation组件 + 响应式布局
三分栏SideBar组件 + Navigation组件 + 响应式布局
自定义弹窗CustomDialogController组件 + 响应式布局
大图浏览Image组件
操作入口Scroll组件+Row组件横向均分
顶部栅格组件
缩进布局栅格组件
挪移布局栅格组件
重复布局栅格组件

三、侧边栏 SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器,通过子组件定义侧边栏和内容区,第一个子组件表示侧边栏,第二个子组件表示内容区。

1、子组件
  • 子组件类型:系统组件和自定义组件,不支持渲染控制类型(if/else、ForEach和LazyForEach)。
  • 子组件个数:必须且仅包含2个子组件。
  • 子组件个数异常时:3个或以上子组件,显示第一个和第二个。1个子组件,显示侧边栏,内容区为空白。
2、属性
名称参数类型描述
showSideBarboolean设置是否显示侧边栏。
默认值:true
controlButtonButtonStyle设置侧边栏控制按钮的属性。
showControlButtonboolean设置是否显示控制按钮。
默认值:true
sideBarWidthnumberLength9+
sideBarPositionSideBarPosition设置侧边栏显示位置。
默认值:SideBarPosition.Start
3、事件
onChange(callback: (value: boolean) => void)

当侧边栏的状态在显示和隐藏之间切换时触发回调。true表示显示,false表示隐藏。

触发该事件的条件:

1、showSideBar属性值变换时;

2、showSideBar属性自适应行为变化时;

3、分割线拖拽触发autoHide时。

四、案例 天气应用

通过一个天气应用,介绍一多应用的整体开发过程。

“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多,设计师无法针对每种具体设备各自出一份UX设计图。“一多”建议从设备屏幕宽度的维度,将设备划分为三大类。设计师只需要针对这三大类设备做设计,而无需关心具体的设备形态。

在这里插入图片描述

1、UX设计

默认设备和平板对应于小设备、中设备及大设备,本示例以这三类设备场景为例,介绍不同设备上的UX设计。天气主页在不同设备上的设计图如下所示。

在这里插入图片描述

另外,大设备中天气主页还允许用户开启或者隐藏侧边栏。

在这里插入图片描述

2、实现分析

将天气主页划分为9个基础区域

在这里插入图片描述

天气主页中的9个基础区域介绍及实现方案如下表所示。

编号简介实现方案
1标题栏自适应布局拉伸能力。
2天气概览Row和Column组件,并指定其子组件按照主轴起始方向对齐或居中对齐。
3每小时天气自适应布局延伸能力 。
4每日天气自适应布局延伸能力 。
5空气质量Canvas画布组件绘制空气质量图,并使用Row组件和Column组件控制内部元素的布局。
6生活指数Grid响应式布局。
7日出日落Canvas画布组件绘制日出日落图 。
8应用信息Row和Column组件,并指定其子组件居中对齐。
9侧边导航栏综合运用自适应布局中的拉伸能力、占比能力和延伸能力 。

天气主页右侧的城市天气详情由区域1-8组成,区域1(标题栏)始终固定在页面顶部,区域2-8在不同设备下的布局不同且可以随页面上下滚动。本小节介绍如何实现城市天气详情中区域2~8的布局效果。

设备屏幕可能无法一次性显示区域2-8的所有内容,故需要在外层增加滚动组件(即Scroll组件)以支持上下滚动。不同设备下区域2-8的相对位置一共有三套不同的布局,可以借助响应式布局中的栅格布局实现这一效果。本示例中将栅格在不同场景下分别划分为4列、8列和12列,区域2-8在不同场景下的布局如下表所示。

在这里插入图片描述

为提升用户体验,大设备侧边栏隐藏状态下,每日天气与空气质量的相对顺序发生了改变。可以通过调整GridCol栅格子组件的order属性,实现目标效果。

3、主页整体实现

综合考虑各设备下的效果,天气主页的根节点使用侧边栏组件:

  • 小设备和中设备既不展示侧边栏,也不提供控制侧边栏显示和隐藏的按钮。

  • 大设备默认展示侧边栏,同时提供控制侧边栏显示和隐藏的按钮。

另外主页右侧的城市天气详情,支持左右滑动切换城市,可以使用Swiper组件实现目标效果。

  • 小设备和中设备开启Swiper组件的导航点,引导用户通过左右滑动切换不同城市。

  • 大设备中用户通过点击侧边栏中的城市列表即可高效的切换不同城市,此时需要关闭Swiper组件的导航点。

4、具体代码

代码里数据均采用测试数据,只是为了布局展示,没有详细数据模型。
图片icon只是采用了简单的代替。

  • 主页侧边栏布局

// Weather.ets

import HomeContent from './weather/HomeContent';
import IndexTitleBar from './weather/IndexTitleBar';
import SideContent from './weather/SideContent';
import { BreakpointSystem } from '../utils/BreakpointSystem'@Entry
@Component
struct Home {@State showSideBar: boolean = false;@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'private breakpointSystem: BreakpointSystem = new BreakpointSystem();aboutToAppear() {// 注册监听this.breakpointSystem.register()}aboutToDisappear() {// 移除监听this.breakpointSystem.unregister()}build() {SideBarContainer(SideBarContainerType.Embed) {// 左侧侧边栏SideContent({ showSideBar: $showSideBar })// 右侧内容区Flex({ direction: FlexDirection.Column }) {// 基础区域1标题栏IndexTitleBar({ showSideBar: $showSideBar })// 天气详情,通过Swiper组件实现左右滑动切换城市的效果Swiper() {ForEach([1, 2, 3], (item, index) => {HomeContent({ showSideBar: this.showSideBar })})}// 大设备关闭导航点.indicator(this.currentBreakpoint !== 'lg').width('100%')}.backgroundImage($r('app.media.whiteClouds')).backgroundImageSize(ImageSize.Cover)}.height('100%').sideBarWidth('34%')// 通过状态变量,控制不同设备下侧边栏的显隐状态.showSideBar(this.currentBreakpoint == 'lg' ? this.showSideBar : false).showControlButton(this.currentBreakpoint == 'lg').controlButton({left: this.showSideBar ? 232 : 10,top: 10,width: 30,height: 20,icons: {switching: $r('app.media.switching'),shown: $r('app.media.switching'),hidden: $r('app.media.switching')}}).onChange((value: boolean) => {this.showSideBar = value}).backgroundColor('#116ACE')}
}
  • 左边栏布局9

// SideContent.ets

@Component
export default struct SideContent {@Prop showSideBar: boolean;build() {Column({ space: 10 }) {Text('天气').fontColor(Color.White).fontSize(22).fontWeight(FontWeight.Bold).width('100%').margin({ top: 40 })Search({ placeholder: '搜索城市(中文/拼音)' }).backgroundColor('rgba(255, 255, 255, 0.2)').placeholderColor(Color.White).placeholderFont({ size: 14 }).width('100%').textFont({ size: 14 })List({ space: 12 }) {ForEach([1, 2, 3, 4, 5], (item) => {ListItem() {Row() {Text('深圳').fontWeight(FontWeight.Bold).fontColor(Color.White).fontSize(20)Blank()Column() {Row({ space: 2 }) {Text('20').fontColor(Color.White).fontSize(32)Text('℃').fontColor(Color.White).fontSize(16).margin({ top: 6 })}.alignItems(VerticalAlign.Top)Text('晴').fontColor(Color.White).fontSize(14)}}.width('100%').backgroundColor('rgba(255, 255, 255, 0.1)').padding(6).borderRadius(8)}})}}.width('100%').height('100%').padding(18).backgroundColor('rgba(255, 255, 255, 0.1)')}
}
  • 右边栏整体布局

// HomeContent.ets

import AirQuality from './AirQuality';
import HoursWeather from './HoursWeather';
import IndexEnd from './IndexEnd';
import IndexHeader from './IndexHeader';
import LifeIndex from './LifeIndex';
import MultidayWeather from './MultidayWeather';
import SunCanvas from './SunCanvas';@Component
export default struct HomeContent {@Prop showSideBar: boolean;build() {// 支持滚动Scroll() {GridRow({columns: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 },breakpoints: { reference: BreakpointsReference.WindowSize } }) {// 天气概览2GridCol({ span: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 }, order: 1 }) {IndexHeader()}// 每小时天气3GridCol({ span: { sm: 4, md: 8, lg: 8 }, order: 2 }) {HoursWeather()}// 每日天气4GridCol({ span: 4, order: { sm: 3, md: 3, lg: this.showSideBar ? 3 : 4 } }) {MultidayWeather()}// 空气质量5GridCol({ span: 4, order: { sm: 4, md: 4, lg: this.showSideBar ? 4 : 3 } }) {AirQuality()}// 生活指数6GridCol({ span: 4, order: 5 }) {LifeIndex()}// 日出日落7GridCol({ span: 4, order: 6 }) {SunCanvas()}// 应用信息8GridCol({ span: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 }, order: 7 }) {IndexEnd()}}}.width('100%')}
}
  • 标题栏布局1

// IndexTitleBar.ets

@Component
export default struct IndexTitleBar {@Prop showSideBar: boolean;build() {Row() {Image($r('app.media.menu')).width(24).height(24)}.width('100%').height(44).justifyContent(FlexAlign.End).padding(10)}
}
  • 天气概览布局2

// IndexHeader.ets

@Component
export default struct IndexHeader {build() {Column({ space: 4 }) {Row({ space: 4 }) {Text('浦东新区').fontColor(Color.White).fontSize(18)Image($r('app.media.location2')).width(18).height(18)}.margin({ top: 4 })Row({ space: 4 }) {Text('20').fontColor(Color.White).fontSize(48)Text('℃').fontColor(Color.White).fontSize(16).margin({ top: 8 })}.alignItems(VerticalAlign.Top)Row({ space: 4 }) {Text('22℃ / 15℃').fontColor(Color.White).fontSize(14)}Row({ space: 4 }) {Text('晴 空气优').fontColor(Color.White).fontSize(14)}Blank()Row({ space: 10 }) {Image($r('app.media.notice')).width(14).height(14)Text('当前多云,今天和昨天温度一样,适合外出游玩!').fontColor(Color.White).fontSize(12)}.width('100%').justifyContent(FlexAlign.Start)}.width('100%').height(180).padding(10)}
}
  • 每小时天气布局3

// HoursWeather.ets

@Component
export default struct HoursWeather {build() {Row() {List({ space: 2 }) {ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], (item) => {ListItem() {Column({ space: 8 }) {Text(`上午 ${item}:00`).fontSize(12).fontColor(Color.White)Image($r('app.media.w7')).width(30).height(30).objectFit(ImageFit.Contain)Text(`${item}`).fontSize(12).fontColor(Color.White)Text('东风').fontSize(12).fontColor(Color.White)Text(`${item}`).fontSize(12).fontColor(Color.White)}.width(84).height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}})}.listDirection(Axis.Horizontal).backgroundColor('rgba(255, 255, 255, 0.1)').padding(5).borderRadius(6).width('100%')}.width('100%').height(150).padding(6)}
}
  • 每日天气布局4

// MultidayWeather.ets

@Component
export default struct MultidayWeather {build() {Row() {List({ space: 2 }) {ForEach([1, 2, 3, 4, 5, 6, 7], () => {ListItem() {Column({ space: 4 }) {Text('昨日').fontSize(12).fontColor(Color.White)Text('09/12').fontSize(12).fontColor(Color.White)Image($r('app.media.w5')).width(26).height(26).objectFit(ImageFit.Contain)Text('晴').fontSize(12).fontColor(Color.White)Text('16℃/22℃').fontSize(12).fontColor(Color.White)Button() {Text('良').fontSize(10).fontColor(Color.White)}.backgroundColor('rgba(255, 255, 255, 0.2)').padding({ top: 2, bottom: 2, left: 6, right: 6 })}.width(84).height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}})}.listDirection(Axis.Horizontal).backgroundColor('rgba(255, 255, 255, 0.1)').padding(5).borderRadius(6).width('100%').height('100%')}.width('100%').height(150).padding(6)}
}
  • 空气质量布局5

// AirQuality.ets

@Component
export default struct AirQuality {build() {Row() {Row() {Column() {Image($r('app.media.meteorological')).height('88%').objectFit(ImageFit.Contain)}.width('55%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)Column({ space: 4 }) {Row() {Text('PM10').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('181').fontColor(Color.White).fontSize(12).layoutWeight(1)}Row() {Text('PM2.5').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('43').fontColor(Color.White).fontSize(12).layoutWeight(1)}Row() {Text('NO2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('66').fontColor(Color.White).fontSize(12).layoutWeight(1)}Row() {Text('SO2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('121').fontColor(Color.White).fontSize(12).layoutWeight(1)}Row() {Text('O2').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('8').fontColor(Color.White).fontSize(12).layoutWeight(1)}Row() {Text('CO').fontColor(Color.White).fontSize(12).width('40%').opacity(0.8)Text('6').fontColor(Color.White).fontSize(12).layoutWeight(1)}}.width('45%').height('100%').padding(4).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceBetween)}.backgroundColor('rgba(255, 255, 255, 0.1)').padding(5).borderRadius(6).width('100%').height('100%')}.width('100%').height(150).padding(6)}
}
  • 生活指数布局6

// LifeIndex.ets

@Component
export default struct LifeIndex {build() {Row() {Row() {Grid() {ForEach([1, 2, 3, 4, 5, 6, 7, 8], (item) => {GridItem() {Column() {Image($r('app.media.w9')).width(26).height(26).objectFit(ImageFit.Contain)Text('昨日').fontSize(12).fontColor(Color.White)Text('晴' + item).fontSize(12).fontColor(Color.White)}}})}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr').columnsGap(2).rowsGap(2)}.backgroundColor('rgba(255, 255, 255, 0.1)').padding(5).borderRadius(6).width('100%').height('100%')}.width('100%').height(150).padding(6)}
}
  • 日出日落布局7

// SunCanvas.ets

@Component
export default struct SunCanvas {build() {Row() {Column() {Image($r('app.media.sunset')).height('88%').objectFit(ImageFit.Contain)}.backgroundColor('rgba(255, 255, 255, 0.1)').padding(5).borderRadius(6).width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)}.width('100%').height(150).padding(6)}
}
  • 应用信息布局8

// IndexEnd.ets

@Component
export default struct IndexEnd {build() {Row() {Column() {Text('中国天气').fontSize(12).fontColor(Color.White)Text('天气版本:11.1.0').fontSize(12).fontColor(Color.White)Text('关于天气与隐私的声明').fontSize(12).fontColor(Color.White)Text('版权所有©2018 华为技术有限公司保留一切权利').fontSize(12).fontColor(Color.White)}.backgroundColor('rgba(255, 255, 255, 0.1)').padding(8).borderRadius(6).width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)}.width('100%').height(120).padding(6)}
}

五、运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

鸿蒙HarmonyOS开发:一次开发,多端部署(界面级)天气应用案例

文章目录 一、布局简介二、典型布局场景三、侧边栏 SideBarContainer1、子组件2、属性3、事件 四、案例 天气应用1、UX设计2、实现分析3、主页整体实现4、具体代码 五、运行效果 一、布局简介 布局可以分为自适应布局和响应式布局,二者的介绍如下表所示。 名称简介…...

使用 Python 模拟光的折射,反射,和全反射

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...

大厂太卷了!又一款国产AI视频工具上线了,免费无限使用!(附提示词宝典)

大家好,我是程序员X小鹿,前互联网大厂程序员,自由职业2年,也一名 AIGC 爱好者,持续分享更多前沿的「AI 工具」和「AI副业玩法」,欢迎一起交流~ 记得去年刚开始分享 AI 视频工具的时候,介绍的大多…...

vue3扩展echart封装为组件库-快速复用

ECharts ECharts,全称Enterprise Charts,是一款由百度团队开发并开源,后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表,广泛应用于数据分析、商业智能、网页开发等领域。以…...

随机掉落的项目足迹:Vue3 + wangEditor5富文本编辑器——toolbar.getConfig() 查看工具栏的默认配置

问题引入 小提示:问题引入是一个讲故事的废话环节,各位小伙伴可以直接跳到第二大点:问题解决 我的项目不需要在富文本编辑器中引入添加代码块的功能,于是我寻思在工具栏上把操作代码的菜单删一删 于是我来到官网文档工具栏配置 …...

更新 Git 软件

更新 Git 软件本身是指将你当前安装的 Git 版本升级到最新版本。不同的操作系统有不同的更新方法。以下是针对 Windows、macOS 和 Linux 的 Git 更新步骤: Windows 检查当前版本: git --version访问官网下载最新版本: 访问 Git 官方网站 (ht…...

Keil根据map文件确定单片机代码存储占用flash情况

可以从map文件中查看得知,代码占用内存情况大概为35KB,而在在线仿真时,可以看到在flash的0x8008F64地址前均有数据,是代码数据,8F64(HEX)36708(DEC),36708/102335,刚好35。因此,要想操作读写flash,必须在不…...

ByteTrack多目标跟踪流程图

ByteTrack多目标跟踪流程图 点个赞吧,谢谢。...

什么是L2范数

定义: 在数学和计算中,L2 范数是一种用于测量向量长度或大小的方法,也被称为欧几里得范数。对于一个 n 维向量 x ( x 1 , x 2 , … , x n ) \mathbf{x} (x_1, x_2, \dots, x_n) x(x1​,x2​,…,xn​),其 L2 范数定义为&#x…...

Scrapy爬虫IP代理池:提升爬取效率与稳定性

在互联网时代,数据就是新的黄金。无论是企业还是个人,数据的获取和分析能力都显得尤为重要。而在众多数据获取手段中,使用爬虫技术无疑是一种高效且广泛应用的方法。然而,爬虫在实际操作中常常会遇到IP被封禁的问题。为了解决这个…...

信息技术(IT)行业的发展

近年来,信息技术(IT)行业的发展呈现出前所未有的活力和潜力。随着全球数字化转型的加速,IT行业正逐步成为推动社会经济发展的重要引擎。无论是互联网、大数据、人工智能,还是云计算、物联网,这些新兴技术都…...

C++primer第十一章使用类(矢量随机游走实例)

操作符重载 操作符重载(operator overoading)是一种形式的 C多态。 第8章介绍了C是如何使用户能够定义多个名称相同但特征标(参数列表)不同的函数的。这被称为函数重载(function overloading)或函数多态(functional polymorphism),旨在让您能够用同名的函数来完成…...

服务器为什么会受到网络攻击?

随着科技的 快速发展,企业也开展了越来越多的线上业务,但同时也遭受到各种各样的网络攻击,那服务器为什么会受到网络攻击呢?下面就让小编带领大家一起来了解一下吧! 首先企业中服务器被攻击的原因有很多,主…...

IDA Pro基本使用

IDA Pro基本使用 1.DllMain的地址是什么? 打开默认在的位置1000D02E就是DllMain地址 按空格键可以看到图形化界面选择options、general勾选对应的选项在图像化也能看到 2.使用Imports 窗口并浏览到 gethostbyname,导入函数定位到什么地址? 这里可以打开Impo…...

Day.js时间插件的安装引用与常用方法大全

🚀 个人简介:某大型国企资深软件研发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~ 💟 作 者:码喽的自我修养&#x1f9…...

aws 容器镜像仓库操作

aws 容器镜像仓库产品叫ECR,官方文档参考:Amazon Elastic Container Registry。 1)账号认证 # 配置aws命令 $ aws configure set aws_access_key_id ${ak} $ aws configure set aws_secret_access_key ${sk} 2)镜像仓库登陆 #…...

学习记录:js算法(四十一): 基于时间的键值存储

文章目录 基于时间的键值存储网上思路 总结 基于时间的键值存储 设计一个基于时间的键值数据结构,该结构可以在不同时间戳存储对应同一个键的多个值,并针对特定时间戳检索键对应的值。 实现 TimeMap 类: TimeMap() 初始化数据结构对象void se…...

C语言 | Leetcode C语言题解之第424题替换后的最长重复字符

题目&#xff1a; 题解&#xff1a; int characterReplacement(char* s, int k) {int num[26];memset(num, 0, sizeof(num));int n strlen(s);int maxn 0;int left 0, right 0;while (right < n) {num[s[right] - A];maxn fmax(maxn, num[s[right] - A]);if (right - …...

大数据时代的PDF解析:技术与挑战

在大数据时代&#xff0c;海量信息以不同格式存储&#xff0c;其中 PDF 文件凭借其广泛应用成为了各种业务场景下的主要文档格式。无论是政府文件、企业报告&#xff0c;还是学术论文和技术文档&#xff0c;PDF 都是信息交流的重要媒介。然而&#xff0c;随着信息的爆炸式增长&…...

《nmap 命令全解析:网络探测与安全扫描的利器》

文章目录 一、引言二、nmap 命令概述三、nmap 基本用法&#xff08;一&#xff09;安装 nmap&#xff08;二&#xff09;简单扫描示例 四、nmap 常见参数&#xff08;一&#xff09;-sS&#xff08;TCP SYN 扫描&#xff09;&#xff08;二&#xff09;-sT&#xff08;TCP 连接…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...