## TodoList ### 简介 TodoList应用是基于OpenHarmony SDK开发的安装在润和HiSpark Taurus AI Camera(Hi3516d)开发板上的应用；应用主要功能是以列表的形式，展示需要完成的日程；通过本demo可以学习到 JS UI 框架List使用； ![image-20211124092813545](resources/todolist.gif) ### 工程目录 完整的项目结构目录如下 ``` ├─entry\src\main │ │ config.json //应用配置文件 │ │ │ ├─js │ │ └─MainAbility │ │ │ app.js // 应用程序入口 │ │ │ │ │ ├─common // 公共资源 │ │ │ │ checkbutton.png │ │ │ │ delete.png │ │ │ │ done.png │ │ │ │ head0.png │ │ │ │ head1.png │ │ │ │ head2.png │ │ │ │ head3.png │ │ │ │ head4.png │ │ │ │ right.png │ │ │ │ │ │ │ └─images │ │ │ bg-tv.jpg │ │ │ Wallpaper.png │ │ │ │ │ ├─i18n // 多语言文件 │ │ │ en-US.json │ │ │ zh-CN.json │ │ │ │ │ └─pages │ │ └─index │ │ index.css //页面样式 │ │ index.hml //首页展示 │ │ index.js //页面逻辑 │ │ │ └─resources │ ├─base │ │ ├─element │ │ │ string.json │ │ │ │ │ └─media │ │ icon.png │ │ │ └─rawfile ``` ### 开发步骤 #### 1. 新建OpenHarmony ETS项目 在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next，Language 选择JS语言，最后点击Finish即创建成功。 ![image-20211124092813545](resources/new_project.png) #### 2. 编写主页面 ![image-20211124093106260](resources/home_page.png) ##### 2.1页面展示 1）最外层是[div](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md)容器，并在class里面设置背景色为黑色按行布局； 2）再通过[list](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md)包裹[list-item](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md) 的 内层div 容器按列布局，并设置点击事件[onclick](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md) 3）[div](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md)容器按列布局依次写入[image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md) 组件和 div 容器 ； 4）div容器里面又包裹一个div容器和以及[text](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md)组件,且div容器里面也是两个按列布局的[text](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md) ```
{{$item.event}}
{{$item.time}}
``` ##### 2.2点击事件 点击某一行后，并根据当前行的状态改变相反的状态 ``` completeEvent(e) { for (let i of this.taskList) { if (i.id == e) { if (i.checkBtn == "/common/done.png") { i.checkBtn = "/common/checkbutton.png"; i.showTag = 'show'; i.color = 'text-default'; i.completeState = false; } else { i.checkBtn = "/common/done.png"; i.showTag = 'hide'; i.color = 'text-gray'; i.completeState = true; } return; } } }, ``` ### 项目下载和导入 项目地址：https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/TodoList 1）git下载 ``` git clone git@gitee.com:openharmony-sig/knowledge_demo_smart_home.git ``` 2）项目导入 打开DevEco Studio,点击File->Open->下载路径FA/TodoList ### 约束与限制 #### 1. 设备编译约束 - [获取OpenHarmony源码](https://www.openharmony.cn/pages/0001000202/#%E5%AE%89%E8%A3%85%E5%BF%85%E8%A6%81%E7%9A%84%E5%BA%93%E5%92%8C%E5%B7%A5%E5%85%B7)，OpenHarmony版本须3.0LTS； - [安装开发板环境](https://www.openharmony.cn/pages/0001000400/#hi3516%E5%B7%A5%E5%85%B7%E8%A6%81%E6%B1%82) - [开发板烧录](https://www.openharmony.cn/pages/0001000401/#%E4%BD%BF%E7%94%A8%E7%BD%91%E5%8F%A3%E7%83%A7%E5%BD%95) #### 2. 应用编译约束 - 参考 [应用开发快速入门](https://www.openharmony.cn/pages/00090000/) - 集成开发环境：DevEco Studio 3.0.0.601版本[下载地址](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)； - OpenHarmony SDK 3.0.0.0；