# TodoList应用开发样例

### 样例简介

TodoList应用是基于OpenHarmony SDK开发的安装在润和HiSpark Taurus AI Camera(Hi3516d)开发板标准系统上的应用；应用主要功能是以列表的形式，展示需要完成的日程；通过本demo可以学习到 JS UI 框架List使用；

#### 运行效果

![样例效果](./media/home_page.png)

#### 样例原理

本demo只有一个list组件组成，初始化数据展示列表，并设置点击事件改变数据状态，重新渲染列表

![原理图](./media/principle.png)



#### 工程版本

+ 系统版本/API版本：OpenHarmony SDK API 8
+ IDE版本：DevEco Studio 3.0 Beta3

### 快速上手

#### 准备硬件环境

[ 搭建标准系统环境](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/quick-start/quickstart-standard-env-setup.md)

#### 准备开发环境

- 安装最新版[DevEco Studio](https://gitee.com/link?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdevelop%2Fdeveco-studio%23download_beta_openharmony)。
- 请参考[配置OpenHarmony SDK](https://gitee.com/openharmony/docs/blob/update_master_0323/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md)，完成**DevEco Studio**的安装和开发环境配置。

#### 准备工程

##### 配置git

- 提前注册准备码云gitee账号。

- git工具下载安装

  ```
  sudo apt install git
  sudo apt install git-lfs
  ```

- 配置git用户信息

  ```
  git config --global user.name "yourname"
  git config --global user.email "your-email-address"
  git config --global credential.helper store
  ```

##### git下载

```
git clone https://gitee.com/openharmony-sig/knowledge_demo_smart_home.git --depth=1
```

##### 工程导入

- DevEco Studio导入本工程;

  打开DevEco Studio,点击File->Open->下载路径/FA/TodoList

  ![打开工程](./media\open_project.png)![导入工程](./media\import_project.png)



#### 编译

- 点击**File > Project Structure** > **Project > Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示：![运行](./media/sign.png)

- 点击Build->Build Hap/APPs 编译，编译成功生成entry-debug-rich-signed.hap


![编译](./media\build_hap.png)![编译完成](./media/build_complete.png)

#### 烧录/安装

- 识别到设备后点击![img](./media/install.png)，或使用默认快捷键Shift+F10（macOS为Control+R)运行应用。

![运行](./media/run_device.png)

- [安装应用](https://gitee.com/openharmony/docs/blob/update_master_0323/zh-cn/application-dev/quick-start/installing-openharmony-app.md) 如果IDE没有识别到设备就需要通过命令安装，如下

  打开**OpenHarmony SDK路径 \toolchains** 文件夹下，执行如下hdc_std命令，其中**path**为hap包所在绝对路径。

  ```
  hdc_std install -r path\entry-debug-standard-ark-signed.hap
  ```

  **PS**环境准备，源码下载，编译，烧录设备，应用部署的完整步骤请参考[这里](https://blog.csdn.net/sd2131512/article/det)

#### 操作体验

##### 列表滑动

![样例效果](media/todolist.gif)

### 参考资料

- [OpenHarmony 基于JS扩展的类Web开发范式](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/Readme-CN.md)
- [OpenHarmony应用接口](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/Readme-CN.md)