HarmonyOS开发实例（附项目源码）

文件目录如下。本项目共由12个页面组成，其中Index界面为app的4个主界面和Tabs导航栏组件拼接而成的真正的app主界面。page,,livehouse,ticket,my分别不带导航页的4个主界面。M1,M2,M3,M4为在page主界面进行搜索操作后跳转的搜索完成的界面，register,sign为在进入app的主界面之前所需要的登录注册界面，welcome为进入app时的第一个界面——欢迎界面，在显示4秒之后进入登陆界面。接下来通过在虚拟机上的演示对于各个界面进行介绍。

 

通过module.json5文件对封装好的app的图标和标题进行更改。

点击app图标，进入welcome欢迎界面，持续4秒后默认跳转至注册界面。

登录界面由3个文本输入框（分别对应账号，密码，邮箱）和2个按钮（针对已有账号的用户的登录按钮和没有账号的用户的注册按钮）。

在这里正确的账号，密码，邮箱分别为：ty,ty20040415,tianyuan。（可在对应处进行更改）

通过if-else条件判断语句进行判断，若个人信息输入正确则登录成功，若输入错误则报错。

这里以账号：1，密码：1，邮箱：1为例，可见的确进行了报错。

若输入正确的账号、密码、邮箱，则会进入app的主界面。并展示“welcome”欢迎语，并且通过传值的方法使app中“我的”界面的用户个人id与账号相同。

若点击快速注册按钮，则进入注册界面。在注册界面主要实现的逻辑为每一个输入框的输入都不能为空，确认密码两次必须一致。并且同样的，通过传值的方法使用户的个人id与账号相同

接下来进入app内部界面。

首页内重要的组件为最顶部的文本输入框，使用Map键值对存储歌手以及其对应的演唱会页面，可以实现输入指定的歌手姓名再点击旁边的搜索按钮进行该歌手演唱会信息的搜索。“演出日历”和其下方的“演出海报”一行都使用了swiper轮播组件对信息进行轮播。“必看演出”则使用了scroller组件，使演出信息可以进行滑动，便于用户查看演出信息。

由于事件关系，本app暂时只设置了四个map键值对储存歌手姓名和其对应的演唱会信息，搜索框内输入（zhangshaohan（张韶涵）/xiaojingteng（萧敬腾）/alin（黄丽玲）/JonyJ）会分别跳转至该歌手的演唱会信息界面。

现场页：现场页同样由歌手头像，巡演地点的Scroller组件和推荐信息的swiper轮播组件构成。点击歌手头像可以跳转至其对应的演唱会信息界面。

票夹界面

我的界面：由用户头像和个人信息页组成，其中个人信息的id由登录/注册页的账号决定。“在线客服”一栏由scroller滑动组件构成。

项目源码：

index：

import { router } from '@kit.ArkUI'
import { id } from './sign'
//完整版
@Entry
@Component
struct tab{
  private swipercontroller:SwiperController = new SwiperController()
  scrmy:Scroller=new Scroller() //实例化控制器 用new 实例化Scroller得到scrmy控制器对象
  @State map: Map<string, string> = new Map();
  @State num: number = 0
  @State str: string = ''
  @State name: string | undefined = ''
//传值
  @State myid : id = router.getParams() as id
  @State temp:object= router.getParams()

//想看
  @State kannum:number=0
  @State yuenum:number=0

  @State fontcolor:string = '#182431'
  @State selectedfontcolor:string = '#0070FF'
  @State currentindex :number = 0
  private  controller:TabsController = new TabsController()
  @Builder tabbuilder(title:string,tagrtindex:number,selectedimg:Resource,normalimg:Resource){
    Column(){
      Image(this.currentindex === tagrtindex ? selectedimg:normalimg).size({width:25,height:25})
      Text(title).fontColor(this.currentindex === tagrtindex ? '#1698CE' : '#6B6B6B')
    }.width('100%').height(50).justifyContent(FlexAlign.Center)
  }
  build() {
    Tabs({barPosition:BarPosition.End,controller:this.controller })
    {
      TabContent(){
        Column()
        {
          //第一行：搜索框的实现
          Row()
          {
            Column()
            {
              Text('成都>').fontSize(18).fontWeight(FontWeight.Bold)
            }
            Column()
            {
              TextInput({ placeholder: '搜索内容...' })
                .width(250)
                .onChange((value:string)=>{
                  this.str=value
                })
            }
            Button('搜索').width(60).height(30).backgroundColor('#FF69B4').fontWeight(FontWeight.Bold)
              .onClick(()=>{
                this.map.set('zhangshaohan', 'M1')
                this.map.set('xiaojingteng', 'M2')
                this.map.set('JonyJ', 'M3')
                this.map.set('Alin', 'M4')
                this.name = this.map.get(this.str)
                router.pushUrl({
                  url:"pages/"+this.name
                })
              })
          }.width('100%').height('10%')

          //第二行：图标的实现
          Row()
          {
            Column()
            {
              Image($rawfile('pg1.jpg')).width(30).height(30)
              Text('演唱会').fontSize(13).margin({top:10})
            }.width('20%').height('100%').justifyContent(FlexAlign.Center)


            Column()
            {
              Image($rawfile('pg2.jpg')).width(30).height(30)
              Text('音乐节').fontSize(13).margin({top:10})
            }.width('20%').height('100%').justifyContent(FlexAlign.Center)


            Column()
            {
              Image($rawfile('pg3.jpg')).width(30).height(30)
              Text('LiveHouse').fontSize(13).margin({top:10})
            }.width('20%').height('100%').justifyContent(FlexAlign.Center)


            Column()
            {
              Image($rawfile('pg4.jpg')).width(30).height(30)
              Text('音乐剧').fontSize(13).margin({top:10})
            }.width('18%').height('100%').justifyContent(FlexAlign.Center)

            Column()
            {
              Image($rawfile('pg5.jpg')).width(30).height(30)
              Text('脱口秀').fontSize(13).margin({top:10})
            }.width('20%').height('100%').justifyContent(FlexAlign.Center)

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