我的第一個鴻蒙應用

在前幾篇文章里也介紹了許多關于鴻蒙開發的技巧，今天我們就來做自己的第一個代辦事項應用。鴻蒙開發和Flutter一樣，都具有跨平臺的特性，Flutter一套代碼可以在Android，ios，web。linux，desk等部署，鴻蒙也有這樣的特性，可同時在手機、大屏、手表生效，體驗“一次開發、多設備部署”特性。

接下來我們開始正文

先來預覽一下：

第一步必然是安裝 DevEco Studio 。推薦安裝3.0beta版，學習的話，用3.0還是蠻不錯的。

第二部新建工程

自從微信小程序出現以來，各種“小程序”如雨后春筍一般出現。事實證明小程序這種開發方式非常好，鴻蒙 JS UI 框架采用類似的方式也是在意料之中的。

一個小程序（在鴻蒙 OS 中，也就是 Ability）由多個頁面組成，每個頁面由三部分組成：

.hml 用來描述界面的元素

.css 用來描述界面的風格

.js 用來編寫處理事件邏輯

我們來看個例子：

第一步，我們創建一個項目

js文件

import todoList from "../../common/todoList.js" import router from '@system.router'; export default { data: { // 待辦事件列表 todoList, inputTodo: "IDE無法調用輸入" }, computed:{ needTodoNum(){ let num = 0; this.todoList.forEach(item => { if(!item.status){ num++; } }); return num; } }, remove(index){ console.log(index) this.todoList.splice(index,1) }, addTodo() { this.todoList.push({ info:this.inputTodo, status: false }) }, checkStatus(index){ console.log(index); this.todoList[index].status = !this.todoList[index].status; }, getNewTodo(e){ this.inputTodo = e.value; }, // goback(){ // router.back(); // } }

css文件

.container { flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 100px; } .title { font-size: 25px; margin-top: 20px; margin-bottom: 20px; color: #000000; opacity: 0.9; font-size: 28px; } .item{ width: 325px; padding: 10px 0; flex-direction: row; align-items: center; justify-content: space-around; border-bottom: 1px solid #eee; } .todo{ color: #000; width: 180px; font-size: 18px; } .switch{ font-size: 12px; texton-color: green; textoff-color:red; text-padding: 5px; width: 100px; height: 24px; allow-scale: false; } .remove { font-size: 12px; margin-left: 10px; width: 50px; height: 22px; color: #fff; background-color: red; } .info{ width: 100%; margin-top: 10px; justify-content: center; } .info-text { font-size: 18px; color: #AD7A1B; } .info-num{ color: orangered; margin-left: 10px; margin-right: 10px; } .add-todo { position: fixed; left: 0; bottom: 0; width: 100%; height: 60px; flex-direction: row; justify-content: space-around; align-items: center; background-color: #ddd; } .plan-input { width: 240px; height: 40px; background-color: #fff; } .plan-btn { width: 90px; height: 35px; font-size: 15px; }

htm文件

首先是數據源是通過導入的方式賦值給todolist。

剩余待辦事項通過comouted計算屬性來計算，遍歷數據源todolist中狀態為

false的數量。并且將其賦值給needToNum,并在頁面上進行顯示。

switch的change改變事件中，將其status反向。

checkStatus(index){ console.log(index); this.todoList[index].status = !this.todoList[index].status; },

刪除待辦事項時通過傳遞的索引從list中刪除。

remove(index){ console.log(index) this.todoList.splice(index,1) },

添加待辦事項，通過設置input的change事件

getNewTodo(e){ this.inputTodo = e.value; },

將輸入的值賦值給變量inputTodo。

然后在新增按鈕的點擊事件中

addTodo() { this.todoList.push({ info:this.inputTodo, status: false }) },

往數據源中新增一個對象。

數據源是從common下todoList中引入的

export default [ { info: '關注公眾號', status: true }, { info: '大前端之旅', status: false }, { info: '學習編程知識', status: true }, { info: '接受編程推送', status: false }, { info: '日拱一卒', status: false } ]

里面涉及到的一個關于圖片的問題，就是（如果使用云端路徑）要添加ohos.permission.INTERNET權限

2. 工作原理

要理解它的工作原理，先研究一下編譯之后的代碼是非常重要的。上面的三個文件，編譯之后會生成一個文件，其位置在：./entry/build/intermediates/res/debug/lite/assets/js/default/pages/index/index.js

index.hml 變成了創建函數：

index.css 變成了 JSON 文件。

這種處理方式很妙，把 JS 不擅長處理的 XML/CSS 轉換成了 JS 代碼和 JSON 對象，這個轉換由工具完成，避免了運行時的開銷。

在沒有研究編譯之后的代碼時，我嘗試在 ace/graphic 兩個包中尋找解析 HML 的代碼，讓我驚訝的是沒有找到相關代碼。看了這些生成的代碼之后才恍然大悟。

計數器應用：

index.hml

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--; } }

參考文檔

Flutter HarmonyOS web前端 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。