鸿蒙4.0 ArkTS语法项目实战：实现一个待买待做列表

导读

鸿蒙操作系统（HarmonyOS）是华为公司自主开发的分布式操作系统，致力于构建全场景智能终端生态。鸿蒙4.0版本引入了ArkTS语法，该语法可以让开发者在使用JavaScript进行开发时获得更好的类型检查和提示，提高开发效率。本篇博客将使用鸿蒙4.0 ArkTS语法，通过实战演示，教你如何构建一个待买待做列表应用。

准备工作

在开始之前，确保你已经安装了鸿蒙4.0开发环境，并且具备基本的鸿蒙开发知识。如果你还没有安装开发环境，可以参考鸿蒙官方文档进行安装。

步骤一：创建项目文件夹

首先，在你的开发目录下创建一个新的项目文件夹，命名为"TodoList"。在终端中，使用以下命令创建项目文件夹：

mkdir TodoList

进入项目文件夹：

cd TodoList

步骤二：初始化项目

在项目文件夹中，使用以下命令初始化鸿蒙ArkTS项目：

js-sdk init -t 4.0 web

这将在项目文件夹中生成鸿蒙4.0的Web项目文件结构。

步骤三：创建待买待做列表组件

在项目文件夹中，进入src/main/js目录，并创建一个新的文件，命名为"TodoList.ts"。在TodoList.ts文件中，编写以下代码：

import { component, useEffect, useState } from 'flexlayout'

@component
export default class TodoList extends HTMLElement {
  private todos: string[] = []
  private inputVal: string = ''

  connectedCallback() {
    this.render()
  }

  render() {
    this.innerHTML = `
      <div class="container">
        <input id="todoInput" type="text" value="${this.inputVal}" />
        <button id="addBtn">Add</button>
        <ul>
          ${this.todos.map(todo => `<li>${todo}</li>`).join('')}
        </ul>
      </div>
    `
    this.bindEvents()
  }

  bindEvents() {
    const todoInput = this.querySelector('#todoInput') as HTMLInputElement
    const addBtn = this.querySelector('#addBtn') as HTMLButtonElement

    addBtn.addEventListener('click', () => {
      this.todos.push(todoInput.value)
      this.inputVal = ''
      this.render()
    })

    todoInput.addEventListener('input', e => {
      this.inputVal = (e.target as HTMLInputElement).value
    })
  }
}

const app = document.createElement('div')
app.setAttribute('id', 'app')
app.setAttribute('class', 'app')

document.body.append(app)

ReactDOM.render(<TodoList />, document.getElementById('app'))

该代码创建了一个TodoList组件，包含一个输入框和一个待办事项列表。你可以通过输入框输入待办事项，并点击"Add"按钮添加到列表中。

步骤四：编译和运行项目

回到项目根目录，使用以下命令编译鸿蒙ArkTS项目：

js-sdk run build

编译完成后，在项目根目录中生成build文件夹。

然后，使用以下命令在模拟器或真机中运行项目：

js-sdk run serve

此时，你可以在浏览器中通过鸿蒙模拟器地址访问待买待做列表应用。

总结

本篇博客介绍了如何使用鸿蒙4.0 ArkTS语法构建一个简单的待买待做列表应用。通过实战演示，我们学习了如何创建组件、绑定事件，并了解了鸿蒙4.0开发流程。希望本篇博客对你的鸿蒙开发之旅有所帮助！如果你想进一步学习鸿蒙开发，可以参考鸿蒙官方文档进行深入学习。Happy coding！

本文来自极简博客，作者：编程狂想曲，转载请注明原文链接：鸿蒙4.0 ArkTS语法项目实战：实现一个待买待做列表