纯血鸿蒙开辟实战—怎样开辟出一个鸿蒙购物应用！
HarmonyOS 支持应用以 Ability 为单位举行部署，Ability 可以分为 FA（Feature Ability）和 PA（Particle Ability）两种范例。本篇 Codelab 将会使用 UI 组件开辟出一个 HarmonyOS 购物应用。
HarmonyOS 为开辟者提供了多种组件，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单位。开辟者只必要关注实现逻辑，减少开辟量。
01终极效果预览
我们终极会构建一个浅易的购物应用。应用包罗两级页面，分别是主页（商品欣赏页签、购物车页签、我的页签）和商品详情页面。
两个页面都展示了丰富的 HarmonyOS UI 组件，包括：
[*] 自定义弹窗容器（dialog）
[*] 列表（list）
[*] 滑动容器（swiper）
[*] 页签组件（tabs）
[*] 按钮组件（button）
[*] 图表组件（chart）
[*] 分隔器组件（divider）
[*] 图片组件（image）
[*] 交互式组件（input）
[*] 跑马灯组件（marquee）
[*] 菜单组件（menu）
[*] 滑动选择器组件（picker）
[*] 进度条组件（progress）
[*] 评分条组件（rating）
[*] 搜索框组件（search）
商品欣赏页面和商品详情页面如下图：
https://i-blog.csdnimg.cn/blog_migrate/a3be75ca0d3a42a422a843d344d66d7d.png
02搭建 HarmonyOS 情况
步调如下：
[*] 安装 DevEco Studio 和 Node.js，详情请参考下载和安装软件。
[*] 设置 DevEco Studio 开辟情况，DevEco Studio 开辟情况必要依赖于网络情况，必要毗连上网络才能确保工具的正常使用。
可以根据如下两种情况来配置开辟情况：
[*] 假如可以直接访问 Internet，只需举行下载 HarmonyOS SDK 操作。
[*] 假如网络不能直接访问 Internet，必要通过署理服务器才可以访问，请参考配置开辟情况。
参考链接：
下载与安装软件：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415
配置开发环境：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/environment_config-0000001052902427
说明：如必要在手机中运行程序，则必要提前申请证书，如使用模拟器可忽略。
准备密钥和证书请求文件：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404
申请调试证书：
https://developer.huawei.com/consumer/cn/doc/distribution/app/agc-harmonyapp-debugharmonyapp
你可以通过如下两种方式完成本篇 Codelab：
[*] 开启开辟者模式的 HarmonyOS 真机。
[*] DevEco Studio 中的手机模拟器（模拟器暂不支持分布式调试）。
03代码结构解读
本篇 Codelab 只对焦点代码举行解说，对于完整代码，我们会在 7 参考中提供下载方式。
接下来我们会用一末节来解说整个工程的代码结构：
[*] entry/src/main/js/default/common 文件夹存放一些公共的资源，好比图片。
[*] entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS 的页面，包罗 css、hml、js 三类文件。
[*] entry/src/main/config.json：配置文件。
https://i-blog.csdnimg.cn/blog_migrate/16a32451a771d281db10279e3d6027f1.png
04页面详细解析
接下来，我们就可以编写 css、hml、js 代码了。搜索框组件（search）：用于提供用户搜索内容的输入地域，图片示例和代码如下：
<search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" focusable="true" @change="searchColumn" @submit="submitColumn"></search> 页面展示：
https://i-blog.csdnimg.cn/blog_migrate/f1c7f85111f5d90c3665113907926bcf.png
tab页签容器（tabs），图片示例和代码如下：
[*] <tabs>的子组件（tab-bar）：用来展示 tab 的标签区。
[*] <tabs>的子组件（tab-content）：用来展示 tab 的内容区。
注：用户可通过左右滑动或点击差别 tab 标签区，来表现差别 tab 标签区的内容区。
https://i-blog.csdnimg.cn/blog_migrate/47f70bd71d30e8ff0a05dd773c01a623.png
https://i-blog.csdnimg.cn/blog_migrate/9c6fc96a36c9026251ec975cc8fba987.png
<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> 差别标签页图标切换（点击应用的正下面的差别标签，页面会随之切换，被选中的页面图片变红），图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/f898cc5a7bf943c9b14aafb76859ff86.png
https://i-blog.csdnimg.cn/blog_migrate/3d3c720a9a7cdd28f464c6218a4809ac.png
<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> 购物车页面：用户可以把选中的商品加入购物车，然后可以选中想要拍下的商品，举行结算，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/fc8fa777672aa9f1c58394e4d7d80228.png
<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>
我的页面结构，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/bbbef25c3a69bf7819c92679e0c70523.png
<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>
页面路由跳转：用户点击商品欣赏页面的恣意商品，页面会跳转到商品详情页面，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/93c9340892fc600c68797b72fcaef7ef.png
detailPage() {
router.push({
uri: "pages/shoppingDetailsPage/shoppingDetailsPage"
})
},
滑动容器（swiper）：用户可以在 swiper 组件上举行滑动 左右切换图片，或者 3s 自动滑动一次，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/5dfc6c74df84b27a1db2ded1530f1c3a.png
https://i-blog.csdnimg.cn/blog_migrate/bb09f6ca041e0e050b8a68e501023e52.png
https://i-blog.csdnimg.cn/blog_migrate/b8258201f3c86d8725556471c17db603.png
<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）：展示一段单行滚动的文字，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/18791cf4b44ea60a7ac9a037cbeeb159.png
https://i-blog.csdnimg.cn/blog_migrate/18791cf4b44ea60a7ac9a037cbeeb159.png
https://i-blog.csdnimg.cn/blog_migrate/05313cac0ae098cd8b70b5c3e53be75d.png
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}" direction="{{marqueeDir}}" @bounce="onMarqueeBounce" @start="onMarqueeStart" @finish="onMarqueeFinish">
{{pageInfo.marqueeCustomData}}
</marquee>
对样式进行动态双向绑定，可以修改"次日达"字体的颜色 ，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/bfdbe804d1aafd6fa3dd5827e7f08a6b.png
https://i-blog.csdnimg.cn/blog_migrate/21b0f4779fe2ce0eff053b942b05619b.png
https://i-blog.csdnimg.cn/blog_migrate/f15043659ed675ea5c67d1d8ab43631e.png
<text class="content-column-size-mar" style="color : {{textColor}};" @click="changeColor">{{pageInfo.nextDayReach}}</text>
export default {
data: {
textColor: '#FF3536',
}
}
省市级联选择器和日期选择器以及 dialog 自定义弹窗容器的实现，图片示例和代码如下。
点击选择会弹出 Dialog，页面会偶然间选择器和省市级联选择器。用户在弹出的时间选择器上选择日期，点击确定，页面上的数据也会同时改变。省市级联选择器，同理。
https://i-blog.csdnimg.cn/blog_migrate/53be5ad071ec63ed2b5de16c3071fde1.png
https://i-blog.csdnimg.cn/blog_migrate/d0dc83a778654c51fd5cf8e02d4ebb7a.png
https://i-blog.csdnimg.cn/blog_migrate/3ad57b4b0ee9960a86199953d03b2c66.png
<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 弹窗容器
https://i-blog.csdnimg.cn/blog_migrate/7913c24f8b6a7aeb2edcf65128dffd83.png
<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 组件（曲线图可以实时动态更新数据），图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/fc0ea30bd15a6eb05c38a780190a33b2.png
https://i-blog.csdnimg.cn/blog_migrate/2a176a2d13f3c82788bbc75333672e20.png
<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）的弹框 ，图片示例和代码如下：
https://i-blog.csdnimg.cn/blog_migrate/a83835881fc778b0ea2761d74089ef05.png
https://i-blog.csdnimg.cn/blog_migrate/fc9c3533b052dfa7b3d78cd9da7beb6e.png
<progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.secondarypercent}}"></progress>
说明：以上所以代码仅 demo 演示参考使用。
05回首和总结
本篇 Codelab 我们先容了应用的主页面和详情页，两个页面都展示了丰富的 HarmonyOS UI 组件如下图：
https://i-blog.csdnimg.cn/blog_migrate/b884f26552d8a206a50d24dfadc0790c.png
另外，我们还把常用的一些组件运用到到该应用里面，好比：
[*] 常用的 chart 图表组件：用曲线动态展示差别时间段的欣赏量。
[*] rating 评分条组件：运用到给软件/该商品打分评价。
[*] 选择器：省市级类选择器、时间选择器。
图片示比方下：
https://i-blog.csdnimg.cn/blog_migrate/dcc63415502550250b2ec39b46101107.png
https://i-blog.csdnimg.cn/blog_migrate/e44ebdc6763a12723824f4ffdc82265b.png
06恭喜你
现在你已经乐成完成了 Codelab 而且学到了：
[*] 怎样使用 HarmonyOS UI 常用组件。
[*] 怎样实现各页面之间的跳转。
最后
假如你想成为一名鸿蒙开辟者，以下这些资料将是非常优质且有价值，让你的鸿蒙开辟之路事半功倍！相对于网上那些碎片化的知识内容，这份学习资料的知识点更加体系化，更容易理解和记忆。
内容包罗了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开辟、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战】等技术知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙焦点技术学习门路
https://i-blog.csdnimg.cn/blog_migrate/c305df7e232385342c211b5ca70db5dc.png
2.大厂口试必问口试题
https://i-blog.csdnimg.cn/blog_migrate/54545dc24db55664221a0a114662baa7.png
3.鸿蒙南向开辟技术
https://i-blog.csdnimg.cn/blog_migrate/c8692deacd7801cfc886f2aeb5c9de68.png
4.鸿蒙APP开辟必备
https://i-blog.csdnimg.cn/blog_migrate/c510342c258bd907f950db431ae04b02.png
5.HarmonyOS Next 最新全套视频教程
https://i-blog.csdnimg.cn/blog_migrate/93f4a8f9fd2c6f2f7ad3227641d80f66.png
6.鸿蒙生态应用开辟白皮书V2.0PDF
https://i-blog.csdnimg.cn/blog_migrate/fd3ae1cb27c9387092ad0fe7c45608ee.png
这份全套完整版的学习资料已经全部打包好，朋友们假如必要可以点击→鸿蒙Next全套VIP学习资料：免费领取（安全链接，放心点击）
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]