小试牛刀-抽奖程序
[*] 编写抽奖程序
需求：操持一个抽奖程序，点击抽奖按钮随机抽取一个名字作为中奖者
目的：了解项目布局，简单UI布局，属性方法、事件方法，程序运行及调试
[*] 界面原型
待抽奖：
https://i-blog.csdnimg.cn/direct/8c1eda1514c94067974b60d8176ef29a.png#pic_center
点击抽奖按钮：
https://i-blog.csdnimg.cn/direct/e075cdd0f8184ee184b34e4ababa31ca.png#pic_center
1 新建项目
File》新建项目：
https://i-blog.csdnimg.cn/direct/dc75ab20fa81413f927503052da61ccf.png#pic_center
录入项目信息：
https://i-blog.csdnimg.cn/direct/eca52f16b43942b7bbe95faf35a6f880.png#pic_center
从index.ets页面预览生成的项目：
https://i-blog.csdnimg.cn/direct/4584473827024ae791a784841d2dcfc8.png#pic_center
项目布局说明：
[*] 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
界面原型：
https://i-blog.csdnimg.cn/direct/e4819ca1e76f4542a0dfe77cc7ca9f9c.png#pic_center
在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%')
}
}
预览效果：
https://i-blog.csdnimg.cn/direct/30fee443b6534e1e95944a7e2de64972.png#pic_center
3 抽奖逻辑
点击抽奖按钮，从预界说数组中选择姓名并表现，利用随机数模拟抽奖过程。
界说抽奖姓名数组：
@State name: string = '待抽奖'
private names: string[] = [
'刘备',
'关羽',
'张飞'
]
...
在按钮点击事件中完成抽奖逻辑：
Button('抽奖')
.width('80%')
.fontSize(26)
.onClick(()=>{
let idx = Math.floor(Math.random()*3)
this.name = this.names
})
点击按钮测试效果：
https://i-blog.csdnimg.cn/direct/68ef8a5d1266455e8e91d032dcc2ea04.png#pic_center
4 当地模拟器运行
https://i-blog.csdnimg.cn/direct/b10d9c9bfb7c4cad968d4dc60809b723.png#pic_center
启动当地模拟器：
https://i-blog.csdnimg.cn/direct/4e6e06dca3324ca7a1f8b7273f79045e.png#pic_center
启动中：
https://i-blog.csdnimg.cn/direct/95c018d064054022848c424cda67c562.png#pic_center
启动完成，点击运行：
https://i-blog.csdnimg.cn/direct/07e82d9b11614b308089ebbeed0c96b6.png#pic_center
点击抽奖按钮：
https://i-blog.csdnimg.cn/direct/ba21f0bc45264c9191ce3dd46cee265b.png#pic_center
运行效果：
https://i-blog.csdnimg.cn/direct/421ea3d50095423ba8008c3b9eae42d5.png#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]