【中工开发者】鸿蒙商城实战项目（启动页和引导页）

创建一个空项目

先创建一个新的项目选择第一个，然后点击finish

接下来为项目写一个名字，然后点击finish。

把index页面的代码改成下面代码块的代码，就能产生下面的效果

@Entry
@Component
struct Index {
    build() {
      Column(){
        Blank()
        Column(){

      }
      .height('100%')
      .width('100%').linearGradient({
        colors: [['#FF8469',0],[ '#FC4355',1] ]})
    }
  }
}

          Text('探索')
            .fontColor(Color.White)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)
          Text('探购物乐趣')
            .fontColor(Color.White)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State opacityValue: number = 0.3;
  onPageShow(){
    this.opacityValue = 1;
  }
    build() {
      Column(){
        Blank()
        Column(){
          Text('探索')
            .fontColor(Color.White)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)
          Text('探购物乐趣')
            .fontColor(Color.White)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)
      }
        .alignItems(HorizontalAlign.Start).opacity(this.opacityValue)
        .animation({
          duration:  1500,
          iterations:3,
          onFinish:()=>{
            router.replaceUrl({
              url: 'pages/LaunchPage'
            })
          }
        })
      .height('100%')
      .width('100%').linearGradient({
        colors: [['#FF8469',0],[ '#FC4355',1] ]})
    }
  }
}

启动页

index页面代码如下

import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State opacityValue: number = 0.3;
onPageShow(){
  this.opacityValue = 1;
}

  build() {
   Column(){
     Blank()
     Column(){
       Text('探索')
         .fontColor(Color.White)
       .fontSize(36)
       .fontWeight(FontWeight.Bold)
       Text('探购物乐趣')
         .fontColor(Color.White)
       .fontSize(36)
       .fontWeight(FontWeight.Bold)

     }.alignItems(HorizontalAlign.Start).opacity(this.opacityValue)
     .animation({
       duration:  1500,
       iterations:3,
       onFinish:()=>{
         router.replaceUrl({
           url: 'pages/LaunchPage'
         })
       }
     })
     Blank()
     Blank()
     Image($r('app.media.logo')).width(100)

   }
    .height('100%')
    .width('100%').linearGradient({
     colors: [['#FF8469',0],[ '#FC4355',1] ]})
  }
}

export default  interface BannerModel{
  id:number
  title:string
  image:Resource
  subtitle:string
}

LaunchModels页面代码

引导页

LaunchPage页面代码

import BannerModel from '../models/BannerModel'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct LaunchPage {
  @State index: number = 0
  @State items: BannerModel[] =[
    {
      id: 0,
      title: '电脑专区',
      image: $r('app.media.diannao'),
      subtitle: '探购物乐趣'
    },  {
      id: 1,
      title: '专区手机',
      image: $r('app.media.shouji'),
      subtitle: '探购物乐趣'
    },  {
      id: 2,
      title: '耳机专区',
      image: $r('app.media.erji'),
      subtitle: '探购物乐趣'
    }
  ]


  build() {
Column(){
  Tabs() {
    ForEach(this.items, (item: BannerModel, index: number) => {
      TabContent() {
        Column() {
          Text(item.title).fontColor(Color.White)
            .fontSize(36)
            .fontWeight(FontWeight.Bold)
            .fontWeight(FontWeight.Bold)
          Text(item.subtitle).fontColor(Color.White)
            //.fontSize(36)
            .fontWeight(FontWeight.Bold)
          Blank()

          Image(item.image).width(200).objectFit(ImageFit.Contain)
            .interpolation(ImageInterpolation.High)//.height(100)
          Row({space:10}){
            ForEach([1,2,3], (item: number, index: number)=>{
              Rect({width: 40, height: 40})
                .fill(this.index == index ? Color.White : Color.Gray)
            })

          }.margin({top: 200})

          if (this.index == this.items.length-1) {
            Button("立即体验").width('100%').height(60)
              .fontSize(36)
              .borderWidth(2)
              .borderColor(Color.White)
              .backgroundColor(Color.Transparent).margin({top: 30})
              .onClick(()=>{
                router.replaceUrl({
                  url:"pages/HomePage"
                })
              })

          }
        }.width('100%').height('100%').padding({top: 30,left: 30,right: 30})

      }.width('100%').height('100%')

    })
  }.width('100%').height('100%').onChange((index: number) => {
    this.index = index
  })
}.width('100%').height('100%').linearGradient({
  colors: [['#FF8469',0],[ '#FC4355',1]
  ]})


    .height('100%')
    .width('100%')
  }
}