我准备计划开发一个稍微正式点的项目，我写了个初略的项目需求清单，来体验鸿蒙应用开发。
目前我已经着手实现了其中的一些重要功能，某些功能发现鸿蒙暂时不支持，但是还是先写上吧，后面慢慢摸索。
我会陆续更新连载此贴，一步步从 0 基础讲解项目开发过程，然后巩固鸿蒙应用开发知识点。有错误的地方，也欢迎大家留言指教。
本项目已开发一个 HarmonyOS 平台的在线教育 APP 为例，采用 JS 开发 UI 页面，服务端采用 Java SpringBoot 进行开发。
主要涉及到鸿蒙的技术点包括：
- JS UI 开发（各类常用组件和布局）
- 服务端数据交互
- 本地数据存储
- JS FA 与 Java PA 交互
- 视频播放
- 权限控制
- app 打包与发布
- HMS 服务对接
- 华为人工智能引擎对接等内容
基本包含了 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：
相关影片资源迅雷下载推荐
APP开发的详细流程介绍，一分钟就可以看懂
APP开发是一项大工程，需要产品经理、UI设计师、前端啊匮乏、后端开发、测试等人员共同协作完成，且周期长、成本高，一个完整的南宁APP开发流程应该是这个样子：我们可以把APP开发分为三个阶段，一分钟就可以看懂！A ...
APP开发,APP开发的详细流程介绍，一分钟就可以看懂
给自己模块取个名字，注意名字首个字符为字母，并且不要包含特殊字符，我这里取名为 IcollegeTVDemo1，创新好之后的工程结构如下图：
项目创建完成之后，推荐大家使用 git 进行托管起来哦！
04动手开发：技术栈分析
我们已经把布局做好了切割，并且对鸿蒙系统 JS UI 开发做了简单介绍，下面我们来选取合适的容器和组件进行开发。
首先整个页面时放置在一个根容器 div 里面，该 div 采用垂直方向至上而下布局，页面里面的顶部采用 div 容器水平居右排列，该 div 内部放置一个搜索框和一张用户图片。
然后该 div 下面放置一个 tabs 容器，能够通过点击 tab 切换子页面，并且滑动子页面能够切换 tab 标签。
思考：
- div 容器如何使用？如何横向排列和纵向排列，如何设置居中、居左、居右，如何设置宽度和高度，如何设置留白空间。
- tabs 容器如何使用，如何添加 tabs 标签，如何添加子页面，如何让 tab 标签变化跟随子页面变化？
解决思路：查找鸿蒙官方 API 手册。
div 容器 api 介绍地址：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484tabs 容器 api 介绍地址：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572作为一个开发者，最好的方式就是多阅读官方 API，我也是通读了好几遍之后才开始着手这个项目开发的。
05代码编写：添加顶部布局
编写 Module 下的 index.hml 代码：
<div class="container"> <div class="top"> <search class="search" focusable="false"></search> <image src="common/image/user.png" class="user" ></image> </div></div>重点讲解：注意该文件后缀是 hml，并不是 html。它里面的组件是由鸿蒙底层使用 c 语言编写封装而成的，并不是 html 中的标签，所以一定不要想着把 html 里的标签在这里面写。
比如 <ul> 和 <li> 标签，在 hml 里面就没有这个组件，具体能使用哪些组件请以鸿蒙官方 api 手册为准：
- <div> 是容器组件，一般用来承载组件。
- <image> 是图片组件，用来添加图片，src 指定图片路径，这里指定的本地路径，需要先在 common 目录下创建 image 文件夹，并且放置相应图片。
- <search> 是搜索组件。
编写 index.css 代码：
container { flex-direction: column; padding-left: 10px; align-items:flex-start;}.top { flex-direction: row; height: 36px; justify-content:flex-end; align-items: center;}.user { height:32px; width: 32px; margin-right: 20px;}.search{ width: 200px; height:32px; padding: 5px;}重点讲解：JS UI 布局方式默认采用的是 flex 布局，这个布局与 web 开发中的 css3 里面的 flex 基本一致，只是有个别属性在鸿蒙中不存在，具体属性以鸿蒙官网手册为准。
flex-direction 是主轴排列方向及内部组件排列方向，column 是竖直方向排列，row 是水平方向排列。
详细了解请看另一篇 flex 布局详解以及官方 api 介绍：
此时我们来查看下运行效果：
当写好代码之后，我们可以在模拟器中运行查看效果，根据效果再来修改代码，注意模拟器是没有像浏览器 F12 那种直接调试标签和 css 样式的功能的。
小技巧：如果想调整 css 细节，可以给组件加上不同颜色的 border 边框，来观察细节。
06代码编写：添加 tabs 容器
继续完善上面的 index.hml 文件，在 top 这个 div 下面添加如下代码：
<tabs> <tab-bar> <text for="{{todolist}}"> {{$item.title}} </text> </tab-bar> <tab-content> <text> “我的”页面正在开发中，敬请期待 </text> <text> “推荐”页面正在开发中，敬请期待 </text> <text> “直播间”页面正在开发中，敬请期待 </text> <text> “社区”页面正在开发中，敬请期待 </text> <text> “测评”页面正在开发中，敬请期待 </text> </tab-content></tabs>重点讲解：<tabs> 是一个容器组件，子组件默认包含有且仅有一个 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 文件代码：
export default { data: { tabIndex: 1, show: false, todolist: [{ title: '我的', imgSrc: 'common/img1.jpg', }, { title: '推荐', imgSrc: 'common/img2.jpg', }, { title: '直播间', imgSrc: '社区', }, { title: '社区', imgSrc: 'common/img4.jpg', }, { title: '测评', imgSrc: 'common/img5.jpg', } ] }}重点讲解：在 JS UI 框架的 TV 开发中遵循 ES6 语法，但是穿戴设备中只能部分支持 ES6 语法。
这里填写了几条数据，tabindex 是设置 tab 的索引使用的。
07修改焦点和 tab 的默认索引
此时先查看下运行效果：
此时我们看到 tab 标签栏的效果和我们最初要达到的效果图不一致，tab 标签栏没有获取到焦点，查找官方 api 手册发现 tab 组件并没有设置焦点的方法。
于是采用设置属性的方法进行解决。此界面的默认焦点被搜索框获取了，于是我们想到关闭掉搜索框的焦点，tab 就会自动获取焦点。
设置 search 组件的 focusable 属性为 false 即可：
<search class="search" focusable="false"></search>同时我们切换下 tab 的默认索引为“推荐”这个 tab，修改代码如下：
<tabs index="{{tabIndex}}">08本章小结
了解鸿蒙的布局结构与常用容器组件与基础组件，会根据 UI 效果图拆分布局
掌握 div 组件的使用，能够编写 css 样式，掌握 div 布局的排列与对齐方式，掌握 tabs 系列组件的基本使用，能够编写 JS 代码，掌握 hml 模板文件获取 js 数据更新组件的方法。
作者：软通夏德旺
原文链接：https://harmonyos.51cto.com/posts/2429
企业网站建设与开发最低只要299元起，包含域名服务器，需要的联系QQ345424724，电话15516990022,18530226930相关影片资源迅雷下载推荐
开发一个APP多少钱？APP开发费用明细、APP开发成本计算
随着移动互联网的快速发展，越来越多的商家和创业者都想开发一款自己的手机APP。通常情况下，初创团队都没有自己专业的技术团队，这个时候就会想寻找第三方外包开发公司。开发软件app需要多少钱？不少人咨询APP开发 ...
APP开发,开发一个APP多少钱？APP开发费用明细、APP开发成本计算
标签： APP开发 我开发了一个鸿蒙在线教育APP
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
