我开发了一个鸿蒙在线教育APP
鸿蒙 2.0 已经发布了有段时间了,目前网上也有些小 demo 了,但是缺乏稍微大点的项目代码。
我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。
目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。
我会陆续更新连载此贴,一步步从 0 基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误的地方,也欢迎大家留言指教。
本项目已开发一个 HarmonyOS 平台的在线教育 app 为例,采用 JS 开发 UI 页面,服务端采用 Java SpringBoot 进行开发。
主要涉及到鸿蒙的技术点包括:
基本包含了 HarmonyOS APP 开发所需的大部分知识点:
首页模块开发之一
效果图分解:
01知识点讲解
布局说明:JS UI 框架中智慧屏以 720px(px 指逻辑像素,非物理像素)为基准宽度,根据实际屏幕宽度进行缩放。
例如当 width 设为 100px 时,在宽度为 1440 物理像素的屏幕上,实际显示的宽度为 200 物理像素。智能穿戴的基准宽度为 454px,换算逻辑同理。
一个页面的基本元素包含标题区域、文本区域、图片区域等,每个基本元素内还可以包含多个子元素,开发者根据需求还可以添加按钮、开关、进度条等组件。
在构建页面布局时,需要对每个基本元素思考以下几个问题:
该元素的尺寸和排列位置
是否有重叠的元素
是否需要设置对齐、内间距或者边界
是否包含子元素及其排列位置
是否需要容器组件及其类型
将页面中的元素分解之后再对每个基本元素按顺序实现,可以减少多层嵌套造成的视觉混乱和逻辑混乱,提高代码的可读性,方便对页面做后续的调整。
02组件介绍
组件(Component)是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。
组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件,减少开发量,自定义组件的开发方法详见后面的自定义组件。
根据组件的功能,可以将组件分为以下四大类:
03动手开发:新建模块(Module)
注意:我这里省去了 HelloWorld 工程的创建,如果不会 HelloWorld 的请自行查看官网工具使用介绍。
为了更好的循序渐进演示项目的迭代成型,我这里用一个 Module 为一个 demo 代码进行编写,下一个 demo 的 Module 会在前一个的基础上进行开发,直到最后项目成型。
如果您已经创建好了一个 TV 版 JS UI 开发的 HelloWorld 工程,请参照下面的步骤创建一个 Module:
给自己模块取个名字,注意名字首个字符为字母,并且不要包含特殊字符,我这里取名为 IcollegeTVDemo1,创新好之后的工程结构如下图:
项目创建完成之后,推荐大家使用 git 进行托管起来哦!
04动手开发:技术栈分析
我们已经把布局做好了切割,并且对鸿蒙系统 JS UI 开发做了简单介绍,下面我们来选取合适的容器和组件进行开发。
首先整个页面时放置在一个根容器 div 里面,该 div 采用垂直方向至上而下布局,页面里面的顶部采用 div 容器水平居右排列,该 div 内部放置一个搜索框和一张用户图片。
然后该 div 下面放置一个 tabs 容器,能够通过点击 tab 切换子页面,并且滑动子页面能够切换 tab 标签。
思考:
解决思路:查找鸿蒙官方 api 手册。
div 容器 api 介绍地址:
tabs 容器 api 介绍地址:
作为一个开发者,最好的方式就是多阅读官方 API,我也是通读了好几遍之后才开始着手这个项目开发的。
05代码编写:添加顶部布局
编写 Module 下的 index.hml 代码:
重点讲解:注意该文件后缀是 hml,并不是 html。它里面的组件是由鸿蒙底层使用 c 语言编写封装而成的,并不是 html 中的标签,所以一定不要想着把 html 里的标签在这里面写。
比如
- 和
- 标签,在 hml 里面就没有这个组件,具体能使用哪些组件请以鸿蒙官方 api 手册为准:
编写 index.css 代码:
重点讲解:JS UI 布局方式默认采用的是 flex 布局,这个布局与 web 开发中的 css3 里面的 flex 基本一致,只是有个别属性在鸿蒙中不存在,具体属性以鸿蒙官网手册为准。
flex-direction 是主轴排列方向及内部组件排列方向,column 是竖直方向排列,row 是水平方向排列。
详细了解请看另一篇 flex 布局详解以及官方 api 介绍:
此时我们来查看下运行效果:
当写好代码之后,我们可以在模拟器中运行查看效果,根据效果再来修改代码,注意模拟器是没有像浏览器 F12 那种直接调试标签和 css 样式的功能的。
小技巧:如果想调整 css 细节,可以给组件加上不同颜色的 border 边框,来观察细节。
06代码编写:添加 tabs 容器
继续完善上面的 index.hml 文件,在 top 这个 div 下面添加如下代码:
重点讲解:
是一个容器组件,子组件默认包含有且仅有一个 tab-bar 容器组件和 tab-content 容器组件,tab-bar 时 tab 标签,tab-content 是内容。 这里采用 for 属性去循环遍历在 tab-bar 下生成了一组 text 文本组件。for 中采用{{}}的形式获取 js 中的数据,这里采用的是 MVVM 设计模式,和 Vue 里面的用法类似。
当 js 中定义的数据发生变化的时候,组件的内容随之会发生变化。我这里在 js 里面定义了一个 todolist 数组,里面保存了 5 条数据。
同理,在 tab-content 下面同样也设置了 5 个组件与之对应。这里的数据也可以写成 for 循环从 js 里面取。
只是我后面这里会加载自定义组件,就不写取 js 数据了。
编写 index.js 文件代码:
重点讲解:在 JS UI 框架的 TV 开发中遵循 ES6 语法,但是穿戴设备中只能部分支持 ES6 语法。
这里填写了几条数据,tabindex 是设置 tab 的索引使用的。
07修改焦点和 tab 的默认索引
此时先查看下运行效果:
此时我们看到 tab 标签栏的效果和我们最初要达到的效果图不一致,tab 标签栏没有获取到焦点,查找官方 api 手册发现 tab 组件并没有设置焦点的方法。
于是采用设置属性的方法进行解决。此界面的默认焦点被搜索框获取了,于是我们想到关闭掉搜索框的焦点,tab 就会自动获取焦点。
设置 search 组件的 focusable 属性为 false 即可:
同时我们切换下 tab 的默认索引为“推荐”这个 tab,修改代码如下:
08本章小结
了解鸿蒙的布局结构与常用容器组件与基础组件,会根据 UI 效果图拆分布局
掌握 div 组件的使用,能够编写 css 样式,掌握 div 布局的排列与对齐方式,掌握 tabs 系列组件的基本使用,能够编写 JS 代码,掌握 hml 模板文件获取 js 数据更新组件的方法。
作者:软通夏德旺
原文链接:https://harmonyos.51cto.com/posts/2429
最近更新在线教育
- 【无讼乡镇】安顺“无讼乡镇”再添一员
- 人才需求正旺 近年来硕士研究生考试报名人数屡创新高
- 外教入主 外援助力 辽宁女排新赛季展新气象
- 运动生涯辉煌,执教之路仍不一帆风顺!马琳下课悬念重重,刘国梁尽在掌握
- 济南市第二人民医院开展2023年度新入职员工岗前培训
- 湖南娄星:重教育人 办好人民满意教育
- 海选报名截止!中华经典诵读大会在全国掀起文化热潮
- 越西县多措并举强化“组团式”帮扶组织保障
- 津药达仁堂刘淑:做创新国药领跑者,推进中医药现代化
- 推进数字化赋能教学质量提升
- @东马跑友 2023黄河口(东营)马拉松赛健康跑参赛须知来啦
- 秋招火热 产业变迁引领就业新方向
- 出国的“不二”之选 | 力迈剑桥中学课程特色
- 东海县西双湖派出所:织密治安“防护网” 筑牢秋季“防火墙”
- CBA常规赛:新疆伊力特胜江苏肯帝亚
- 护航企业“走出去”服务人才“引进来”
- 厦门科学城·同安区首届科技服务节落幕 “同企云”平台上线
- 南邮师生来到办学发轫地,共上“行走的思政课”
- 被动陷入监护缺失怎么办?“养老监护人”可以自主选择
- 天津:孩子们在活力校园动起来
- 第二届北京城市更新论坛闭幕 1500万人打卡城市更新街区
- 700吨!中广欧特斯助力湖南化工职业技术学院热水系统改造升级
- 自考可以复核哪些成绩?
- 深圳中考球类项目重点考查什么?难度如何?记者实测→
- 超6.8万亿!山东前三季度GDP增长6%