【江鸟中原】鸿蒙购物应用开发

wx65718cc3a4ac1

发布于 2023-12-11 12:55

浏览

0收藏

[江鸟中原]鸿蒙应用与开发：购物应用开发
大家好，我是 RB 软工数 217 班，刘安站老师鸿蒙选修课程的学生张
顺阳，以下是我本次课题作业报告

介绍
HarmonyOS 支持应用以 Ability 为单位进行部署，Ability 可以分为
FA(Feature Ability)和 PA(Particle Ability)两种类型。
本篇 Codelab 将会使用 UI 组件开发出一个 HarmonyOS 购物应用。
HarmonyOS 为开发者提供了多种组件，每个组件通过对数据和方法的
简单封装，实现独立的可视、可交互功能单元。开发者只需要关注实
现逻辑，减少开发量。
我们最终会构建一个简易的购物应用。应用包含两级页面，分别是主
页(商品浏览页签、购物车页签、我的页签)和商品详情页面。
商品浏览页面和商品详情页面如下：
搭建 HarmonyOS 环境
安装 DevEco Studio 和 Node.js
设置 DevEco Studio 开发环境
开启开发者模式的 HarmonyOS 真机
DevEco Studio 中的手机模拟器(模拟器暂不支持分布式调试)
3.代码结构解读
entry/src/main/js/default/common 文件夹存放一些公共的资源，比如图片。
entry/src/main/js/default/pages 文件夹存放 HarmonyOS JS 的页面，包含 css、hml、js
三类文件。
entry/src/main/config.json：配置文件。
4.页面详情解析
搜索框组件(search)：用于提供用户搜索内容的输入区域，图片示例和代码如下：
页面展示：
<search hint=“{{pageWord.searchKeyWord}}” value=“{{pageWord.searchV
alue}}” focusable=“true” @change=“searchColumn” @submit=“submitCol
umn”></search>
tab 页签容器(tabs)，图片示例和代码如下：
的子组件(tab-bar)：用来展示 tab 的标签区。
的子组件(tab-content)：用来展示 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” @cli
ck=“clickBuy”></image>
<image src=“{{icon.shoppingCarts}}” class=“container-bottom-div-ima
ge” @click=“clickShoppingCart”></image>
<image src=“{{icon.mys}}” class=“container-bottom-div-image” @clic
k=“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=“addShoppin
g”></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>
我的页面布局，图片示例和代码如下
页面路由跳转：用户点击商品浏览页面的任意商品，页面会跳转到商
品详情页面，图片示例和代码如下：
detailPage() {
router.push({
uri: “pages/shoppingDetailsPage/shoppingDetailsPage”
})
},