鸿蒙HarmonyOS开发：一次开发，多端部署（界面级）天气应用案例

news2024/9/20 12:28:54

文章目录

      • 一、布局简介
      • 二、典型布局场景
      • 三、侧边栏 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 } }) {
        // 天气概览2
        GridCol({ span: { sm: 4, md: 8, lg: this.showSideBar ? 8 : 12 }, order: 1 }) {
          IndexHeader()
        }
        // 每小时天气3
        GridCol({ span: { sm: 4, md: 8, lg: 8 }, order: 2 }) {
          HoursWeather()
        }
        // 每日天气4
        GridCol({ span: 4, order: { sm: 3, md: 3, lg: this.showSideBar ? 3 : 4 } }) {
          MultidayWeather()
        }
        // 空气质量5
        GridCol({ span: 4, order: { sm: 4, md: 4, lg: this.showSideBar ? 4 : 3 } }) {
          AirQuality()
        }
        // 生活指数6
        GridCol({ span: 4, order: 5 }) {
          LifeIndex()
        }
        // 日出日落7
        GridCol({ span: 4, order: 6 }) {
          SunCanvas()
        }
        // 应用信息8
        GridCol({ 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)
  }
}

五、运行效果

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

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

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

相关文章

828华为云征文｜华为云Flexus X实例docker部署最新Appsmith社区版，搭建自己的低代码平台

828华为云征文｜华为云Flexus X实例docker部署最新Appsmith社区版，搭建自己的低代码平台

828华为云征文｜华为云Flexus X实例docker部署最新Appsmith社区版，搭建自己的低代码平台 华为云最近正在举办828 B2B企业节，Flexus X实例的促销力度非常大，特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Ng…
阅读更多...
SQL优化-MySQL Explain中出现Select tables optimized away

SQL优化-MySQL Explain中出现Select tables optimized away

文章目录 前言相关解释总结 前言 今天在做SQL优化的时候，在使用explain执行SQL时，出现了以下情况： EXPLAIN SELECT m1.id from station m1 INNER JOIN site s ON m1.codes.stationcode where receivetime(SELECT MAX(m2.receivetime) FROM…
阅读更多...
基于Tesseract_OCR识别

基于Tesseract_OCR识别

1、安装Tesseract Mac版本，通过Homebrew进行安装即可brew install tesseract windows版本安装 下载地址：https://digi.bib.uni-mannheim.de/tesseract/ 2、更换语言包 下载语言包 https://github.com/tesseract-ocr/tesseract 亦可参照这个 Tessera…
阅读更多...
【CTF Reverse】XCTF GFSJ1101 Mine- Writeup（反编译+动态调试+Base58编码）

【CTF Reverse】XCTF GFSJ1101 Mine- Writeup（反编译+动态调试+Base58编码）

Mine- 运气怎么这么差？ 原理 Base58 Base58是用于比特币（Bitcoin）中使用的一种独特的编码方式，主要用于产生Bitcoin的钱包地址。 相比Base64，Base58不使用数字"0"，字母大写"O"&…
阅读更多...
Linux 文件权限详解与管理

Linux 文件权限详解与管理

文章目录 前言一、文件权限概述1. 权限表示格式2. 权限组合值 二、查看文件权限三、修改文件所有者与所属组1. 使用 chown 修改文件所有者2. 使用 chgrp 修改文件所属组3. 添加所有者 四、修改文件权限1. 符号方式2. 八进制方式 总结 前言 在 Linux 系统中，文件权限…
阅读更多...
React + Vite 多环境配置

React + Vite 多环境配置

1.根目录创建文件： .env.dev //测试环境 .env.development //本地环境 .env.production //正式环境 .env.uat //预发布环境 注：变量名必须使用 VITE_API 开头 2.package.json 配置： --mode 设置读取制定 .env文件 ，默认读取.en…
阅读更多...
Windows10安装cuda11.3.0+cudnn8.5.0，以及创建conda虚拟环境（pytorch）

Windows10安装cuda11.3.0+cudnn8.5.0，以及创建conda虚拟环境（pytorch）

1、检查电脑驱动版本为561.09&#xff0c;选择cuda版本&#xff0c;下图可知cuda版本<12.6。 nvidia-smi #查看驱动版本&#xff0c;以及最大可以安装的cuda版本 2、Anaconda3-2024.06-1-Windows-x86_64.exe下载&#xff1a; 官网&#xff1a;https://www.baidu.com/link?…
阅读更多...
研究生存指南：必备Zotero插件，让你的文献管理更轻松

研究生存指南：必备Zotero插件，让你的文献管理更轻松

在读研阶段&#xff0c;我经常面临大量文献阅读和项目研究的任务。忽略文献整理会导致后续使用时非常不便&#xff0c;查找困难且混乱。导师向我们推荐了 Zotero&#xff0c;经过亲身试用&#xff0c;我发现它非常好用&#xff01;zotero有非常多的插件&#xff0c;能够一个就满…
阅读更多...
了解Node开发基础知识

了解Node开发基础知识

目录 定义架构应用场景安装版本工具代码执行REPL传递参数输出全局对象 定义 Node.js 是一个基于 V8 JavaScript 引擎构建的运行时环境&#xff0c;允许你在服务器端运行 JavaScript 代码。Node.js 允许开发者使用 JavaScript 编写服务器端代码&#xff0c;实现前后端代码的统一…
阅读更多...
安全帽识别算法、安全帽智能识别、不戴安全帽检测算法

安全帽识别算法、安全帽智能识别、不戴安全帽检测算法

不戴安全帽检测算法是一种基于人工智能技术&#xff0c;用于实时监测和提醒工作人员是否正确佩戴安全帽的系统。以下是对不戴安全帽检测算法的详细介绍&#xff1a; 1. 技术原理 - 数据采集与预处理&#xff1a;通过安装在施工现场或工厂车间等场所的摄像头收集图像数据&#…
阅读更多...
HTML 盒子标签、字符实体及废弃标签介绍

HTML 盒子标签、字符实体及废弃标签介绍

目录 HTML盒子标签 div标签 span标签 字符实体 HTML注释 HTML 废弃标签介绍 关注作者微信公众号&#xff0c;开启探索更多 HTML 知识的精彩之旅。在这里&#xff0c;你将收获丰富的 HTML 专业内容&#xff0c;深入了解这一网页开发语言的奥秘&#xff0c;不断拓展你的知识…
阅读更多...
c语言面试字符串复制

c语言面试字符串复制

1&#xff0c;下面这个函数的打印是什么&#xff1a; #include<stdio.h> #include<string.h>int main() {char str0[5], str1[] "welcome";strcpy(str0, str1);printf("str0:%s\r\n",str0);printf("str1:%s\r\n",str1); } larkla…
阅读更多...
【Verilog学习日常】—牛客网刷题—Verilog快速入门—VL21

【Verilog学习日常】—牛客网刷题—Verilog快速入门—VL21

根据状态转移表实现时序电路 描述 某同步时序电路转换表如下&#xff0c;请使用D触发器和必要的逻辑门实现此同步时序电路&#xff0c;用Verilog语言描述。 电路的接口如下图所示。 输入描述&#xff1a; input A , input clk , …
阅读更多...
uniapp+renderJS+google map开发安卓版APP非小程序

uniapp+renderJS+google map开发安卓版APP非小程序

背景需求 需要在uniapp中接入google地图，研究了一番，都没有找到合适的，现在说一下教程。 效果图 前期工作 这两点缺一不可，否则你啥也看不到。 1、电脑安装L-O-U梯 用于访问G-OO-G-LE的API或者创建google map key。 2、手机安装L-O-U梯 用于显示google地图。我就是手…
阅读更多...
SpringCloud从零开始简单搭建 - JDK17

SpringCloud从零开始简单搭建 - JDK17

文章目录 SpringCloud Nacos从零开始简单搭建 - JDK17一、创建父项目二、创建子项目三、集成Nacos四、集成nacos配置中心 SpringCloud Nacos从零开始简单搭建 - JDK17 环境要求&#xff1a;JDK17、Spring Boot3、maven。 那么&#xff0c;如何从零开始搭建一个 SpringCloud …
阅读更多...
DNS攻击频发，打造防劫持DNS需强化“数据治理”理念

DNS攻击频发，打造防劫持DNS需强化“数据治理”理念

数字化转型时代&#xff0c;“一物多址&#xff0c;万物互联”正依托于DNS&#xff08;域名系统&#xff09;实现&#xff0c;DNS的重要性不言而喻。然而传统DNS协议存在诸多安全隐患&#xff0c;整个明文传输过程几乎没有认证与保护&#xff0c;导致DNS报文易被篡改&#xff0…
阅读更多...
电磁场与电磁波-1.3方向导数与梯度 1.4通量与散度

电磁场与电磁波-1.3方向导数与梯度 1.4通量与散度

方向导数 场量在方向上的空间变化率
阅读更多...
VSCode调试Unity准备工作

VSCode调试Unity准备工作

一.Unity设置VSCode为默认编辑器 Unity编辑器中Edit-Preferences-External Tools中选择VSCode 二.VSCode安装Unity插件 三.Unity的Visual Studio Editor升至最新 Window->Package Manager->Visual Studio Editor 四.下载配置.Net 8.0 安装之前VSCode会提示你下载.Net …
阅读更多...
maxwell 输出消息到 redis

maxwell 输出消息到 redis

文章目录 1、maxwell 输出消息到 redis1.1、启动一个Maxwell容器&#xff0c;它会连接到指定的MySQL数据库&#xff0c;捕获变更事件&#xff0c;并将这些事件以Redis发布/订阅的形式发送到指定的Redis服务器1.2、在已运行的 Redis 容器中执行 Redis 命令行界面&#xff08;CLI…
阅读更多...
【2023工业异常检测文献】SimpleNet

【2023工业异常检测文献】SimpleNet

SimpleNet:ASimpleNetworkforImageAnomalyDetectionandLocalization 1、Background 图像异常检测和定位主要任务是识别并定位图像中异常区域。 工业异常检测最大的难题在于异常样本少&#xff0c;一般采用无监督方法&#xff0c;在训练过程中只使用正常样本。 解决工业异常检…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023