5-3.【Codelab】如此简单！一文带你学会15个HarmonyOS JS组件.pdf-资料库

【Codelab】如此简单！一文带你学会 15 个 HarmonyOS JS 组件 HarmonyOS 支持 Java UI 开发及 JS UI 开发，之前我们已经介绍了由 Java 常用组件开发出来的新闻详情页面，大家可以查看相关内容：【Codelab】超简单!实现新闻详情页面展示，原来只需这几类布局本期就让我们从一个简易的 HarmonyOS 购物应用入手，通过 5 个可视页面来为大家介绍 15 个 JS 常用组件，看看 HarmonyOS 是如何通过多种组件，帮助开发者减少开发量，让开发者只需关注实现逻辑的。事不宜迟，我们马上开始。【请注意】本 Demo 只为展现多种 JS 组件用法，购物应用仅为场景演示，并非完整应用，欢迎各位开发者根据自己的业务场景进行完善哦~ 首先来看一下本 Demo 中涉及的 15 个组件，包括：搜索框组件（search）、页签容器组件（tabs）、列表组件（list）、图片组件（image）、分隔器组件（divider）、交互式组件（input）、滑动容器（swiper）、跑马灯组件（marquee）、自定义弹窗容器（dialog）、滑动选择器组件（picker）、评分条组件（rating）、进度条组件（progress）、菜单组件（menu）、按钮组件（button）和图表组件（chart）。再来看一下涉及的 5 个可视页面，分别为商品陈列页面、购物车页面、我的信息页面，商品详情页面，商品数据分析页面。来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

我们用一个表格来让大家一目了然：在正式开始敲代码之前，开发者们需要先下载安装 Huawei DevEco Studio，如果对于这个流程不甚熟悉，可以参照官网的教程操作。 Huawei DevEco Studio 安装指南： https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_i nstall-0000001053582415 请注意，本次 Codelab 针对的是步骤拆解和重点讲解，限于篇幅原因不会展示完整代码，开发者们可在文末【阅读原文】中获取完整代码哦~ 来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

工程代码的结构先让我们来了解一下工程代码的结构，这里我们提取几个重要信息跟大家说明一下：  entry/src/main/js/default/common 文件夹存放一些公共的资源，本次的图片内容皆存放在此。  entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS 的代码文件，包含 css、 hml、js 三类文件，这里我们创建了 homepage、shoppingDetailsPage、viewsChart。  entry/src/main/config.json：配置文件来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

页面构建及组件使用详解接下来，我们就可以编写 css、hml、js 代码了。来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

我们先来明确一下 5 个可视页面的逻辑。Demo 从主应用界面（Demo 直接展现的页面）菜单栏可划分为三个可视页面，分别为商品陈列页面、购物车页面、我的信息页面，这三个可视页面的构建都在 homepage 中，当用户点击商品陈列页面中的商品可跳转到商品详情页（为了方便演示均采用同一商品详情页），该可视页面在 shoppingDetailsPage 中实现。此外，由商品详情页中的某个入口可跳转到商品数据分析页面，该页面在 viewChart 中编写。下面我们将通过组件代码结合页面实现的部分，来为大家展示关键代码部分。 homepage 代码文件在本示例中，商品陈列页面、购物车页面、我的信息页面均在 homepage 代码文件中完成，每个可视页面均有不同的组件展现，下面我们来具体看一下。商品陈列页面在此可视页面中，用户可以通过搜索框搜索，或者直接在页面内浏览推荐商品。如果想要了解某个商品的详细信息，可以点击进入商品详情页查看。这里我们将会用到：搜索框组件（search）、页签容器组件（tabs）、列表组件（List）、图片组件（image）来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

01 搜索框组件（search）搜索框组件，用于提供用户搜索内容的输入区域。官网链接： https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-com ponents-basic-search-0000000000618599 在本示例中，search 组件中的 hint 属性囊括了搜索提示文字“寻找宝贝、店铺”，value 用于搜索框搜索文本值，这里是一个固定值——手机，focusable 确定当前组件是否可以获取焦点，本例中设置为 true，可以实现用户点击时弹出，当输入框内输入的值发生变化时，会触发 change 事件，submit 实现页面底部出现“搜索词+正在搜索中…”文字字样。代码和图片示例如下：来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

02 页签容器（tabs） tabs 是一个 tab 页签容器，tab-bar 与 tab-content 均为其子组件，其中前者用于展示 tab 的标签区。后者用于展示 tab 的内容区。官网链接： https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-com ponents-container-tabs-0000000000611572 在本示例中，搜索框下方“热销单品”、“精品推荐”、“智慧生活”、“年货节”等就用到了页签容器组件，组件中的 index 代表激活态，vertical 代表内容排列方式，false 为上下 true 为左右，这里采用的是上下，当用户点击或滑动标签时会触发 change 事件，标签栏下方的内容会根据标签的变化而变化，当前的标签栏会显示红色，这样一个简单美观的标签栏就构造好啦。而下面使用到 tabs 的子组件 tabs-bar 和 tab-content。tabs-bar 中设置该组件的排列方式为横向排列，tabs-content 用于展示 tab 的内容区，其中的 scrollable，用于实现滑动切换页签。当然，开发者可以根据需要改变 tabs 页签的页面内容、逻辑以及样式。来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

代码和图片示例如下：

{{$item.title}} {{$item.content}} ￥来源：HarmonyOS 开发者 https://mp.weixin.qq.com/s/_yImcJznawcTbt4LiEkfuQ

资料库

5-3.【Codelab】如此简单！一文带你学会15个HarmonyOS JS组件.pdf

相关推荐

最新资料