我的第一个鸿蒙应用

在前几篇文章里也介绍了许多关于鸿蒙开发的技巧，今天我们就来做自己的第一个代办事项应用。鸿蒙开发和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小时内删除侵权内容。