企业官网建设流程全解析

学习网站建设的心得,哪些网站做的比较好的,酷家乐设计官网,确定网站推广目标网罗开发#xff08;小红书、快手、视频号同名#xff09;大家好#xff0c;我是 展菲#xff0c;目前在上市企业从事人工智能项目研发管理工作#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术#xff0c;包括iOS、前端、Harmony OS、Java、Python等方…网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者《ESP32-C3 物联网工程开发实战》图书作者《SwiftUI 入门进阶与实战》超级个体COC上海社区主理人特约讲师大学讲师谷歌亚马逊分享嘉宾科技博主华为HDE/HDG我的博客内容涵盖广泛主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告同时也会提供产品优缺点分析、横向对比并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。展菲您的前沿技术领航员 大家好我是展菲 全网搜索“展菲”即可纵览我在各大平台的知识足迹。 公众号“Swift社区”每周定时推送干货满满的技术长文从新兴框架的剖析到运维实战的复盘助您技术进阶之路畅通无阻。 微信端添加好友“fzhanfei”与我直接交流不管是项目瓶颈的求助还是行业趋势的探讨随时畅所欲言。 最新动态2025 年 3 月 17 日快来加入技术社区一起挖掘技术的无限潜能携手迈向数字化新征程文章目录前言ArkTS 与 TS 的差异声明式 UI 的基本写法组件结构常用布局与属性状态管理State 与 PropState组件内部状态Prop父到子的单向传递Link父子双向同步Watch监听状态变化总结何时用哪种装饰器总结前言HarmonyOS 应用 UI 使用 ArkTS 编写语法上类似 TypeScript但增加了声明式 UI 和状态管理能力。从传统命令式「先取控件再 set 属性」转向「描述 UI 与数据关系、由框架驱动更新」是很多开发者需要适应的变化。本文只讲 ArkTS 中与声明式 UI、状态管理相关的核心概念和关键代码不展开完整页面示例便于快速建立心智模型。ArkTS 与 TS 的差异ArkTS 是 TypeScript 的扩展在 TS 基础上做了约束和增强支持类型标注、接口、类、模块化限制不支持any、不支持动态改变对象原型等以保证运行时可预测性扩展Component、State、Link等装饰器以及声明式 UI 组件因此写 ArkTS 时仍然是在写「强类型的 TS」只是多了一套 UI 与状态绑定的规则。声明式 UI 的基本写法在 ArkTS 中页面由自定义组件组成每个组件是一个用Component装饰的 struct其build()方法返回一棵 UI 树。组件结构Componentstruct HelloPage{build(){Column(){Text(Hello ArkTS).fontSize(24).fontColor(#333333)}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}要点Component表示这是一个可复用的 UI 组件build()必须返回一个根节点这里是Column且只能有一个根节点子组件通过链式调用配置属性如.fontSize(24)、.fontColor(#333333)这种写法是「声明式」我们只描述「有什么组件、长什么样」不写「先找到哪个 Text 再 setText」。常用布局与属性布局常用Column纵向、Row横向、Stack堆叠、Flex等用法与 Flutter/SwiftUI 类似。例如 Row 水平排列Row(){Text(左)Text(右)}.width(100%).justifyContent(FlexAlign.SpaceBetween)样式类属性宽高、边距、对齐等一般写在容器上字体、颜色等写在具体组件上保持「布局归布局、外观归外观」即可。状态管理State 与 Prop声明式 UI 的另一个核心是「数据驱动」数据变了依赖它的 UI 自动更新。ArkTS 用多种装饰器区分「数据归属」和「更新范围」。State组件内部状态State表示状态归当前组件所有当其值变化时会触发该组件build()重新执行从而更新 UI。EntryComponentstruct CounterPage{Statecount:number0build(){Column(){Text(点击次数:${this.count}).fontSize(20)Button(1).onClick((){this.count})}}}要点State只能用在当前组件内子组件不能直接改父组件的State只能通过参数或回调修改this.count后框架会重新执行build()Text会显示新的count若在State上做复杂对象修改应保证「引用不变、内部字段变化」或「整体替换」以便框架正确检测变更Prop父到子的单向传递Prop表示该字段由父组件传入在子组件内是只读的父组件对应数据变化时子组件会收到新值并刷新。Componentstruct ChildCount{Propnum:numberbuild(){Text(子组件收到的值:${this.num})}}EntryComponentstruct ParentPage{Statevalue:number0build(){Column(){ChildCount({num:this.value})Button(父组件 1).onClick((){this.value})}}}父组件里this.value变化 → 传给ChildCount的num更新 → 子组件用Prop num接收并重新渲染。子组件内部不能写this.num xxx否则违反单向数据流。Link父子双向同步Link表示「和父组件某个状态双向绑定」父改子能看到子改父也能看到。实现上一般是父传一个「引用类型」或配合$语法。Componentstruct DoubleBinding{Linkvalue:numberbuild(){Row(){Text(${this.value})Button(子 -1).onClick((){this.value--})}}}EntryComponentstruct ParentPage{Statevalue:number10build(){Column(){DoubleBinding({value:$value})// $ 表示双向绑定Button(父 1).onClick((){this.value})}}}父组件用$value把State value以引用形式传给子组件子组件通过Link value修改的也是同一份数据因此两边始终一致。Watch监听状态变化若需要在某个状态变化时执行逻辑例如打点、校验可用Watch在装饰器上声明回调EntryComponentstruct WatchDemo{StateWatch(onCountChange)count:number0onCountChange(){console.info(count 变为:${this.count})}build(){Column(){Text(${this.count})Button(1).onClick(()this.count)}}}Watch(onCountChange)表示每当count变化就会调用onCountChange()。注意回调里拿到的已经是更新后的值适合做副作用不要在这里再改同一个状态导致循环更新。总结何时用哪种装饰器装饰器归属方向典型用途State当前组件-页面内部计数、表单输入、开关等Prop父 → 子单向展示父组件下发的数据只读Link父 ↔ 子双向需要子组件直接改父组件状态的场景Watch--状态变化时执行副作用日志、校验等实际开发中优先用StateProp把数据从父传到子只在确实需要「子改父」时再用Link结构会更清晰。总结ArkTS 的声明式 UI 围绕「组件 状态」Component的build()描述界面State/Prop/Link描述数据从哪里来、谁可以改。掌握「数据驱动视图」「单向数据流」和「双向绑定的使用场景」就能写出结构清晰、易于维护的 HarmonyOS 页面。后续可以在此基础上再学ObjectLink、Observed等进阶状态能力。