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

介绍

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

项目结构

项目展示

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

多个登录方式

首页

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%')
  }
}

轮播图

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

​

代码展示
@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'})
  }
}

个人主页

​
使用了按钮和Text组件

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

​

项目解析

首页MainPage

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')
  }
}

登录界面LoginPage

个人主页MinePage

总结

本项目只是对本学期知识的总结和运用.