小试牛刀-抽奖程序

1. 编写抽奖程序

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

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

2. 界面原型

​ 待抽奖：

点击抽奖按钮：

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

点击按钮测试效果：

4 本地模拟器运行

启动本地模拟器：

启动中：

启动完成，点击运行：

点击抽奖按钮：

运行结果：

代码仓

https://gitee.com/snowyvalley/harmony-app-dev-basic-course.git