|
|
# 构建应用
|
|
|
|
|
|
##### 字符串拼接
|
|
|
|
|
|
```
|
|
|
//直接用+号拼接
|
|
|
'hello' + 'world' = 'helloworld'
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
##### 占位符
|
|
|
|
|
|
```
|
|
|
//模板字符串``支持以${变量名}形式的占位符
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 类型转换
|
|
|
|
|
|
##### 字符串转数字
|
|
|
|
|
|
- Number()直接转数字，失败返回NaN
|
|
|
- parseInt()去小数转数字，失败返回NaN
|
|
|
- parseFloat()保留小数，失败返回NaN
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 数字转字符串
|
|
|
|
|
|
- toString() 直接转字符串
|
|
|
- toFixed() 四舍五入后转字符串，可设置保留几位小数
|
|
|
|
|
|
```
|
|
|
num.toString()
|
|
|
num.toFixed(保留小数位数)
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 交互
|
|
|
|
|
|
##### 点击事件
|
|
|
|
|
|
```
|
|
|
//点击弹出弹框
|
|
|
Button('点击演示')
|
|
|
.onClick(()=>{
|
|
|
console.log('按钮被点击')
|
|
|
AlertDialog.show({
|
|
|
message: '弹出'
|
|
|
})
|
|
|
})
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 状态管理
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
//设置状态变量后，该变量更新后，界面会重新渲染
|
|
|
@State i: number = 0
|
|
|
build(){
|
|
|
Row(){
|
|
|
Column(){
|
|
|
this.i = 3
|
|
|
Button('点击演示')
|
|
|
.onClick(()=>{
|
|
|
console.log('按钮被点击')
|
|
|
AlertDialog.show({
|
|
|
message: `${this.i}`
|
|
|
|
|
|
})
|
|
|
})
|
|
|
|
|
|
}
|
|
|
.width('100%')
|
|
|
|
|
|
}
|
|
|
.height('100%')
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
这里`this.i = 3`报错，尚未解决
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 计数器案例
|
|
|
|
|
|
```
|
|
|
|
|
|
@Entry
|
|
|
@Component
|
|
|
|
|
|
|
|
|
struct Index {
|
|
|
@State i: number = 1
|
|
|
build() {
|
|
|
Row() {
|
|
|
Button('-')
|
|
|
.onClick(()=>{
|
|
|
this.i = this.i - 1
|
|
|
})
|
|
|
Text(`${this.i}`)
|
|
|
Button('+')
|
|
|
.onClick(()=>{
|
|
|
this.i = this.i + 1
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
##### 算数运算符和逻辑运算符
|
|
|
|
|
|
|
|
|
|
|
|
| 运算符名称 | 符号 |
|
|
|
| :--------: | :--: |
|
|
|
| 加 | + |
|
|
|
| 减 | - |
|
|
|
| 乘 | * |
|
|
|
| 除 | / |
|
|
|
| 取余 | % |
|
|
|
| 加法赋值 | += |
|
|
|
| 减法赋值 | -= |
|
|
|
| 乘法赋值 | *= |
|
|
|
| 除法赋值 | /= |
|
|
|
| 取余赋值 | %= |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 一元运算符
|
|
|
|
|
|
|
|
|
|
|
|
| 运算符名称 | 符号 |
|
|
|
| :--------: | :--: |
|
|
|
| 自加 | ++ |
|
|
|
| 自减 | -- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 比较运算符
|
|
|
|
|
|
==,>,<,<=,>=,!=
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### 逻辑运算符
|
|
|
|
|
|
|| && ！
|
|
|
|
|
|
|
|
|
|
|
|
##### 运算符优先级
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 数组
|
|
|
|
|
|
```
|
|
|
let songs: string[] = [···]
|
|
|
//数组长度
|
|
|
songs.length
|
|
|
//在开头加元素,返回操作后数组的长度
|
|
|
songs.unshift('内容1','内容2')
|
|
|
//在结尾加元素，返回操作后数组的长度
|
|
|
songs.push('内容1','内容2')
|
|
|
//从开头删除元素,返回删除的项
|
|
|
songs.shift()
|
|
|
//从结尾删除元素,返回删除的项
|
|
|
songs.pop()
|
|
|
//在任意位置添加/删除数组元素
|
|
|
songs.splice(操作开始的下标,删除的个数,新增的元素1,新增的元素2,···)
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 语句结构
|
|
|
|
|
|
|
|
|
|
|
|
##### if else
|
|
|
|
|
|
##### switch
|
|
|
|
|
|
##### 三元条件表达式
|
|
|
|
|
|
```
|
|
|
let num1: number = 5
|
|
|
let num2: number = 10
|
|
|
//返回较大值
|
|
|
let res: number = num1 > num2 ? num1 : num2
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
表达式1 ? 表达式2 : 表达式3
|
|
|
|
|
|
表达式1为 true 返回表达式2，否则返回 表达式3
|
|
|
|
|
|
|
|
|
|
|
|
##### while
|
|
|
|
|
|
##### for
|
|
|
|
|
|
##### break && continue
|
|
|
|
|
|
|
|
|
|
|
|
##### 遍历数组 for...of
|
|
|
|
|
|
```
|
|
|
for(let item of names){
|
|
|
打印数组每一项item
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
##### 对象数组
|
|
|
|
|
|
```
|
|
|
//定义接口
|
|
|
interface Student {
|
|
|
Id: number
|
|
|
name: string
|
|
|
gender: string
|
|
|
age: number
|
|
|
}
|
|
|
|
|
|
let stuArr: Student[] = [
|
|
|
{Id: 1,name: '小米',gender: '男',age: 18},
|
|
|
{Id: 2,name: 'da米',gender: '男',age: 28}
|
|
|
]
|
|
|
//包括对象的复杂数据，可以通过一下方法打印到日志中
|
|
|
console.log('学生数组',JSON.stringify(stuArr))
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### ForEach-渲染控制
|
|
|
|
|
|
```
|
|
|
@State titles: string[] = ['1','2','3','4','5']
|
|
|
build() {
|
|
|
Column(){
|
|
|
ForEach(this.titles,(item: string,index) => {
|
|
|
Text(item)
|
|
|
.fontSize('24')
|
|
|
.fontWeight(700)
|
|
|
.fontColor(Color.Orange)
|
|
|
.width('100%')
|
|
|
.padding(15)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 综合练习-生肖集卡片
|
|
|
|
|
|
|
|
|
|
|
|
#### 知识点引入
|
|
|
|
|
|
##### Badge角标
|
|
|
|
|
|
```
|
|
|
@Entry
|
|
|
@Component
|
|
|
struct Index {
|
|
|
build() {
|
|
|
Column(){
|
|
|
Badge({
|
|
|
count: 1,
|
|
|
position: BadgePosition.RightTop,
|
|
|
style: {
|
|
|
badgeSize: 20,
|
|
|
fontSize: 14,
|
|
|
badgeColor: '#FA2A2D'
|
|
|
}
|
|
|
}) {
|
|
|
Image($r('app.media.bg_01'))
|
|
|
.width(100)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### Grid布局
|
|
|
|
|
|
方便快捷的布局规律的多排多列的相似的组件
|
|
|
|
|
|
```
|
|
|
Grid(){
|
|
|
ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{
|
|
|
GridItem(){
|
|
|
//GridItem 里有且只有一个子元素
|
|
|
Column(){
|
|
|
|
|
|
}
|
|
|
.width(80)
|
|
|
.height(80)
|
|
|
.backgroundColor(Color.Green)
|
|
|
.border({width: 1})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
//设置在一行中，每一列占多少份宽度
|
|
|
.columnsTemplate('1fr 1fr 1fr')
|
|
|
//设置在一列中，每一行占多少份宽度
|
|
|
.rowsTemplate('1fr 1fr 1fr 1fr')
|
|
|
.width('100%')
|
|
|
.height(500)
|
|
|
.backgroundColor(Color.Pink)
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#####
|
|
|
|
|
|
## 抽卡源码
|
|
|
|
|
|
```tsx
|
|
|
interface ImageCount {
|
|
|
url: Resource;
|
|
|
count: number;
|
|
|
}
|
|
|
|
|
|
@Entry
|
|
|
@Component
|
|
|
struct Index {
|
|
|
@State images: ImageCount[] = [
|
|
|
{url: $r('app.media.bg_00'),count: 0},
|
|
|
{url: $r('app.media.bg_01'),count: 0},
|
|
|
{url: $r('app.media.bg_02'),count: 0},
|
|
|
{url: $r('app.media.bg_03'),count: 0},
|
|
|
{url: $r('app.media.bg_04'),count: 0},
|
|
|
{url: $r('app.media.bg_05'),count: 0},
|
|
|
];
|
|
|
//随机的抽卡序号
|
|
|
@State randomIndex: number = -1
|
|
|
//判断是否得到大奖
|
|
|
@State sum: number = 0
|
|
|
@State maskOpacity: number = 0
|
|
|
@State maskZIndex: number = -1
|
|
|
@State maskOpacity1: number = 0
|
|
|
@State maskZIndex1: number = -1
|
|
|
//控制图片缩放
|
|
|
@State maskImgX: number = 0
|
|
|
@State maskImgY: number = 0
|
|
|
build() {
|
|
|
Stack() {
|
|
|
Column() {
|
|
|
|
|
|
Grid() {
|
|
|
ForEach(this.images, (item: ImageCount, index: number) => {
|
|
|
GridItem() {
|
|
|
Badge({
|
|
|
count: item.count,
|
|
|
position: BadgePosition.RightTop,
|
|
|
style: {
|
|
|
fontSize: 14,
|
|
|
badgeSize: 20,
|
|
|
badgeColor: '#fa2a2d'
|
|
|
}
|
|
|
|
|
|
}) {
|
|
|
Image(item.url)
|
|
|
.width(80)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
.columnsTemplate('1fr 1fr 1fr')
|
|
|
.rowsTemplate('1fr 1fr')
|
|
|
.width('100%')
|
|
|
.height(300)
|
|
|
.backgroundColor(Color.Pink)
|
|
|
.margin({ top: 100 })
|
|
|
|
|
|
Button('立即抽卡')
|
|
|
.width(200)
|
|
|
.backgroundColor('#ed5b8c')
|
|
|
.margin({ top: 50 })
|
|
|
.onClick(()=>{
|
|
|
//点击达到跳转效果
|
|
|
this.maskOpacity = 1
|
|
|
this.maskZIndex = 99
|
|
|
//图片缩放
|
|
|
this.maskImgX = 1
|
|
|
this.maskImgY = 1
|
|
|
|
|
|
//计算随机数
|
|
|
this.randomIndex = Math.floor(Math.random() * 6)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
.width('100%')
|
|
|
.height('100%')
|
|
|
.backgroundColor(Color.Pink)
|
|
|
|
|
|
//抽卡遮罩层
|
|
|
Column({space: 30}) {
|
|
|
Text('获得生肖卡')
|
|
|
.fontColor('#f5ebcf')
|
|
|
.fontSize(25)
|
|
|
.fontWeight(FontWeight.Bold)
|
|
|
Image($r(`app.media.img_0${this.randomIndex}`))
|
|
|
.width(200)
|
|
|
//控制元素的缩放
|
|
|
.scale({
|
|
|
x: this.maskImgX,
|
|
|
y: this.maskImgY
|
|
|
})
|
|
|
.animation({
|
|
|
duration: 500
|
|
|
})
|
|
|
Button('开心收下')
|
|
|
.width(200)
|
|
|
.height(50)
|
|
|
.backgroundColor(Color.Transparent)
|
|
|
.border({width: 2,color: '#fff9e0'})
|
|
|
.onClick(()=>{
|
|
|
|
|
|
this.maskOpacity = 0
|
|
|
this.maskZIndex = -1
|
|
|
//重置图像缩放比为0
|
|
|
this.maskImgX = 0
|
|
|
this.maskImgY = 0
|
|
|
//开心收下后处理数据,需要更新页面。所以要更新整个对象
|
|
|
this.images[this.randomIndex] = {
|
|
|
url: $r(`app.media.img_0${this.randomIndex}`),
|
|
|
count: this.images[this.randomIndex].count + 1
|
|
|
}
|
|
|
if(this.images[this.randomIndex].count == 1)
|
|
|
{
|
|
|
this.sum ++
|
|
|
}
|
|
|
if(this.sum == 6)
|
|
|
{
|
|
|
this.maskOpacity1 = 1
|
|
|
this.maskZIndex1 = 99
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
}
|
|
|
.justifyContent(FlexAlign.Center)
|
|
|
.width('100%')
|
|
|
.height('100%')
|
|
|
.backgroundColor('#cc000000')
|
|
|
//设置透明度、层级
|
|
|
.opacity(this.maskOpacity)
|
|
|
.zIndex(this.maskZIndex)
|
|
|
//添加动画 animation
|
|
|
.animation({
|
|
|
duration: 200
|
|
|
})
|
|
|
|
|
|
//大奖遮罩层
|
|
|
Column(){
|
|
|
Text('恭喜获得大奖')
|
|
|
.fontColor('#f5ebcf')
|
|
|
.fontSize(25)
|
|
|
.fontWeight(700)
|
|
|
Image($r('app.media.xm'))
|
|
|
.width(300)
|
|
|
Button('再来一次')
|
|
|
.onClick(()=>{
|
|
|
|
|
|
})
|
|
|
.width(200)
|
|
|
.height(50)
|
|
|
.backgroundColor(Color.Transparent)
|
|
|
.border({width: 2,color: '#fff9e0'})
|
|
|
}
|
|
|
.justifyContent(FlexAlign.Center)
|
|
|
.width('100%')
|
|
|
.height('100%')
|
|
|
.backgroundColor('#cc000000')
|
|
|
.opacity(this.maskOpacity1)
|
|
|
.zIndex(this.maskZIndex1)
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
