小试牛刀-抽奖程序

• 编写抽奖程序
  需求：操持一个抽奖程序，点击抽奖按钮随机抽取一个名字作为中奖者
  目的：了解项目布局，简单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布局重新编写：

1. @Entry
2. @Component
3. struct Index {
5.   @State name: string = '待抽奖'
7.   build() {
8.     Column(){
9.       Text('抽奖App V2.0')
10.         .fontSize(26)
11.         .fontWeight(FontWeight.Bold)
12.       Text(`恭喜：${this.name}`)
13.         .fontSize(32)
14.         .fontWeight(FontWeight.Bolder)
15.       Button('抽奖')
16.         .width('80%')
17.         .fontSize(26)
20.     }
21.     .width('100%')
22.     .height('100%')
24.   }
25. }

复制代码

预览效果：

3 抽奖逻辑

点击抽奖按钮，从预界说数组中选择姓名并表现，利用随机数模拟抽奖过程。
界说抽奖姓名数组：

1.   @State name: string = '待抽奖'
2.   private names: string[] = [
3.     '刘备',
4.     '关羽',
5.     '张飞'
6.   ]
7. ...

复制代码

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

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

复制代码

点击按钮测试效果：

4 当地模拟器运行

启动当地模拟器：

启动中：

启动完成，点击运行：

点击抽奖按钮：

运行效果：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。