鴻蒙實現的第一個小應用【鴻蒙開發18】_大前端之旅

這是我參與2022首次更文挑戰的第35天，活動詳情檢視：2022首次更文挑戰

不得不說的是js的開發方式真的和小程式一摸一樣，如出一轍。

作者：堅果

公眾號："大前端之旅"

華為雲享專家，InfoQ簽約作者，阿里雲專家博主，51CTO部落格首席體驗官，開源專案GVA成員之一，專注於大前端技術的分享，包括Flutter,小程式,安卓，VUE，JavaScript。

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

接下來我們開始正文

先來預覽一下：

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

第二部新建工程

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

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

.hml 用來描述介面的元素
.css 用來描述介面的風格
.js 用來編寫處理事件邏輯

我們來看個例子：

第一步，我們建立一個專案

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檔案

```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檔案

```html

大前端之旅的待辦事項

您還有 {{needTodoNum}} 件事情待辦，加油！

```

首先是資料來源是通過匯入的方式賦值給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 的程式碼，讓我驚訝的是沒有找到相關程式碼。看了這些生成的程式碼之後才恍然大悟。