企业官网建设流程全解析

哪些网站用python做服务框架,系统的php网站建设,python在线网站,公司网站建设建设很多 HarmonyOS 教程存在一个问题#xff1a;示例都很“碎”#xff0c;写完也不知道怎么组合成一个真正的应用。这篇文章我们反过来做一件事#xff1a;#x1f449; 从 0 开始#xff0c;完整地写一个 HarmonyOS 应用 #x1f449; 包含页面、状态、组件拆分、数据流、…很多 HarmonyOS 教程存在一个问题示例都很“碎”写完也不知道怎么组合成一个真正的应用。这篇文章我们反过来做一件事从 0 开始完整地写一个 HarmonyOS 应用 包含页面、状态、组件拆分、数据流、业务逻辑 写完后你能清楚回答“如果让我再加一个功能我该改哪里”一、我们要做一个什么应用先定目标避免迷路。 应用目标一个「任务清单 App」功能很简单但足够完整添加任务删除任务显示任务列表统计任务数量组件拆分清晰使用HarmonyOS 推荐写法这是很多真实 App 的“雏形”。二、项目结构设计非常重要不要一上来就写代码先想结构。推荐结构教学友好entry/ ├─ pages/ │ └─ Index.ets // 页面入口 ├─ components/ │ ├─ TaskInput.ets // 输入组件 │ ├─ TaskItem.ets // 单条任务 │ └─ TaskList.ets // 列表组件 └─ model/ └─ TaskModel.ets // 数据模型页面 ≠ 组件 ≠ 数据模型 这是 HarmonyOS 开发中非常重要的分层思想三、第一步定义数据模型状态源头我们先从“数据”开始。model/TaskModel.etsObservedV2 export class Task { id: number title: string constructor(id: number, title: string) { this.id id this.title title } } ObservedV2 export class TaskStore { tasks: Task[] [] addTask(title: string) { this.tasks.push(new Task(Date.now(), title)) } removeTask(id: number) { this.tasks this.tasks.filter(item item.id ! id) } get count(): number { return this.tasks.length } }教学重点解释ObservedV2 告诉系统这是可观察的数据源TaskStore 类似 Vuex / Redux 的 store数据逻辑集中管理 UI 不直接操作数组四、第二步页面入口应用总控pages/Index.etsimport { TaskStore } from ../model/TaskModel import { TaskInput } from ../components/TaskInput import { TaskList } from ../components/TaskList ComponentV2 struct Index { Local store new TaskStore() build() { Column({ space: 12 }) { Text( 我的任务清单) .fontSize(22) .fontWeight(FontWeight.Bold) Text(当前任务数${this.store.count}) TaskInput({ onAdd: (title) this.store.addTask(title) }) TaskList({ tasks: this.store.tasks, onDelete: (id) this.store.removeTask(id) }) } .padding(16) } }教学重点Local store 页面私有状态页面只做三件事组合组件管理数据传递事件页面 组装者不写具体 UI 细节五、第三步输入组件事件驱动components/TaskInput.etsComponentV2 export struct TaskInput { Local text: string Event onAdd: (title: string) void build() { Row({ space: 8 }) { TextInput({ placeholder: 输入任务内容 }) .onChange(value this.text value) .layoutWeight(1) Button(添加) .onClick(() { if (this.text.trim().length 0) { this.onAdd(this.text) this.text } }) } } }教学重点Event 子组件向父组件“汇报事件”子组件不关心数据存哪里只负责触发行为这是非常标准、推荐的组件通信方式六、第四步列表组件参数 事件components/TaskList.etsimport { Task } from ../model/TaskModel import { TaskItem } from ./TaskItem ComponentV2 export struct TaskList { Param tasks: Task[] Event onDelete: (id: number) void build() { Column({ space: 8 }) { ForEach(this.tasks, (item: Task) { TaskItem({ task: item, onDelete: this.onDelete }) }, item item.id.toString()) } } }教学重点Param 父组件传入的数据ForEach 列表渲染的标准方式key 很重要item.id保证渲染稳定七、第五步单条任务组件最小职责components/TaskItem.etsimport { Task } from ../model/TaskModel ComponentV2 export struct TaskItem { Param task: Task Event onDelete: (id: number) void build() { Row({ space: 12 }) { Text(this.task.title) .layoutWeight(1) Button(删除) .onClick(() this.onDelete(this.task.id)) } .padding(8) .backgroundColor(#f5f5f5) .borderRadius(8) } } 一个组件只做一件事 不操作全局数据 不关心存储逻辑八、到这里我们已经完成了什么你已经完成了一个✔ 可运行✔ 有完整业务逻辑✔ 有数据模型✔ 有组件拆分✔ 有父子通信✔ 使用 V2 状态管理✔ 符合 HarmonyOS 设计思想的完整应用。九、如果我要扩展功能该怎么做示例 1加“完成状态”给Task增加done: boolean在TaskItem增加勾选按钮TaskStore增加toggleDone()UI 不用大改。示例 2数据持久化在TaskStore中使用 Preferences 存储启动时加载页面完全不用动好架构的标志改动点集中十、这篇文章你真正应该学到的不是代码而是这 5 个核心思想状态集中管理组件职责单一数据向下流事件向上传UI 不直接操作业务V2 状态管理更适合真实项目结语写 HarmonyOS 应用真正的难点不是 API而是“如何组织代码”。如果你能按照这篇文章的方式写完一遍你已经超过了大多数只会抄 Demo 的开发者。