企业官网建设流程全解析

查询数据的网站怎么做的,wordpress psd,p2p网站开发的多少钱,浙江网站建设推广公司找哪家系列文章第1篇 | 作者#xff1a;红目香薰 | 更新时间#xff1a;2025年#x1f4d6; 前言 随着鸿蒙PC平台的快速发展#xff0c;越来越多的开发者开始为PC端开发应用。为了提升开发效率#xff0c;我们开发了一套完整的、可复用的第三方UI控件库。本系列文章将详细介绍每…系列文章第1篇| 作者红目香薰 | 更新时间2025年 前言随着鸿蒙PC平台的快速发展越来越多的开发者开始为PC端开发应用。为了提升开发效率我们开发了一套完整的、可复用的第三方UI控件库。本系列文章将详细介绍每个控件的使用方法、最佳实践和高级特性。本文作为系列文章的第一篇将重点介绍控件库的品牌标识系统这是整个控件库的核心特性之一。 什么是品牌标识系统品牌标识系统是这套控件库的独特设计每个控件都会在左下角显示一个独特的标识圆圈内红色文字类似 © 符号。这个设计有以下几个目的品牌识别让使用者一眼就能识别出这是来自我们控件库的组件视觉统一确保所有控件都有一致的视觉特征开源标识作为开源项目标识有助于推广和识别标识样式特点位置控件左下角样式圆圈内红色文字默认文字PC可自定义默认大小16vp可调整颜色方案文字颜色#FF3B30红色边框颜色#E5E5E5浅灰色背景颜色#FFFFFF白色 快速开始项目层级cmd的tree无法显示所有列表我这里给了个代码的结构。entry/src/main/ets/ ├── components/# 控件库主目录│ ├── common/# 通用组件│ │ ├── BaseComponent.ets# 基础组件包装器自动添加品牌标识│ │ ├── BrandBadge.ets# 品牌标识组件圆圈内红字│ │ └── index.ets# 统一导出文件│ └── README.md# 控件库使用指南│ ├── theme/# 主题配置系统│ ├── BrandTheme.ets# 品牌标识主题配置│ ├── ComponentTheme.ets# 控件库全局主题配置│ └── README.md# 主题配置说明文档│ ├── pages/# 页面文件│ ├── Index.ets# 主页面展示控件示例│ └── BrandBadgeDemo.ets# 品牌标识演示页面│ ├── entryability/# 应用入口能力│ └── EntryAbility.ets# 应用主入口│ └── entrybackupability/# 备份能力└── EntryBackupAbility.ets# 备份入口安装和引入首先将控件库代码复制到你的项目中然后引入组件import{BaseComponent,BrandBadge}from../components/common方式一使用 BaseComponent 包装器推荐BaseComponent是最简单的使用方式它会自动为你的控件添加品牌标识Entry Component struct MyPage{build(){Column(){// 使用 BaseComponent 包装你的控件BaseComponent({brandText:PC,// 标识文字默认 PCshowBrand:true,// 是否显示默认 truebrandSize:16,// 标识大小默认 16vpcomponentWidth:100%,// 组件宽度默认 100%componentHeight:200// 组件高度默认 100%}){// 你的控件内容Column({space:10}){Text(我的第一个控件).fontSize(18).fontWeight(FontWeight.Bold)Text(这是使用 BaseComponent 包装的控件).fontSize(14).fontColor(#666666)}.width(100%).height(100%).padding(20).backgroundColor(#F5F5F5).borderRadius(8)}}.width(100%).height(100%).padding(20)}}优点✅ 使用简单一行代码即可✅ 自动处理标识位置✅ 支持统一配置方式二手动添加 BrandBadge如果你需要更灵活的控制可以手动添加BrandBadge组件Entry Component struct MyPage{build(){Stack({alignContent:Alignment.BottomStart}){// 你的控件内容Column({space:10}){Text(我的第二个控件).fontSize(18).fontWeight(FontWeight.Bold)Text(这是手动添加品牌标识的控件).fontSize(14).fontColor(#666666)}.width(100%).height(200).padding(20).backgroundColor(#EFF6FF).borderRadius(8)// 手动添加品牌标识BrandBadge({text:PC,badgeSize:18,visible:true,textColor:#FF3B30,circleBorderColor:#E5E5E5,circleBackgroundColor:#FFFFFF})}.width(100%).height(200)}}优点✅ 更灵活的位置控制✅ 可以自定义每个控件的标识样式✅ 适合特殊布局需求⚙️ 品牌标识配置核心设计理念所有配置都在代码中不依赖任何JSON文件这个设计让其他项目引入控件库后可以直接修改配置无需修改JSON资源文件大大提升了灵活性。配置方式一直接修改静态属性推荐import{BrandTheme}from../theme/BrandTheme// 在应用启动时如 EntryAbility.onCreate修改配置BrandTheme.BRAND_TEXTHWPC// 修改标识文字BrandTheme.BRAND_TEXT_COLOR#FF0000// 修改文字颜色BrandTheme.BRAND_BORDER_COLOR#CCCCCC// 修改边框颜色BrandTheme.BRAND_BACKGROUND_COLOR#F0F0F0// 修改背景颜色BrandTheme.BRAND_SIZE20// 修改标识大小配置方式二批量设置import{BrandTheme}from../theme/BrandTheme// 批量设置所有配置BrandTheme.setConfig({text:HWPC,// 标识文字size:18,// 标识大小textColor:#FF3B30,// 文字颜色borderColor:#E5E5E5,// 边框颜色backgroundColor:#FFFFFF,// 背景颜色textColorDark:#FF6B6B,// 暗色模式文字颜色borderColorDark:#4A4A4A,// 暗色模式边框颜色backgroundColorDark:#1C1C1E// 暗色模式背景颜色})配置方式三获取主题颜色支持暗色模式import{BrandTheme}from../theme/BrandTheme// 检测系统主题constisDark// 你的主题检测逻辑// 获取对应主题的颜色consttextColorBrandTheme.getTextColor(isDark)constborderColorBrandTheme.getBorderColor(isDark)constbackgroundColorBrandTheme.getBackgroundColor(isDark) 完整配置示例在应用启动时配置// EntryAbility.etsimport{BrandTheme}from./theme/BrandThemeimport{ComponentTheme}from./theme/ComponentThemeexportdefaultclassEntryAbilityextendsUIAbility{onCreate(want:Want,launchParam:AbilityConstant.LaunchParam){// 配置品牌标识BrandTheme.setConfig({text:HWPC,size:18,textColor:#FF3B30,borderColor:#E5E5E5,backgroundColor:#FFFFFF})// 配置全局主题ComponentTheme.setTheme({primaryColor:#007AFF,textPrimary:#000000,backgroundColor:#FFFFFF,borderRadius:8,spacing:16})// ... 其他初始化代码}} API 参考BrandBadge 组件属性说明属性名类型默认值说明textstringPC标识文字badgeSizenumber16标识大小vpvisiblebooleantrue是否显示textColorstring#FF3B30文字颜色circleBorderColorstring#E5E5E5圆圈边框颜色circleBackgroundColorstring#FFFFFF圆圈背景颜色使用示例BrandBadge({text:PC,badgeSize:18,visible:true,textColor:#FF3B30,circleBorderColor:#E5E5E5,circleBackgroundColor:#FFFFFF})BaseComponent 组件属性说明属性名类型默认值说明brandTextstringPC品牌标识文字showBrandbooleantrue是否显示品牌标识brandSizenumber16品牌标识大小vptextColorstring从BrandTheme读取文字颜色badgeBorderColorstring从BrandTheme读取边框颜色badgeBackgroundColorstring从BrandTheme读取背景颜色componentWidthstring | number100%组件宽度componentHeightstring | number100%组件高度使用示例BaseComponent({brandText:PC,showBrand:true,brandSize:18,componentWidth:100%,componentHeight:200}){// 你的控件内容}BrandTheme 类静态属性属性名类型默认值说明BRAND_TEXTstringPC品牌标识文字BRAND_SIZEnumber16品牌标识大小vpBRAND_TEXT_COLORstring#FF3B30文字颜色BRAND_BORDER_COLORstring#E5E5E5边框颜色BRAND_BACKGROUND_COLORstring#FFFFFF背景颜色BRAND_TEXT_COLOR_DARKstring#FF6B6B暗色模式文字颜色BRAND_BORDER_COLOR_DARKstring#4A4A4A暗色模式边框颜色BRAND_BACKGROUND_COLOR_DARKstring#1C1C1E暗色模式背景颜色静态方法// 获取文字颜色根据主题staticgetTextColor(isDark:booleanfalse):string// 获取边框颜色根据主题staticgetBorderColor(isDark:booleanfalse):string// 获取背景颜色根据主题staticgetBackgroundColor(isDark:booleanfalse):string// 批量设置配置staticsetConfig(config:BrandConfig):void 最佳实践1. 统一配置管理建议在应用启动时统一配置品牌标识而不是在每个组件中单独设置// ✅ 推荐在 EntryAbility 中统一配置BrandTheme.BRAND_TEXTHWPCBrandTheme.BRAND_SIZE18// ❌ 不推荐在每个组件中单独设置BaseComponent({brandText:HWPC,brandSize:18}){...}2. 使用 BaseComponent 包装器对于大多数场景推荐使用BaseComponent包装器它更简单且统一// ✅ 推荐使用 BaseComponentBaseComponent(){// 你的控件}// ⚠️ 仅在需要特殊布局时使用手动方式Stack(){// 你的控件BrandBadge()}3. 支持暗色模式如果你的应用支持暗色模式记得配置暗色模式的颜色BrandTheme.setConfig({textColor:#FF3B30,// 浅色模式textColorDark:#FF6B6B,// 暗色模式borderColor:#E5E5E5,borderColorDark:#4A4A4A,backgroundColor:#FFFFFF,backgroundColorDark:#1C1C1E})4. 自定义品牌标识文字你可以将标识文字改为你的品牌名称或项目名称// 使用项目名称BrandTheme.BRAND_TEXTMyApp// 使用品牌缩写BrandTheme.BRAND_TEXTHWPC// 使用特殊字符单字符推荐BrandTheme.BRAND_TEXT★ 常见问题Q1: 如何隐藏品牌标识// 方式1在 BaseComponent 中设置BaseComponent({showBrand:false}){// 你的控件}// 方式2在 BrandBadge 中设置BrandBadge({visible:false})Q2: 如何修改标识位置品牌标识默认在左下角。如果需要调整位置可以使用手动方式Stack({alignContent:Alignment.TopEnd}){// 改为右上角// 你的控件BrandBadge()}Q3: 如何在不同控件中使用不同大小的标识// 方式1在 BaseComponent 中单独设置BaseComponent({brandSize:20}){...}BaseComponent({brandSize:14}){...}// 方式2在 BrandBadge 中单独设置BrandBadge({badgeSize:20})BrandBadge({badgeSize:14})Q4: 配置修改后不生效确保在应用启动时如EntryAbility.onCreate修改配置而不是在组件内部// ✅ 正确在 EntryAbility 中配置exportdefaultclassEntryAbilityextendsUIAbility{onCreate(...){BrandTheme.BRAND_TEXTHWPC}}// ❌ 错误在组件内部配置不推荐Component struct MyComponent{build(){BrandTheme.BRAND_TEXTHWPC// 不推荐}} 完整示例代码示例1基础使用import{BaseComponent}from../components/commonEntry Component struct Example1{build(){Column(){BaseComponent({componentWidth:90%,componentHeight:150}){Column({space:10}){Text(基础示例).fontSize(20).fontWeight(FontWeight.Bold)Text(这是使用 BaseComponent 的基础示例).fontSize(14).fontColor(#666666)}.width(100%).height(100%).justifyContent(FlexAlign.Center).padding(20).backgroundColor(#F9FAFB).borderRadius(12)}}.width(100%).height(100%).padding(20).justifyContent(FlexAlign.Center)}}示例2不同大小的标识import{BaseComponent}from../components/commonEntry Component struct Example2{build(){Row({space:20}){// 小标识BaseComponent({brandSize:14,componentWidth:30%,componentHeight:100}){Text(小标识).fontSize(16)}// 中标识BaseComponent({brandSize:18,componentWidth:30%,componentHeight:100}){Text(中标识).fontSize(16)}// 大标识BaseComponent({brandSize:24,componentWidth:30%,componentHeight:100}){Text(大标识).fontSize(16)}}.width(100%).padding(20)}}示例3自定义颜色import{BrandBadge}from../components/commonEntry Component struct Example3{build(){Stack({alignContent:Alignment.BottomStart}){Column(){Text(自定义颜色示例).fontSize(18).fontWeight(FontWeight.Bold)}.width(100%).height(150).padding(20).backgroundColor(#EFF6FF).borderRadius(12)// 自定义颜色的品牌标识BrandBadge({text:PC,badgeSize:20,textColor:#007AFF,// 蓝色文字circleBorderColor:#007AFF,// 蓝色边框circleBackgroundColor:#E3F2FD// 浅蓝背景})}.width(90%).height(150)}} 总结品牌标识系统是这套鸿蒙PC UI控件库的核心特性之一它提供了简单易用两种使用方式满足不同需求灵活配置所有配置都在代码中方便修改统一视觉确保所有控件都有一致的品牌标识暗色模式支持完整的暗色模式配置在下一篇文章中我们将介绍控件库的第一个实际控件PrimaryButton主要按钮敬请期待下一篇预告《鸿蒙PC UI控件库 - PrimaryButton 主要按钮详解》本文是鸿蒙PC UI控件库系列文章的第1篇后续将陆续发布更多控件的详细教程。