鸿蒙待办事项应用【鸿蒙专题14】

在前几篇文章里也介绍了许多关于鸿蒙开发的技巧，今天我们就来做自己的第一个代办事项应用。鸿蒙开发和Flutter一样，都具有跨平台的特性，Flutter一套代码可以在Android，ios，web。linux，desk等部署，鸿蒙也有这样的特性，可同时在手机、大屏、手表生效，体验“一次开发、多设备部署”特性。

接下来我们开始正文

第一步必然是安装 DevEco Studio 。推荐安装3.0beta版，学习的话，用3.0还是蛮不错的。

第二部新建工程

自从微信小程序出现以来，各种“小程序”如雨后春笋一般出现。事实证明小程序这种开发方式非常好，鸿蒙 JS UI 框架采用类似的方式也是在意料之中的。

一个小程序（在鸿蒙 OS 中，也就是 Ability）由多个页面组成，每个页面由三部分组成：

.hml 用来描述界面的元素

.css 用来描述界面的风格

.js 用来编写处理事件逻辑

我们来看个例子：

js文件

const BUTTON_STATE_IMAGE = ["/common/checkbutton.png", "/common/done.png"]; const TAG_STATE = ["show", "hide"]; const TEXT_COLOR = ["text-default", "text-gray"]; const EVENT_LEVEL = ["urgent", "senior", "middle", "low"]; export default { title: "任务列表", taskList: [ { id: "id-1", event: "购买礼物", time: "10:30", checkBtn: BUTTON_STATE_IMAGE[1], color: TEXT_COLOR[1], showTag: TAG_STATE[1], tag: EVENT_LEVEL[1], }, { id: "id-2", event: "健身锻炼", time: "15:30", checkBtn: BUTTON_STATE_IMAGE[0], color: TEXT_COLOR[0], showTag: TAG_STATE[0], tag: EVENT_LEVEL[0], }, { id: "id-3", event: "生日约会", time: "19:30", checkBtn: BUTTON_STATE_IMAGE[0], color: TEXT_COLOR[0], showTag: TAG_STATE[0], tag: EVENT_LEVEL[2], }, ] };

css文件

.container { flex-direction: column; background-color: black; } .title { font-weight: 600; color: #ccc; background-color: black; opacity: 1; } .tag-list { width: 100%; } .todo-list-item { width: 100%; } .todo-item { width: 100%; border-radius: 2px; align-items: center; } .flex-row { display: flex; flex-direction: row; align-items: center; } .todo-name-mark { width: 100%; height: 100%; align-items: center; } .todo-name { font-size: 16px; color: white; margin-right: 2px; max-lines: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; vertical-align: middle; } .text-default { color: white; } .text-gray { color: gray; } .todo-mark { width: 9px; height: 9px; margin-left: 8px; border-radius: 25px; background-color: lightslategrey; } .todo-time { font-size: 14px; width: 100%; height: 100%; text-align: left; color: gray; margin-top:1px; } .urgent { background-color: firebrick; } .senior { background-color: gold; } .middle { background-color: mediumaquamarine; } .low { background-color: #0D9FFB; } .hide { display: none; } .show { display: inline-block; } .todo-image { width: 20px; height: 20px; object-fit: contain; margin-top: 1px; } .todo-text-wrapper { height: 100%; flex-grow: 1; margin: 0px 16px; flex-direction: column; } @media (device-type: tv) { .title { font-size: 22px; padding: 10px; } .tag-list { padding-top:30px; padding-left:12px; } .todo-list-item { margin-top: 20px; } .todo-image { width: 20px; height: 20px; } .todo-name { font-size: 18px; max-width: 460px } } @media (device-type: phone) { .title { font-size: 21px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; } .tag-list { padding-top:48px; } .todo-list-item { margin: 2px 8px; } .todo-name-mark { margin: 5px 0px; } .todo-name { max-width: 180px; } } @media (device-type: wearable) { .title { font-size: 26px; width: 100%; height: 54px; text-align: center; } .tag-list { padding-top:54px; } .todo-list-item { padding-left: 50px; padding-right: 25px; } .todo-name-mark { margin: 3px 0px; } .todo-name { max-width: 106px } }

htm文件

{{title}}

index.css

.container { flex-direction: column; justify-content: center; align-items: center; left: 0px; top: 0px; width: 454px; height: 454px; }

index.js

export default { data: { count: 5 }, inc() { this.count++; }, dec() { this.count--; } }

参考文档

https://my.oschina.net/u/3979680/blog/4613811?_from=gitee_search

小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。