[中工开发者] 线上商城开发zut 原创

wx674999ce964a1

发布于 2024-12-5 16:36

浏览

0收藏

介绍

本应用是一款线上商城的的制作。
本学期学习了鸿蒙开发课程，想通过一个小项目检验一下自己所学，下面把该项目总结一下，希望对学习鸿蒙开发的小伙伴提供一些参考。

项目结构

[中工开发者] 线上商城开发zut-鸿蒙开发者社区

项目展示

线上商城app展示
登录界面
包括验证输入是否为空

多个登录方式 [中工开发者] 线上商城开发zut-鸿蒙开发者社区

首页

import router from '@ohos.router';
import Home from '../view/HomePage'
import Mine from '../view/MinePage'
import Choice from '../view/ChoicePage'

interface GeneratedTypeLiteralInterface_1 {
  title: string;
}

interface GeneratedTypeLiteralInterface_2 {
  title: string;
}

@Entry
@Component
struct Main {
  @State message: string = '首页';
  private controller: TabsController = new TabsController();
  private items: Array<GeneratedTypeLiteralInterface_1> = [
    { title: '首页' },
    { title: '精选' },
    { title: '我的' },
  ]

  build() {
    Row() {
      Tabs({ barPosition: BarPosition.End }) {
        ForEach(this.items, (item: GeneratedTypeLiteralInterface_2 ,index:number) => {
          TabContent() {
            Column(){
              Text(item.title)
              if(index===0){
                Home()
              }else if(index===1){
                Choice()
              }else {
                Mine()
              }
            }

          }.tabBar(item.title)
        })

      }
      .vertical(false)
      .barWidth('100%')
      .barHeight('70vp')
      .animationDuration(400)


      // Column(){
      //   Text(this.message)
      //     .fontSize(50)
      //     .fontWeight(FontWeight.Bold)
      // Button('返回登录',{type:ButtonType.Capsule,stateEffect:true})
      //   .width('90%')
      //   .margin('20vp')
      //   .onClick(()=>{
      //     //
      //     router.pushUrl({
      //       url :'pages/LoginPage'
      //
      //     }).catch((error:Error)=>{
      //
      //     })
      //   })
      // }

    }
    .height('100%')

    .width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

轮播图

使用swiper组件（“https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-rendering-control-foreach-V13”）

[中工开发者] 线上商城开发zut-鸿蒙开发者社区

代码展示
@Component
export default struct SwiperExample{
  @State swiperData:Array<Resource> =[
    $r('app.media.img_4'),
    $r('app.media.img_5'),
    $r('app.media.img_6')
  ]


  build() {
    Column(){
      Swiper(){
        ForEach(this.swiperData,(item:Resource)=>{
          Image(item)
            .width('95%')
            .height('160vp')
        })

      }
      .index(0)//初始化索引值
      .autoPlay(true)//自动播放
      .interval(3000)//时间间隔
      .loop(true)
      .duration(1000)//
      .itemSpace(10)
      .indicator(true)//是否启用导航点治时期
    }
    .width('100%')
    .margin({top:'5vp'})
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

个人主页

使用了按钮和Text组件

通过foreach循环渲染(“https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-rendering-control-foreach-V13”)

[中工开发者] 线上商城开发zut-鸿蒙开发者社区

项目解析

首页MainPage

[中工开发者] 线上商城开发zut-鸿蒙开发者社区


import router from '@ohos.router';
import MineUser from './components/MineUser'
import MineList from './components/MineList'
@Component
export default  struct Mince {
@State message:string='我的';
  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize('16vp')
          .alignSelf(ItemAlign.Start)


          MineUser()

        MineList()
        Button('退出登录')
          .width('90%')
          .height('40vp')
          .fontSize('16fp')
          .backgroundColor('#e5e8ea')
          .fontColor(Color.Red)
          .margin({
            top:'30vp'
          })
          .onClick(()=>{
            router.pushUrl({
              url:'pages/LoginPage'
            }).catch((error:Error)=>{

            })
          })
      }
    .width('95%')
      .height('100%')
      .margin('10vp')
    }
.backgroundColor('#f1f3f5')
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.