这里写目录标题
- 前期准备
- 1. 环境准备
- 2. 开发工具准备
- 创建项目
- 1. 使用 `deveco-studio` 创建 `ShunHeHotel` 项目
- 2. 把`ShunHeHotel` 项目使用`git`进行版本控制
- 3. 提交第1个commit,`Alt+0` → 输入commit message → 提交
- 4. 查看已经提交的第一个提交
- 5. `gitcode` 创建同名远程项目 `ShunHeHotel`
- 6. 本地`devecho` 添加 `remote`
- 7. 本地代码推送到`gitcode`:`git` → `push`
- Gitcode仓库地址
- 项目开发(仅记录思路具体实现请参考git提交记录)
- 首页
- 美食团购
- 我的订单
前期准备
1. 环境准备
Node.js 准备
json-server 服务准备
2. 开发工具准备
deveco-studio
使用版本4.1.3.500
。node.js
使用版本18.14.1
。SDK
使用课上老师发送版本号不详。- 版本管理工具使用:
git
。 参考:idea如何集成git - 代码托管平台使用:
Gitcode
创建项目
1. 使用 deveco-studio
创建 ShunHeHotel
项目
2. 把ShunHeHotel
项目使用git
进行版本控制
3. 提交第1个commit,Alt+0
→ 输入commit message → 提交
4. 查看已经提交的第一个提交
5. gitcode
创建同名远程项目 ShunHeHotel
6. 本地devecho
添加 remote
7. 本地代码推送到gitcode
:git
→ push
Gitcode仓库地址
https://gitcode.com/zhangziwa/ShunHeHotel/overview
项目开发(仅记录思路具体实现请参考git提交记录)
首页
- 使用选项卡 (
Tabs
)构建首页页面结构
,使用自定义导航栏,并自定义实现页签切换逻辑。 - 使用
Grid
构建首页布局
。 - 使用
Scroll
组件添加页面垂直滚动效果
。
美食团购
- 新建
class
作为网络请求返回数据的载体。 - 使用
axios
发起网络请求,获取json-server服务
的delicacyList
数据。
参考:【鸿蒙学习笔记】网络服务・axios
数据请求 - 解析
delicacyList
第1层数据:填充背景图(采用线性布局) - 解析
delicacyList
第2层数据:填充门店信息(采用线性布局) - 解析
delicacyList
第3层数据:填充团购套餐信息(采用线性布局) - 使用
Scroll
组件添加页面垂直滚动效果
- 美食团购页和首页建立起路由关系
我的订单
- 新建
class
作为网络请求返回数据的载体。 - 使用
axios
发起网络请求,获取json-server服务
的orderList
数据。 - 使用选项卡 (
Tabs
)构建页面结构
,使用自定义导航栏,并自定义实现页签切换逻辑。 - 解析
orderList
数据:填充【全部】页面数据(采用线性布局)。 - 使用
@Watch
装饰器进行数据过滤,筛选出【待付款】【待使用】【已完成】数据。 - 使用筛选出【待付款】【待使用】【已完成】数据,填充【待付款】【待使用】【已完成】
Tab
页面。 - 我的订单页和首页建立起路由关系。