您现在的位置是：亿华云 > 人工智能

基于JS通用组件的鸿蒙购物应用开发

亿华云2025-10-02 13:29:55【人工智能】2人已围观

简介想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.com1. 介绍HarmonyOS支持应用以Ability为单位进行部署，Ability可以分为

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

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

https://harmonyos.51cto.com

1. 介绍

HarmonyOS支持应用以Ability为单位进行部署，Ability可以分为FA(Feature Ability)和PA(Particle Ability)两种类型。组件

本篇Codelab将会使用UI组件开发出一个HarmonyOS购物应用。蒙购

HarmonyOS为开发者提供了多种组件，用开每个组件通过对数据和方法的基于简单封装，实现独立的通用可视、可交互功能单元。组件开发者只需要关注实现逻辑，蒙购减少开发量。用开

最终效果预览

我们最终会构建一个简易的基于购物应用。应用包含两级页面，通用分别是组件主页(商品浏览页签、购物车页签、蒙购我的用开页签)和商品详情页面，两个页面都展示了丰富的HarmonyOS UI组件，包括：自定义弹窗容器(dialog)，列表(list)，滑动容器(swiper)，页签组件(tabs)，按钮组件(button)，图表组件(chart)，分隔器组件(divider)，图片组件(image)，交互式组件(input)，跑马灯组件(marquee)，菜单组件(menu)，源码下载滑动选择器组件(picker)，进度条组件(progress)，评分条组件(rating)，搜索框组件(search)。

商品浏览页面和商品详情页面如下图：

2. 搭建HarmonyOS环境

● 安装DevEco Studio和Node.js，详情请参考下载和安装软件。

● 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：

● 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。

● 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

🕮 说明如需要在手机中运行程序，则需要提前申请证书，如使用模拟器可忽略。

● 准备密钥和证书请求文件

● 申请调试证书

你可以通过如下两种方式完成本篇Codelab：

● 开启开发者模式的HarmonyOS真机。

● DevEco Studio中的手机模拟器(模拟器暂不支持分布式调试)。

3. 代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在7 参考中提供下载方式，接下来我们会用一小节来讲解整个工程的代码结构：

● entry/src/main/js/default/common 文件夹存放一些公共的资源，比如图片。

● entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS的页面，包含css、hml、云服务器js三类文件。

● entry/src/main/config.json：配置文件。

4. 页面详细解析

接下来，我们就可以编写css、hml、js代码了。

搜索框组件(search)：用于提供用户搜索内容的输入区域，图片示例和代码如下：

页面展示：

tab页签容器(tabs)，图片示例和代码如下：

的子组件(tab-bar)：用来展示tab的标签区。

的子组件(tab-content)：用来展示tab的内容区。

注：用户可通过左右滑动或点击不同tab标签区，来显示不同tab标签区的内容区

<tabs class="tabs" index="0" vertical="false" onchange="change"> <tab-bar class="tab-bar" mode="fixed"> <text class="tab-text" for="{ { item in titileList}}">{ { item }} </text> </tab-bar> <tab-content class="tabcontent" scrollable="true"> <div class="item-content" for="{ { item in contentList}}"> <list class="todo-wraper"> <list-item for="{ { lists}}"> <div class="margin10" @click="detailPage"> <div class="todo-total"> <text class="todo-title">{ { $item.title}}</text> <text class="todo-content">{ { $item.content}}</text> <text class="todo-price"> <span>￥</span> <span>{ { $item.price}}</span> </text> </div> <div class="width30"> <image src="{ { $item.imgSrc}}" class="container-home-image"></image> </div> </div> </list-item> </list> </div> </tab-content> </tabs>

不同标签页图标切换(点击应用的正下面的不同标签，页面会随之切换，被选中的页面图片变红)，图片示例和代码如下：

购物车页面：用户可以把选中的商品加入购物车，然后可以选中想要拍下的商品，进行结算，图片示例和代码如下：

<div class="top-comm flex-direction-column"> <div for="{ { latestList }}" class="flex-direction-column"> <div class="container-shopping-list"> <input type="checkbox" value="{ { $item.price}}" @change="addShopping"></input> <image src="{ { $item.imgSrc}}" class="container-shopping-list-image"></image> <div class="container-shopping-list-div"> <text class="container-shopping-list-div-text">{ { $item.title}}</text> <text class="container-shopping-list-div-texts"> <span>{ { $item.price}}</span> <span>元</span> </text> </div> </div> <divider class="container-shopping-list-divider"></divider> </div> </div>

我的页面布局，图片示例和代码如下：

<div class="container-my-deals"> <text class="container-my-deals-text">{ { pageWord.myDeals}}</text> <div class="container-my-deals-div"> <div class="container-my-deals-div-div" for="{ { transaction}}"> <image src="{ { $item.src}}" class="container-my-image"></image> <text class="container-my-text">{ { $item.title}}{ { $item.num}}</text> </div> </div> </div>

页面路由跳转：用户点击商品浏览页面的任意商品，页面会跳转到商品详情页面，站群服务器图片示例和代码如下：

detailPage() { router.push({ uri: "pages/shoppingDetailsPage/shoppingDetailsPage" }) },

滑动容器（swiper）：用户可以在swiper组件上进行滑动左右切换图片，或者3s自动滑动一次，图片示例和代码如下：

跑马灯组件（marquee）：展示一段单行滚动的文字，图片示例和代码如下：

<marquee id="customMarquee" class="customMarquee" scrollamount="{ { scrollAmount}}" loop="{ { loop}}" direction="{ { marqueeDir}}" @bounce="onMarqueeBounce" @start="onMarqueeStart" @finish="onMarqueeFinish"> { { pageInfo.marqueeCustomData}} </marquee>

对样式进行动态双向绑定，可以修改"次日达"字体的颜色，图片示例和代码如下：

<text class="content-column-size-mar" style="color : { { textColor}};" @click="changeColor">{ { pageInfo.nextDayReach}}</text> export default { data: { textColor: #FF3536, } }

省市级联选择器和日期选择器以及dialog自定义弹窗容器的实现，图片示例和代码如下：

点击选择会弹出Dialog，页面会有时间选择器和省市级联选择器。

用户在弹出的时间选择器上选择日期，点击确定，页面上的数据也会同时改变。省市级联选择器，同理。

<div class="dialog-div-select"> <div> <text class="dialog-div-select-text">{ { pageInfo.selectRewardTime}}</text> <div class="dialog-div-select-picker"> <picker type="date" selected="{ { newDate }}" hours="24" value="{ { newDate }}" @change="changeDate" @cancel="cancelDate"></picker> </div> </div> <div> <text class="dialog-div-select-text">{ { pageInfo.selectRewardCity}}</text> <div class="dialog-div-select-picker"> <picker type="multi-text" @columnchange="columnTextData" columns="3" range="{ { cityList}}" value="{ { selectCityList}}" @change="changeCity"></picker> </div> </div> </div>

评分弹框(rating)，图片示例和代码如下：

点击评分，会弹出带有评分弹框的dialog弹窗容器。

<dialog id="ratingDialog" class="dialog-main" @cancel="cancelrRatingDialog"> <div class="dialog-div"> <div class="dialog-div-rating"> <text class="font-size22 font-weight600">{ { pageInfo.softwareScore}}</text> <rating numstars="5" rating="{ { ratingNum}}" @change="ratingChange"></rating> <text class="font-size22 font-weight600">{ { pageInfo.ratingReason}}</text> <input type="text" placeholder="{ { pageInfo.ratingPlaceholder}}" value="{ { ratingReason}}" @change="ratingReasonChange"></input> <div class="dialog-divs-divider-div"> <text class="font-size22 color-deepskyblue" @click="confirmRatingInfo">{ { pageInfo.confirm}}</text> <divider vertical="true" class="dialog-divider"></divider> <text class="font-size22 color-deepskyblue" @click="cancelrRatingDialog">{ { pageInfo.cancel}}</text> </div> </div> </div> </dialog>

浏览量页面：chart组件（曲线图可以实时动态更新数据），图片示例和代码如下：

点击立即抢购会弹出一个含有进度条（progress）的弹框，图片示例和代码如下：

<progress class="min-progress" type="scale-ring" percent="{ { progress.percent}}" secondarypercent="{ { progress.secondarypercent}}"></progress> 1. 🕮 说明以上所以代码仅demo演示参考使用。