HarmonyOS应用开发ArkUI（TS）电商项目实战

最新推荐文章于 2025-06-06 11:27:26 发布

OpenHarmony_小贾

最新推荐文章于 2025-06-06 11:27:26 发布

阅读量1.5k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： HarmonyOS OpenHarmony 移动开发文章标签： harmonyos 华为鸿蒙开发 ui arkUI 项目实战移动开发

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/137359838

项目介绍

本项目基于 HarmonyOS 的ArkUI框架TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，

工具版本： DevEco Studio 3.1 Canary1

SDK版本： 3.1.9.7（API Version 8 Release）

效果演示

页面解析

主框架

使用容器组件：Tabs 、TabContent、作为主框架，底部Tab使用自定义布局样式，设置点击事件，每次点击更换选中的索引。来切换内容页面。

使用自定义组件来实现：首页、分类、购物车、我的的搭建。

@Entry
@Component
struct MainFrame {
   
   
  @State selectIndex: number = 0
  private controller: TabsController = new TabsController()
  private tabBar = getTabBarList()

  // 内容
  @Builder Content() {
   
   
    Tabs({
    
     controller: this.controller }) {
   
   
      TabContent() {
   
   HomeComponent()}
      TabContent() {
   
   ClassifyComponent()}
      TabContent() {
   
   ShoppingCartComponent({
   
    isShowLeft: false })}
      TabContent() {
   
   MyComponent()}
    }
    .width('100%')
    .height(0)
    .animationDuration(0)
    .layoutWeight(1)
    .scrollable(false)
    .barWidth(0)
    .barHeight(0)
  }

  // 底部导航
  @Builder TabBar() {
   
   
    Row() {
   
   
      ForEach(this.tabBar, (item: TabBarModel, index) => {
   
   
        Column() {
   
   
          Image(this.selectIndex === index ? item.iconSelected : item.icon)
            .width(23).height(23).margin({
   
    right: index === 2 ? 3 : 0 })
          Text(item.name)
            .fontColor(this.selectIndex === index ? '#dc1c22' : '#000000')
            .margin({
   
    left: 1, top: 2 })
        }.layoutWeight(1)
        .onClick(() => {
   
   
          this.selectIndex = index
          this.controller.changeIndex(index)
        })
      }, item => item.name