1.整体布局

顶部：门店信息 + 自提按钮

中间：轮播通知栏、标签切换栏、左侧分类 + 右侧商品列表

底部：导航栏（首页 / 菜单 / 我的等）

开发用HarmonyOS 的 ArkTS 语言（Stage 模型），工具是 DevEco Studio—— 这是鸿蒙官方开发工具。

第一步：项目准备

1. 装工具

先下载DevEco Studio 4.1+（鸿蒙官方工具，免费），安装时选 “HarmonyOS SDK API 10”（兼容性最好）。

2. 建项目

打开工具→点 “创建项目”→选 “Stage 模型”→选 “Empty Ability”→填项目名（比如LuckinDemo）→API 版本选 10→点 “完成”。

等项目加载完，你会看到一个默认的Index.ets文件 —— 这就是我们的首页。

模块 1：首页页面设计

先把截图里的页面拆成 “积木块”，用鸿蒙的组件拼起来：

1. 顶部门店栏（截图顶部）

内容：门店名（三盛国际广场店）、距离（距您 196m）、自提按钮用啥组件？

用Row（横向布局）放这三个元素：左边用Column（纵向）放门店名 + 距离，右边放 “自提” 按钮。鸿蒙的Row/Column是基础布局组件，像 “盒子” 一样把元素按横 / 竖排好。

2. 轮播通知栏（截图里的 “3000 吨高品质豆”）

内容：瑞幸的活动通知，自动切换

用Swiper组件，开启autoPlay: true（自动播放）、interval: 3000（3 秒切一次）。

3. 标签切换栏（截图里的 “经典菜单 / 9.9 元”）

内容：多个标签，点哪个显示哪个分类

用Tabs组件，每个标签是TabContent，标签栏自动适配横向滚动。

4. 分类 + 商品列表（截图核心区域）

左边：分类栏（谷爱凌推荐 / 人气 Top 等）→ 用List组件（垂直列表）

右边：商品列表（生椰丝绒拿铁等）→ 也用List组件，每个商品用Row放 “图片 + 名称 + 价格 + 加号按钮”

5. 底部导航栏（截图底部）

内容：首页 / 菜单 / 我的等图标 + 文字→ 用TabBar组件，每个导航项是TabContent。

模块 2：首页功能实现

搭好结构后，给页面加 “互动能力”：

1. 轮播自动切换

在Swiper里加 2 个属性：

typescript

Swiper({ autoPlay: true, interval: 3000 }) {

  // 放轮播内容

}

→ 运行后，通知栏会自动轮播。

2. 分类 & 商品联动（点左边分类，右边变商品）

第一步：用@State存 “当前选中的分类”（比如默认选 “谷爱凌推荐”）

typescript

@State activeCate: string = "谷爱凌推荐"

第二步：点左侧分类时，更新activeCate

typescript

// 左侧分类的按钮

Text("谷爱凌推荐")

  .onClick(() => {

    this.activeCate = "谷爱凌推荐" // 点哪个，存哪个

  })

第三步：右侧商品列表 “过滤” 出当前分类的商品

比如商品数据是一个数组，每个商品带cate属性（对应分类），然后只显示cate等于activeCate的商品。

3. 加入购物车（点 + 按钮加商品）

第一步：用@State存购物车数组

typescript

@State cartList: any[] = []

第二步：点 + 按钮，把商品加到数组里，再弹提示

typescript

Button("+")

  .onClick(() => {

    this.cartList.push(当前商品) // 把点的商品加进去

    promptAction.showToast({ message: "已加入购物车" }) // 弹提示

  })

模块 3：购物车结算栏开发

1. 加购物车图标到顶部

在顶部门店栏右边加个购物车图标，点它显示购物车：

typescript

@State showCart: boolean = false // 控制弹窗显隐

// 顶部右侧的购物车图标

Image("购物车图标链接")

  .onClick(() => {

    this.showCart = true // 点图标，弹窗显示

  })

2. 做购物车弹窗

用鸿蒙的CustomDialog组件做弹窗，里面放这些内容：

空购物车：显示 “购物车是空的～”

有商品：显示每个商品 + 加减按钮 + 价格

底部：合计金额 + 结算按钮

核心逻辑：

typescript

if (this.showCart) { // 如果showCart是true，显示弹窗

  CustomDialog({

    title: "我的购物车",

    cancel: () => { this.showCart = false } // 点叉关闭

  }) {

    // 弹窗里的内容：商品列表/合计/结算

  }

}

模块 4：咖啡详情页（点商品跳详情）

1. 新建详情页

在pages文件夹下新建CoffeeDetail.ets—— 这是详情页的文件。

2. 首页跳详情页

点商品时，用router组件跳转到详情页，并把商品数据传过去：

typescript

// 首页的商品Item

Row()

  .onClick(() => {

    router.pushUrl({

      url: "pages/CoffeeDetail", // 跳转到详情页

      params: { goods: 当前商品 } // 把商品数据传过去

    })

  })

3. 详情页布局

在详情页接收商品数据，然后布局：

顶部：返回按钮 + 商品名

中间：商品大图 + 价格

下方：杯型选择（大 / 中 / 小）+ 温度选择（冰 / 热）

底部：加入购物车按钮

核心是 “接收数据”：

typescript

// 详情页里，接收首页传的商品

@State goods: any = router.getParams()?.["goods"]

模块 5：登录功能开发（“我的” 页点登录）

1. “我的” 页加登录按钮

在底部导航的 “我的” 页面，放一个 “点击登录” 按钮，点它跳登录页：

typescript

// “我的”页面

Button("点击登录")

  .onClick(() => {

    router.pushUrl({ url: "pages/Login" })

  })

2. 登录页布局

新建Login.ets，布局：

手机号输入框（只允许输数字，最多 11 位）

验证码输入框 +“获取验证码” 按钮（点了会倒计时）

登录按钮

3. 核心功能：获取验证码倒计时

点 “获取验证码” 后，按钮变成 “60s 后重新获取”，用定时器实现：

typescript

@State codeText: string = "获取验证码"

@State isCountDown: boolean = false

getCode() {

  this.isCountDown = true

  let count = 60

  this.codeText = `${count}s后重新获取`

  setInterval(() => {

    count--

    this.codeText = `${count}s后重新获取`

    if (count === 0) {

      this.codeText = "获取验证码"

      this.isCountDown = false

    }

  }, 1000)

}

4. 登录校验

点登录按钮时，检查手机号（11 位）和验证码（6 位），没问题就存 “登录状态”，跳回 “我的” 页：

typescript

login() {

  if (手机号不对 || 验证码不对) {

    promptAction.showToast({ message: "请填对信息~" })

    return

  }

  // 存登录状态

  AppStorage.setOrCreate("isLogin", true)

  router.back() // 跳回上一页

}

怎么运行这个 APP？

打开 DevEco Studio，创建项目（按第一步来）；

把上面讲的页面文件（Index.ets/CoffeeDetail.ets/Login.ets）新建好，写好核心代码；

打开 “模拟器”（工具顶部的 Device Manager，选个手机模拟器）；

点顶部的 “Run” 按钮（绿色三角）—— 等几秒，模拟器里就会显示你的仿瑞幸 APP 啦！

注意事项（避坑！）

图片链接：代码里的图片用的是占位链接，你可以搜 “瑞幸咖啡图片” 复制 URL 替换；

权限：这个项目不用额外权限，直接运行就行；

报错：如果模拟器连不上，重启工具再试～