【鸿蒙实战开发】基于JS通用组件的鸿蒙购物应用开发实现

代码改变世界996

于 2024-08-06 16:15:26 发布

阅读量918

点赞数 26

分类专栏：安卓鸿蒙前端文章标签： harmonyos javascript 华为 android 鸿蒙前端

本文链接：https://blog.csdn.net/HarmonyOS007/article/details/140958858

版权

安卓同时被 3 个专栏收录

199 篇文章 0 订阅

订阅专栏

鸿蒙

199 篇文章 2 订阅

订阅专栏

前端

199 篇文章 0 订阅

订阅专栏

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）：用于提供用户搜索内容的输入区域，图片示例和代码如下：
页面展示：

<search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true" @change="searchColumn" @submit="submitColumn"></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="container-bottom-div" @click="buy" @click="clickBuy"> 
    <image src="{{icon.buys}}" class="container-bottom-div-image" @click="clickBuy"></image> 
    <image src="{{icon.shoppingCarts}}" class="container-bottom-div-image" @click="clickShoppingCart"></image> 
    <image src="{{icon.mys}}" class="container-bottom-div-image" @click="clickMy"></image> 
</div>

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

<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自动滑动一次，图片示例和代码如下： **

<swiper class="swiper" id="swiper" index="0" autoplay="true" interval="3000" indicator="true" loop="true" digital="false"> 
    <div class="swiperContent" for="{{ item in swiperList }}"> 
        <image src="/common/computer/computer{{item}}.png"></image> 
    </div> 
</swiper>

跑马灯组件（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组件（曲线图可以实时动态更新数据），图片示例和代码如下： **

<stack class="chart-region"> 
    <image class="chart-background" src="common/background.png"></image> 
    <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart> 
</stack>

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

<progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.secondarypercent}}"></progress>

🕮 说明

以上所以代码仅demo演示参考使用。

5. 回顾和总结

本篇Codelab我们介绍了应用的主页面和详情页，两个页面都展示了丰富的HarmonyOS UI组件如下图。

另外，我们还把常用的一些组件运用到到该应用里面，比如：

**1.常用的chart图表组件：**用曲线动态展示不同时间段的浏览量。
**2.rating评分条组件：**运用到给软件/该商品打分评价。
**3.选择器：**省市级类选择器、时间选择器。

图片示例如下：

6. 恭喜您
目前你已经成功完成了Codelab并且学到了：

● 如何使用HarmonyOS UI常用组件。
● 如何实现各页面之间的跳转。

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

代码改变世界996

关注

26
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【鸿蒙实战开发】基于JS通用组件的鸿蒙购物应用开发实现

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
复制链接

扫一扫

专栏目录