鸿蒙HarmonyOS应用开发项目实战-在线课堂TV(二)

想了解更多内容，请访问：

创新互联建站主营湘阴网站建设的网络公司,主营网站建设方案,手机APP定制开发,湘阴h5微信小程序开发搭建,湘阴网站营销推广欢迎湘阴等地区企业咨询

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

首页模块开发之一

首页动态效果图展示

效果图分解

知识点讲解：

布局说明：

JS UI框架中智慧屏以720px(px指逻辑像素，非物理像素)为基准宽度，根据实际屏幕宽度进行缩放，例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px，换算逻辑同理。

一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题：

该元素的尺寸和排列位置

是否有重叠的元素

是否需要设置对齐、内间距或者边界

是否包含子元素及其排列位置

是否需要容器组件及其类型

将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。

组件介绍：

组件(Component)是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法详见后面的自定义组件。

组件分类

根据组件的功能，可以将组件分为以下四大类：

动手开发--新建模块(Module)：

注意：我这里省去了HelloWorld工程的创建，如果不会HelloWorld的请自行查看官网工具使用介绍。为了更好的循序渐进演示项目的迭代成型，我这里用一个Module为一个demo代码进行编写，下一个demo的Module会在前一个的基础上进行开发，直到最后项目成型。

如果您已经创建好了一个TV 版JS UI开发的HelloWorld工程，请参照下面的步骤创建一个Module

给自己模块取个名字，注意名字首个字符为字母，并且不要包含特殊字符，我这里取名为IcollegeTVDemo1，创新好之后的工程结构如下图

项目创建完成之后，推荐大家使用git进行托管起来哦!

动手开发--技术栈分析：

我们已经把布局做好了切割，并且对鸿蒙系统JS UI开发做了简单介绍，下面我们来选取合适的容器和组件进行开发。

首先整个页面时放置在一个根容器div里面，该div采用垂直方向至上而下布局，页面里面的顶部采用div容器水平居右排列，该div内部放置一个搜索框和一张用户图片。然后该div下面放置一个tabs容器，能够通过点击tab切换子页面，并且滑动子页面能够切换tab标签。

思考：

1、div容器如何使用?如何横向排列和纵向排列，如何设置居中、居左、居右，如何设置宽度和高度，如何设置留白空间。

2、tabs容器如何使用，如何添加tabs标签，如何添加子页面，如何让tab标签变化跟随子页面变化?

解决思路：查找鸿蒙官方API手册

div容器api介绍地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484

tabs容器api介绍地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572

作为一个开发者，最好的方式就是多阅读官方API，我也是通读了好几遍之后才开始着手这个项目开发的

动手开发--代码编写--添加顶部布局：

编写Module下的index.hml代码：

重点讲解：

注意该文件后缀是hml，并不是html。它里面的组件是由鸿蒙底层使用c语言编写封装而成的，并不是html中的标签，所以一定不要想着把html里的标签在这里面写，比如

标签，在hml里面就没有这个组件，具体能使用哪些组件请以鸿蒙官方api手册为准。

是容器组件，一般用来承载组件。

是图片组件，用来添加图片，src指定图片路径，这里指定的本地路径，需要先在common目录下创建image文件夹，并且放置相应图片。

是搜索组件。

编写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介绍。

align-items是定义子组件如何在交叉轴上对齐

justify-content：定义了子组件如何在主轴上对齐

此时我们来查看下运行效果

当写好代码之后，我们可以在模拟器中运行查看效果，根据效果再来修改代码，注意模拟器是没有像浏览器F12那种直接调试标签和css样式的功能的。

小技巧：如果想调整css细节，可以给组件加上不同颜色的border边框，来观察细节

动手开发--代码编写--添加tabs容器：

继续完善上面的index.hml文件，在top这个div下面添加如下代码：

 
 
 
 
  
  
  
   
  
  
  
       
  
  
  
           
  
  
  
              {{$item.title}} 
  
  
  
           
  
  
  
       
  
  
  
       
  
  
  
           
  
  
  
              “我的”页面正在开发中，敬请期待 
  
  
  
           
  
  
  
           
  
  
  
              “推荐”页面正在开发中，敬请期待 
  
  
  
           
  
  
  
           
  
  
  
              “直播间”页面正在开发中，敬请期待 
  
  
  
           
  
  
  
           
  
  
  
              “社区”页面正在开发中，敬请期待 
  
  
  
           
  
  
  
           
  
  
  
              “测评”页面正在开发中，敬请期待

重点讲解：

是一个容器组件，子组件默认包含有且仅有一个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的索引使用的。

动手开发--代码编写--修改焦点和tab的默认索引

此时先查看下运行效果

此时我们看到tab标签栏的效果和我们最初要达到的效果图不一致，tab标签栏没有获取到焦点，查找官方api手册发现tab组件并没有设置焦点的方法。于是采用设置属性的方法进行解决。此界面的默认焦点被搜索框获取了，于是我们想到关闭掉搜索框的焦点，tab就会自动获取焦点。设置search组件的focusable属性为false即可。

同时我们切换下tab的默认索引为“推荐”这个tab，修改代码如下

本章小结

了解鸿蒙的布局结构与常用容器组件与基础组件，会根据UI效果图拆分布局

掌握div组件的使用，能够编写css样式，掌握div布局的排列与对齐方式

掌握tabs系列组件的基本使用

能够编写JS代码，掌握hml模板文件获取js数据更新组件的方法。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

当前题目：鸿蒙HarmonyOS应用开发项目实战-在线课堂TV(二)
文章分享：http://www.36103.cn/qtweb/news11/5111.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联