我开发了一个鸿蒙在线教育APP

栏目:在线教育  时间:2021-01-17
手机版

鸿蒙 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

上一篇:在线教育巨头狂“烧钱”,钱途在哪?
下一篇:翼鸥教育致力于推广教育信息化——在线互动教室丰富教育场景

最近更新在线教育