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

创建一个空项目

先创建一个新的项目选择第一个，然后点击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:numbertitle:stringimage:Resourcesubtitle: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%')}
}

图片资源

目录

创建一个空项目

启动页

引导页

图片资源

---

使用image要传入照片的路径，记得在resource文件夹里面粘贴相应的图片

演示视频如下

QQ2024126-195722