鴻蒙待辦事項應用【鴻蒙專題14】
在前幾篇文章里也介紹了許多關于鴻蒙開發(fā)的技巧，今天我們就來做自己的第一個代辦事項應用。鴻蒙開發(fā)和Flutter一樣，都具有跨平臺的特性，F(xiàn)lutter一套代碼可以在Android，ios，web。linux，desk等部署，鴻蒙也有這樣的特性，可同時在手機、大屏、手表生效，體驗“一次開發(fā)、多設備部署”特性。
接下來我們開始正文
第一步必然是安裝 DevEco Studio 。推薦安裝3.0beta版，學習的話，用3.0還是蠻不錯的。
第二部新建工程
自從微信小程序出現(xiàn)以來，各種“小程序”如雨后春筍一般出現(xiàn)。事實證明小程序這種開發(fā)方式非常好，鴻蒙 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文件
相關文章
