小试牛刀-抽奖程序

news2025/4/13 0:44:49

编写抽奖程序

需求：设计一个抽奖程序，点击抽奖按钮随机抽取一个名字作为中奖者

目标：了解项目结构，简单UI布局，属性方法、事件方法，程序运行及调试
界面原型

待抽奖：

在这里插入图片描述

点击抽奖按钮：

在这里插入图片描述

1 新建项目

File》新建项目：

在这里插入图片描述

录入项目信息：

在这里插入图片描述

从index.ets页面预览生成的项目：

在这里插入图片描述

项目结构说明：

entry：HarmonyOS工程模块，编译构建生成一个HAP包。
- src > main > ets：用于存放ets源码。
- src > main > ets > entryability：应用/服务的入口。
- src > main > ets > pages：应用/服务包含的页面。
- src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
- src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息
- build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
- hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
build-profile.json5：应用级配置信息，包括签名、产品配置等。
hvigorfile.ts：应用级编译构建任务脚本。

2 界面UI

界面原型：

在这里插入图片描述

在Index.ets页面清除原有代码，使用colum布局重新编写：

@Entry
@Component
struct Index {

  @State name: string = '待抽奖'

  build() {
    Column(){
      Text('抽奖App V2.0')
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
      Text(`恭喜：${this.name}`)
        .fontSize(32)
        .fontWeight(FontWeight.Bolder)
      Button('抽奖')
        .width('80%')
        .fontSize(26)


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

  }
}

预览效果：
在这里插入图片描述

3 抽奖逻辑

点击抽奖按钮，从预定义数组中选择姓名并显示，使用随机数模拟抽奖过程。

定义抽奖姓名数组：

  @State name: string = '待抽奖'
  private names: string[] = [
    '刘备',
    '关羽',
    '张飞'
  ]
...

在按钮点击事件中完成抽奖逻辑：

      Button('抽奖')
        .width('80%')
        .fontSize(26)
        .onClick(()=>{
          let idx = Math.floor(Math.random()*3)
          this.name = this.names[idx]
        })

点击按钮测试效果：

在这里插入图片描述