网站开发分类wordpress 全部函数
任务要求
模拟积分抽奖程序，玩家首先输入玩家姓名，跳转到积分抽奖页面，玩家初始积分为1000分，在积分抽奖页面有红黄蓝灰四种卡片，抽中红卡加500分，抽中黄卡加200分，抽中蓝卡减500分，抽到灰卡积分清零。
抽卡规则：
- 仅能抽3次
- 积分清零不能继续
抽卡完毕后可以查看获奖情况：
L3（分数 ==2500）：笔记本
L2(分数>=1500)：智能手表
L1(分数>0)：钥匙扣
L0(分数<=0)：未中奖
界面原型：
1）入口页面：
2）抽卡页面：
3）开始抽卡：
4）抽卡结果：
涉及知识点
-
常用属性方法，阴影设置
-
线性布局，边距，内容对齐
-
@Styles、@Extend
-
路由参数传递
-
条件渲染
-
AlertDialog
1 入口页面
界面原型：
1）页面标题
在pages下面新建页面，命名为：ScoreGamePage，清除原有代码，仅留框架代码，然后添加如下代码，完成标题部分：
@Entry
@Component
struct ScoreGamePage {@State title: string = '积分抽奖'build() {Column(){Text(this.title).fontSize(44).fontWeight(FontWeight.Bolder).margin(20)}.width('100%').height('100%')}
}
预览效果：
2）布局【好运连连】部分
使用Row布局，【好运】占一行，【连连】占一行。
build() {Column({ space: 10 }) {Text(this.title)...Row({ space: 10 }) {Text('好').squareTxt(Color.Red)Text('运').squareTxt(Color.Yellow)}Row({ space: 10 }) {Text('连').squareTxt(Color.Blue)Text('连').squareTxt(Color.Gray)}}.width('100%').height('100%')}
}
使用@Extend定义全局样式（需要写在组件外面）：
@Extend(Text)
function squareTxt(color: Color) {.fontSize(50).width(150).height(150).borderRadius(12).backgroundColor(color).textAlign(TextAlign.Center).shadow({radius:8,color:'#ccc',offsetX:20,offsetY:20})}
[!NOTE]
关于@Extend
1、扩展原生组件
2、属于全局样式，需在组件外定义，必须加function
3、可以传递参数
4、仅可使用所扩展组件的属性方法和所有组件的通用属性方法
预览效果：
3）输入玩家名及开始抽奖按钮
继续添加文本输入框和按钮：
TextInput({placeholder:'请输入您的名字'}).width('95%').margin(20)Button('开始抽奖').width('95%').height(50).fontSize(22)
预览效果：