小试牛刀-抽奖程序

  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

相关推荐
2501_9153738810 分钟前
Java调用C++教程:JNI与JNA两种方式详解
java·开发语言·c++
上海张律师18 分钟前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
lqj_本人22 分钟前
鸿蒙OS&UniApp 移动端直播流播放实战:打造符合鸿蒙设计风格的播放器#三方框架 #Uniapp
华为·uni-app·harmonyos
lqj_本人26 分钟前
鸿蒙OS&UniApp复杂表单与动态验证实践:打造高效的移动端表单解决方案#三方框架 #Uniapp
华为·uni-app·harmonyos
一轮大月亮27 分钟前
JavaScript es6 语法 map().filter() 链式调用,语法解析 和常见demo
开发语言·javascript·es6
_extraordinary_39 分钟前
Java String的使用续 -- StringBuilder类和StringBuffer
java·开发语言
移动端开发者42 分钟前
鸿蒙Next Tabs实现底部导航进阶
harmonyos
simple丶1 小时前
【HarmonyOS 】工具函数封装 持续更迭...
harmonyos·arkts·arkui
未来之窗软件服务1 小时前
搭建 Select 三级联动架构-东方仙盟插件开发 JavaScript ——仙盟创梦IDE
开发语言·javascript·ide·仙盟创梦ide·东方仙盟皮肤·东方仙盟·东方仙盟插件
@曲终1 小时前
C++:栈帧、命名空间、引用
java·开发语言·c++·经验分享·笔记