【鸿蒙】HarmonyOS NEXT星河入门到实战5-基础语法

news/2024/9/18 15:14:41/ 标签: 鸿蒙

目录

一、字符串拼接

1.1 常规字符串拼接

1.2 模板字符串`hello`(符号在键盘的tab上面)

二、类型转换 (数字和字符串)

2.1 字符串转数字

 2.2 数字转字符串

三、交互

3.1 点击事件

3.2 状态管理

 3.3 计数器案例

四、运算符

4.1 算数运算符

 4.2 赋值运算符

4.3 点赞案例  ​编辑

4.4 一元运算符

4.5 比较运算符

4.6 逻辑运算符

4.7 运算符的优先级

4.8 综合案例-美团购物车

五、数组与语句

5.1 数组的操作

5.1.1 查找与修改 

5.1.2 增加数组元素 

5.1.3 删除数组元素 

5.1.4 任意位置添加/删除数组元素 

5.1.5 小结 

5.2 语句 

5.2.1 if分支语句 

5.2.1.1 单分支语句

5.2.1.2 双分支语句

 5.2.1.3 小结

5.2.1.4 案例-购物车数字框

5.2.1.5 if-多分支

 5.2.2 switch -分支语句

5.2.3 三元条件表达式

5.2.4 条件渲染

5.2.5 条件渲染案例-京东加购

5.2.6 循环语句

5.2.6.1 while-语句

5.2.6.2 for循环语句

5.2.6.3 退出循环 -break-continue

5.2.6.4 遍历数组

5.2.6.4.1 使用for遍历 数组​编辑

5.2.6.4.2 使用for...of 遍历数组 

5.2.6.4.3 案例

5.2.7 对象数组

5.2.8 ForEach渲染控制

5.2.8.1 ForEach渲染控制

5.2.8.2 FofEach案例 -新闻列表

 六、渲染控制综合案例

6.1 生肖抽卡-初始布局-Badge角标组件

6.2 生肖抽卡 - 初始布局-Grid布局

6.3 生肖抽卡 - 数据动态渲染

6.4 生肖抽卡 - 遮罩和显隐动画

6.4.1 抽卡遮罩层

6.4.2 生肖抽卡 -显隐效果控制

6.4.3 生肖抽卡 -随机卡片

6.4.4 生肖抽奖 - 抽大奖

6.4.4.1 抽大奖遮罩层

6.4.4.2 抽大奖显隐控制

6.4.5 生肖抽卡- 随机抽卡&再来一次


前言:学习数据类型、控制语句等

一、字符串拼接

1.1 常规字符串拼接

import window from '@ohos.window';
let name: string = '春天的菠菜'
let age: number = 18
console.log('简介信息:','姓名' + name)
console.log('简介信息:','年龄' + age)let num1: number = 120
let num2: number = 320
console.log('总数:',num1 + num2)
@Entry
@Component
struct Index {@State message: string = '春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Column(){Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

1.2 模板字符串`hello`(符号在键盘的tab上面)

import window from '@ohos.window';
let name: string = `春天的菠菜`  // 注意这里的符号是 · · tab键盘上面的
let age: number = 18
console.log('简介信息:',`姓名:${name},年龄:${age}`) // 注意这里的符号是 · · tab键盘上面的@Entry
@Component
struct Index {@State message: string = '春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Column(){Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

二、类型转换 (数字和字符串)

2.1 字符串转数字

 

 2.2 数字转字符串

import window from '@ohos.window';
let money: number = 1000.5@Entry
@Component
struct Index {@State message: string = '春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Column(){Text(money.toString())Text(money.toFixed())Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

三、交互

3.1 点击事件

import window from '@ohos.window';@Entry
@Component
struct Index {@State message: string = '春天的菠菜';onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Column(){Button('点我,显示对话框').onClick(() =>{console.log('你好,这是点击事件')AlertDialog.show({message: '你好这是一个弹框'})})}.width('100%')}.height('100%')}
}

3.2 状态管理

//  1、普通变量只会在初始化时渲染,后续变化,也不会改变
// 2、 状态变量,被装饰器修饰,会自动引起界面的刷新
import window from '@ohos.window';
//  1、普通变量只会在初始化时渲染,后续变化,也不会改变
// 2、 状态变量,被装饰器修饰,会自动引起界面的刷新// 组件外的普通变量
let myName: string = '春天的菠菜'
@Entry
@Componentstruct Index {// 组件内的普通变量myAge: number = 18// 组件内的状态变量@State myMessage: string = '点我看我 春天的菠菜七十二变'onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Text(myName)Text(this.myAge.toString())   // 组件内的普通变量调用需要使用thisText(this.myMessage).onClick(() => {this.myMessage = '我是猴哥'})}}
}

 3.3 计数器案例

import window from '@ohos.window';@Entry
@Componentstruct Index {@State count: number = 1onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Button('-').onClick(() =>{this.count  = this.count - 1})Text(this.count.toString()).margin(10)Button('+').onClick(() =>{this.count  = this.count + 1})}.padding(20)}
}

四、运算符

4.1 算数运算符

 4.2 赋值运算符

 

注意

4.3 点赞案例  

import window from '@ohos.window';@Entry
@Componentstruct Index {//  声明状态@State myColor: string = '#7e7e7e'@State count: number = 8888onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Column({space: 8}){Image($r('app.media.eyes')).width('100%').borderRadius({topLeft: 6, topRight: 6 })Text('考眼力又来你能看到几只鸭子?').fontSize(14).lineHeight(18).padding({left: 5, right: 5})Row(){Text(){ImageSpan($r('app.media.avatar')).width(16).margin({right: 3})Span('视野联行眼镜').fontSize(12).fontColor('#7e7e7e')}Row(){Image($r('app.media.ic_love')).margin({right: 3}).width(14).fillColor(this.myColor)Text(this.count.toString()).fontSize(12).fontColor(this.myColor)}.onClick(() => {// 修改数字this.count += 1//   修改验收this.myColor = '#ff0000'})}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left: 5, right: 5})}.width('50%')}.padding(20)}
}

4.4 一元运算符

4.5 比较运算符

4.6 逻辑运算符

4.7 运算符的优先级

注意 !在一元,优先级高

4.8 综合案例-美团购物车

import window from '@ohos.window';@Entry
@Componentstruct Index {//  声明状态@State oldPrice: number = 40.4@State newPrice: number = 20.4@State count: number = 1onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {Column() {// 产品Row({ space: 10}){// 图片Image($r('app.media.product1')).width(100).borderRadius(8)// 文字Column({space: 10}) {Column({ space: 6}) {Text('冲销量1000ml缤纷八果水果捞').lineHeight(20).fontSize(14)Text('含1份折扣商品').fontSize(12).fontColor('#7f7f7f')}.width('100%').alignItems(HorizontalAlign.Start)Row(){// 价格Row({ space: 5}) {Text() {Span('¥').fontSize(14)Span(this.newPrice.toString()).fontSize(18)}.fontColor('#ff4000')Text() {Span('¥')Span(this.oldPrice.toString())}.fontSize(14).fontColor('#999').decoration({type: TextDecorationType.LineThrough, color: '#999'})}// 加减Row() {Text('-').width(22).height(22).border({width:1, color: '#e1e1e1', radius: {topLeft: 5, bottomLeft: 5}}).textAlign(TextAlign.Center).fontWeight(700).onClick( () =>{this.count -= 1})Text(this.count.toString()).height(22).border({width: { top:1, bottom: 1 }, color: '#e1e1e1'}).padding({left: 10, right: 10}).fontSize(14)Text('+').width(22).height(22).border({width:1, color: '#e1e1e1', radius: {topRight: 5, bottomRight: 5}}).textAlign(TextAlign.Center).fontWeight(700).onClick( () => {this.count += 1})}}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height(75).layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)}.width('100%').alignItems(VerticalAlign.Top).padding(20)// 结算Row({ space: 10 }){// 价格Column({space: 5}) {Text() {Span(`已选 ${this.count.toString()} 件,`) // 注意使用tab上面的符号.fontColor('#848484')Span('合计:')Span('¥').fontColor('#fd4104')Span((this.newPrice * this.count).toFixed(2)).fontColor('#fd4104').fontSize(16)}.fontSize(14)Text(`共减¥${((this.oldPrice - this.newPrice) * this.count).toFixed(2)}`)  //注意符号是tab上面的.fontColor('#fd4104').fontSize(12)}.alignItems(HorizontalAlign.End)// 结算按钮Button('结算外卖').width(110).height(40).backgroundColor('#fed70e').fontColor('#564200').fontSize(16).fontWeight(600)}.width('100%').height(70).backgroundColor('#fff').position({x:0, y: '100%'}).translate({y: '-100%'}).padding({ left: 20, right: 20 }).justifyContent(FlexAlign.End)}}.width('100%').height('100%').backgroundColor('#f3f3f3')}
}

五、数组与语句

5.1 数组的操作

5.1.1 查找与修改 

5.1.2 增加数组元素 

 

5.1.3 删除数组元素 

5.1.4 任意位置添加/删除数组元素 

5.1.5 小结 

 

5.2 语句 

5.2.1 if分支语句 

5.2.1.1 单分支语句

5.2.1.2 双分支语句

 

 5.2.1.3 小结

 

 

5.2.1.4 案例-购物车数字框
import window from '@ohos.window';@Entry
@Componentstruct Index {@State count: number = 1onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Row(){Button('-').onClick(() =>{if(this.count >= 1){this.count--}else {AlertDialog.show({message: '不能再减了!'})}})Text(this.count.toString()).margin(10)Button('+').onClick(() =>{this.count++})}.padding(20)}
}

5.2.1.5 if-多分支

 5.2.2 switch -分支语句

5.2.3 三元条件表达式

5.2.4 条件渲染

import window from '@ohos.window';
@Entry
@Componentstruct Index {@State age: number = 13onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){if(this.age < 18){Text('未成年')}else if(this.age >= 18 && this.age <= 60){Text('成年人18-60')}else{Text('老年人')}Button('长大').onClick( () => {this.age += 5}).margin({top: 5})Text(`当前年龄:${this.age}`).margin({top: 5})}.width('100%').padding(20).backgroundColor(Color.Pink)}
}

 

5.2.5 条件渲染案例-京东加购

import window from '@ohos.window';
@Entry
@Componentstruct Index {@State count: number = 2 //无库存onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {Column() {// 底部菜单Row({space: 10}) {// 左侧菜单Row() {Column({space: 5}) {Image($r('app.media.ic_dianpu')).width(20)Text('店铺').fontSize(10).fontColor('#262626')}Column({space: 5}) {Image($r('app.media.ic_kefu')).width(20).fillColor('#666')Text('客服').fontSize(10).fontColor('#262626')}Column({space: 5}) {Image($r('app.media.ic_cart2')).width(20).fillColor('#666')Text('购物车').fontSize(10).fontColor('#262626')}}.layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)if(this.count > 0){// 右侧按钮 -- 可以购买Row({space: 5}) {Button('加入购物车').width(105).height(40).backgroundColor('#ffcc00').fontSize(14).fontWeight(600)Button('立即购买').width(105).height(40).backgroundColor('#f92c1b').fontSize(14).fontWeight(600)}}else{// 右侧按钮 -- 不能购买Row() {Button('查看类似商品').width(170).height(40).backgroundColor('#ffcc00').fontSize(14).fontWeight(600)}}}.width('100%').height(60).backgroundColor('#f7f7f7').padding({left: 20, right: 10})if(this.count <= 0){// 消息提示:库存 <= 0 显示,否则隐藏Row() {// 左侧Row({ space: 5 }){Image($r('app.media.ic_lingdang')).width(12).fillColor('#de6a1c')Text('该商品暂时没有库存,看看相似商品吧').fontSize(10).fontColor('#de6a1c')}// 右侧Image($r('app.media.ic_shangjiantou')).width(15).padding(3).fillColor('#d0662c').backgroundColor('rgba(0,0,0,0.1)').borderRadius(8)}.width('100%').height(36).backgroundColor('#fbf9da').position({x: 0, y: '-36'}).padding({left: 20, right: 20}).justifyContent(FlexAlign.SpaceBetween)}}.position({x:0,y:'100%'}).translate({y: '-100%'})}.width('100%').height('100%').padding({bottom:20}).backgroundColor('#f2f2f2')}
}

5.2.6 循环语句

5.2.6.1 while-语句

 

 

// while循环: 可以重复的执行一段代码
// while (条件) {
//   需要循环执行的语句
// }// 死循环: 没有结束条件
// while (true) {
//   console.log('while', '重复执行的代码')
// }// 实际开发真正需要的, 有次数的循环
// 三要素: 变量初始值; 判断条件; 变化量(变量要变)
// let i: number = 1
// while (i < 10) {
//   console.log('小于10成立', '执行代码', i) // 9
//   i++ // 10
// }// 需求1: 打印1-100的数字,  1, 2, 3, 4, 5 ... 100
// 三要素: 变量起始值; 判断条件; 变化量;
// let i: number = 1
// while (i <= 100) {
//   console.log('i的值:', i)
//   i++
// }// let i: number = 100
// while (i >= 1) {
//   console.log('i的值:', i)
//   i--
// }// 需求2: 打印 1-100 中的偶数
// let i: number = 1
// while (i <= 100) {
//   if (i % 2 === 0) {
//     console.log('i的值:', i)
//   }
//   i++
// }// 需求3: 计算 1-10 的数字的 累加和,  1 + 2 + 3 + 4 + 5 ... + 10
// 三要素: 变量起始值; 判断条件; 变化量;
let i: number = 1
let sum: number = 0 // 存储累加的结果while (i <= 10) {console.log('需要累加的数字:', i)// 每次执行下面这行代码, 就会进行一次累加, 并且更新累加的结果sum = sum + ii++
}
console.log('累加结果:', sum)@Entry
@Component
struct Index {@State num:number = 1build() {}
}
5.2.6.2 for循环语句

 

 

// for (初始值; 循环条件; 变化量) {
//   重复执行的代码(循环体)
// }// 需求: 打印 1-10 →  从 1 开始, 循环到 10 结束
// for (let i: number = 1; i <= 10; i++) {
//   console.log('for循环', i)
// }// 1-10的和, 从1开始,循环到10
let sum = 0
for (let i: number = 1; i <= 10; i++) {console.log('for', i)sum = sum + i // sum += i
}
console.log('求和', sum)@Entry
@Component
struct Index {build() {}
}
5.2.6.3 退出循环 -break-continue

// 退出循环:
// 1. break: 终止整个循环 (后面的循环不执行了)
// 2. continue: 退出当前这一次循环, 继续执行下一次循环 (包子当前这个不吃了, 吃下一个)// 1. 一共8个包子, 吃到第5个, 饱了
// for (let i: number = 1; i <= 8; i++) {
//   if (i == 5) {
//     console.log('拿起了第5个包子, 发现吃不动了')
//     // 终止当前的循环 (本次循环后面的代码不执行了, 且后续循环的代码也不执行了, 跳出循环)
//     break
//   }
//   console.log('吃包子:', `第${i}个`)
// }
//
// console.log('这是循环外的代码')// 2. 一个8个包子, 吃到第5个, 坏了
for (let i: number = 1; i <= 8; i++) {if (i == 5) {console.log('拿起了第5个包子, 发现坏了')// 当前这次循环不继续执行了, 继续执行下一次循环continue}console.log('吃包子:', `第${i}个`)
}console.log('这是循环外的代码')@Entry
@Component
struct Index {build() {}
}

5.2.6.4 遍历数组
5.2.6.4.1 使用for遍历 数组
5.2.6.4.2 使用for...of 遍历数组 

 

 

// 遍历数组: 利用循环, 依次按顺序访问数组的每一项
let names: string[] = ['大强', '老莫', '小龙', '大黑', '小黄']// 数组的最后一项 names[names.length - 1]
// for (let i: number = 0; i < names.length; i++) {
//   console.log('名字是', names[i])
// }for (let item of names) {console.log('数组中的每一项', item)
}@Entry
@Component
struct Index {build() {}
}
5.2.6.4.3 案例

// 需求1: 求出下列数组元素的 累加和
// [22, 3, 44, 55, 80]
// let sum: number = 0
// let arr: number[] = [22, 3, 44, 55, 80]
//
// for (let item of arr) {
//   // console.log('每一项', item)
//   sum = sum + item
// }
// console.log('结果', sum)// 需求2:筛选 数组中 大于等于10 的 元素,收集到一个新数组中
// [22, 3, 44, 55, 80, 10, 11, 5, -1]
// let arr: number[] = [22, 3, 44, 55, 80, 10, 11, 5, -1]
// let newArr: number[] = []
//
// // 遍历arr, 符合条件, push到newArr里面去
// for (let item of arr) {
//   if (item >= 10) {
//     newArr.push(item)
//   }
// }
// console.log('新数组', newArr)// 需求3:数组去0,将数组中 不是0 的项收集到一个新数组中
// [22, 3, 0, 55, 0, 0, 11, 5, 0]
let arr: number[] = [22, 3, 0, 55, 0, 0, 11, 5, 0]
let newArr: number[] = []for (let num of arr) {if (num != 0) {newArr.push(num)}
}
console.log('新数组', newArr)@Entry
@Component
struct Index {build() {}
}

5.2.7 对象数组

// 对象数组 => 数组中包裹存储了很多的对象
// 1. 约定接口 (对象的类型)
interface Student {stuId: numbername: stringgender: stringage: number
}// 2. 基于接口, 构建对象数组
let stuArr: Student[] = [{ stuId: 1, name: '小丽', gender: '女', age: 12 },{ stuId: 2, name: '小红', gender: '女', age: 11 },{ stuId: 3, name: '大强', gender: '男', age: 12 },{ stuId: 4, name: '阿明', gender: '男', age: 13 },
]
// 包括对象的复杂数据,如果想要在日志中打印, 需要调用一个方法, 转成字符串格式
// JSON.stringify(复杂类型)  对象/数组
// console.log('学生数组', JSON.stringify(stuArr))// 3. 具体使用 (访问 →  通过下标)
// console.log('小红', stuArr[1].name)
// console.log('小红', JSON.stringify(stuArr[1]))// 4. 也支持遍历 for... of, 普通for
for (let item of stuArr) {console.log('每一项', JSON.stringify(item))
}@Entry
@Component
struct Index {build() {}
}

5.2.8 ForEach渲染控制

5.2.8.1 ForEach渲染控制


 

import window from '@ohos.window';
@Entry
@Componentstruct Index {@State titles:string[] = ['电子产品','精品服饰','母婴产品','影音娱乐','海外旅游']onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column() {ForEach(this.titles, (item: string, index: number) => {Text(`${index + 1} ${item}`).fontSize(24).fontWeight(700).fontColor(Color.Orange).padding(15).width('100%')})}}
}

5.2.8.2 FofEach案例 -新闻列表

import window from '@ohos.window';
import { it } from '@ohos/hypium';interface Article {title: stringcreateTime: string
}@Entry
@Componentstruct Index {@State articles: Article[] = [{title: '近200+自动驾驶数据集全面调研!一览如何数据闭环全流程',createTime: '2024-01-31 09:59:43'},{title: 'MySQL Shell 8.0.32 for GreatSQL编译二进制包',createTime: '2024-01-31 09:55:53'},{title: '在Redis中如何实现分布式事务的一致性?',createTime: '2024-01-31 09:54:51'},]onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Scroll() {Column() {// 单个新闻结构Column() {ForEach( this.articles, (item: Article, Index: number) =>{Text(item.title).width('100%').fontSize(15).fontColor('#303030').lineHeight(20)Text(item.createTime).margin({top: 15}).width('100%').fontSize(12).fontColor('rgb(192, 192, 192)')})}.padding({top: 15, bottom: 15}).width('100%').border({width: {bottom: 2},color: {bottom: '#f4f4f4'}})}.constraintSize({minHeight: '100%'})}.padding({ left: 13, right: 13 }).width('100%').height('100%')}
}

 六、渲染控制综合案例

6.1 生肖抽卡-初始布局-Badge角标组件

import window from '@ohos.window';
@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Badge({count: 1,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r('app.media.bg_01')).width(100)}}}
}

 

6.2 生肖抽卡 - 初始布局-Grid布局

@Entry
@Component
struct Index {build() {// Grid布局的基本使用: 规则的行列布局中非常常见, 3行4列Grid() {ForEach([1,2,3,4,5,6,7,8,9,10,11,12], () => {GridItem() {Column() {}.width('100%').height('100%').backgroundColor(Color.Green).border({ width: 1 })}})}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr').columnsGap(5).rowsGap(5).width('100%').height(500).backgroundColor(Color.Pink)}
}

import window from '@ohos.window';
@Entry
@Componentstruct Index {onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Grid(){ForEach([1,2,3,,4,5,6], ()=>{GridItem(){Badge({count: 1,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r('app.media.bg_01')).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50})}}
}

6.3 生肖抽卡 - 数据动态渲染

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}
@Entry
@Componentstruct Index {// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 1 },{ url: 'app.media.bg_02', count: 2 },{ url: 'app.media.bg_03', count: 3 },{ url: 'app.media.bg_04', count: 4 },{ url: 'app.media.bg_05', count: 5 }]onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Column(){Grid(){ForEach(this.images, (item: ImageCount,Index)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50})}}
}

6.4 生肖抽卡 - 遮罩和显隐动画

6.4.1 抽卡遮罩层

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}
@Entry
@Componentstruct Index {// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 1 },{ url: 'app.media.bg_02', count: 2 },{ url: 'app.media.bg_03', count: 3 },{ url: 'app.media.bg_04', count: 4 },{ url: 'app.media.bg_05', count: 5 }]onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50})}.width('100%').height('100%').backgroundColor(Color.Pink)// 抽卡遮罩层Column({space: 30}){Text('获得生肖卡').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r('app.media.img_00')).width(200)Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent) //透明背景色.border({width: 2,color: '#fff9e0'})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')}}
}

6.4.2 生肖抽卡 -显隐效果控制

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}@Entry
@Componentstruct Index {// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 1 },{ url: 'app.media.bg_02', count: 2 },{ url: 'app.media.bg_03', count: 3 },{ url: 'app.media.bg_04', count: 4 },{ url: 'app.media.bg_05', count: 5 }]//控制遮罩的显隐@State maskOpacity: number = 0// 层级显隐@State maskIndex: number = -1// 控制图片的缩放@State maskImgX: number = 0@State maskImgY: number = 0onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index: number)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50}).onClick( () => {this.maskOpacity = 1this.maskIndex = 999//   点击时,突破需要缩放this.maskImgX = 1this.maskImgY = 1})}.width('100%').height('100%')// .backgroundColor(Color.Pink)// 抽卡遮罩层Column({space: 30}){Text('获得生肖卡').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r('app.media.img_00')).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 = 0this.maskIndex = -1//   图形重置缩放比为0this.maskImgX = 0this.maskImgY = 0})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')//设置透明度.opacity(this.maskOpacity).zIndex(this.maskIndex)//   动画 animation.animation({duration: 200})}}
}

6.4.3 生肖抽卡 -随机卡片

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}@Entry
@Componentstruct Index {//  随机的生肖卡序号@State randomIndex: number = -1 // 还没有开始抽// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]//控制遮罩的显隐@State maskOpacity: number = 0// 层级显隐@State maskIndex: number = -1// 控制图片的缩放@State maskImgX: number = 0@State maskImgY: number = 0onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index: number)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50}).onClick( () => {this.maskOpacity = 1this.maskIndex = 999//   点击时,突破需要缩放this.maskImgX = 1this.maskImgY = 1//    计算随机数 Math.random() [0,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 = 0this.maskIndex = -1//   图形重置缩放比为0this.maskImgX = 0this.maskImgY = 0//   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象//   this.images[this.randomIndex].urlthis.images[this.randomIndex] ={url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')//设置透明度.opacity(this.maskOpacity).zIndex(this.maskIndex)//   动画 animation.animation({duration: 200})}}
}

6.4.4 生肖抽奖 - 抽大奖

6.4.4.1 抽大奖遮罩层

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}@Entry
@Componentstruct Index {//  随机的生肖卡序号@State randomIndex: number = -1 // 还没有开始抽// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]//控制遮罩的显隐@State maskOpacity: number = 0// 层级显隐@State maskIndex: number = -1// 控制图片的缩放@State maskImgX: number = 0@State maskImgY: number = 0onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index: number)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50}).onClick( () => {this.maskOpacity = 1this.maskIndex = 999//   点击时,突破需要缩放this.maskImgX = 1this.maskImgY = 1//    计算随机数 Math.random() [0,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 = 0this.maskIndex = -1//   图形重置缩放比为0this.maskImgX = 0this.maskImgY = 0//   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象//   this.images[this.randomIndex].urlthis.images[this.randomIndex] ={url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')//设置透明度.opacity(this.maskOpacity).zIndex(this.maskIndex)//   动画 animation.animation({duration: 200})//   抽大奖遮罩层Column({space: 30}){Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r('app.media.pg')).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width: 2,color: '#fff9e0'})}.width('100%').height('100%').backgroundColor('#cc000000').justifyContent(FlexAlign.Center)}}
}

 

6.4.4.2 抽大奖显隐控制

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}@Entry
@Componentstruct Index {//  随机的生肖卡序号@State randomIndex: number = -1 // 还没有开始抽// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]//控制遮罩的显隐@State maskOpacity: number = 0// 层级显隐@State maskIndex: number = -1// 控制图片的缩放@State maskImgX: number = 0@State maskImgY: number = 0// 控制中大奖遮罩层显隐@State isGet: boolean = falseonPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index: number)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50}).onClick( () => {this.maskOpacity = 1this.maskIndex = 999//   点击时,突破需要缩放this.maskImgX = 1this.maskImgY = 1//    计算随机数 Math.random() [0,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 = 0this.maskIndex = -1//   图形重置缩放比为0this.maskImgX = 0this.maskImgY = 0//   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象//   this.images[this.randomIndex].urlthis.images[this.randomIndex] ={url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}//   每次收完卡片,需要进行简单的检索,判断是否集齐了//   只要有一个是0 就是没有集齐let flag: boolean = true //假设集齐//   验证是否集齐for(let item of this.images) {if (item.count == 0) {flag = falsebreak}}this.isGet = flag})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')//设置透明度.opacity(this.maskOpacity).zIndex(this.maskIndex)//   动画 animation.animation({duration: 200})//   抽大奖遮罩层if(this.isGet){Column({space: 30}){Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r('app.media.pg')).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width: 2,color: '#fff9e0'})}.width('100%').height('100%').backgroundColor('#cc000000').justifyContent(FlexAlign.Center)}}}
}

6.4.5 生肖抽卡- 随机抽卡&再来一次

 

import window from '@ohos.window';
// 1. 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}@Entry
@Componentstruct Index {//  随机的生肖卡序号@State randomIndex: number = -1 // 还没有开始抽// 2. 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]//控制遮罩的显隐@State maskOpacity: number = 0// 层级显隐@State maskIndex: number = -1// 控制图片的缩放@State maskImgX: number = 0@State maskImgY: number = 0// 控制中大奖遮罩层显隐@State isGet: boolean = false// 奖池@State arr: string[] = ['pg', 'hw', 'xm']  //奖池@State prize: string = '' //默认没中奖onPageShow(): void {window.getLastWindow(AppStorage.get("context"), (err, data) => {if (err.code) {console.error('Failed to get last window. Cause:' + JSON.stringify(err));return;}data.setFullScreen(true)});}build() {Stack(){// 初始化的布局结果Column(){Grid(){ForEach(this.images, (item: ImageCount,Index: number)=>{GridItem(){Badge({count: item.count,position: BadgePosition.RightTop,style: {badgeSize: 20,fontSize: 14,badgeColor: '#fa2aad'}}){Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top: 100})Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({top: 50}).onClick( () => {this.maskOpacity = 1this.maskIndex = 999//   点击时,突破需要缩放this.maskImgX = 1this.maskImgY = 1//    计算随机数 Math.random() [0,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 = 0this.maskIndex = -1//   图形重置缩放比为0this.maskImgX = 0this.maskImgY = 0//   开心收下逻辑,对象数组的情况需要更新,需要修改替换整个对象//   this.images[this.randomIndex].urlthis.images[this.randomIndex] ={url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}//   每次收完卡片,需要进行简单的检索,判断是否集齐了//   只要有一个是0 就是没有集齐let flag: boolean = true //假设集齐//   验证是否集齐for(let item of this.images) {if (item.count == 0) {flag = falsebreak}}this.isGet = flag//   判断是否中奖了,如果是,就需要去抽奖if (flag){let randomIndex: number = Math.floor(Math.random() * 3)this.prize = this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值如果是八位,就是透明度.backgroundColor('#cc000000')//设置透明度.opacity(this.maskOpacity).zIndex(this.maskIndex)//   动画 animation.animation({duration: 200})//   抽大奖遮罩层if(this.isGet){Column({space: 30}){Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.prize}`)).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width: 2,color: '#fff9e0'}).onClick( () => {this.isGet = falsethis.prize = ''this.images = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]})}.width('100%').height('100%').backgroundColor('#cc000000').justifyContent(FlexAlign.Center)}}}
}


http://www.ppmy.cn/news/1525243.html

相关文章

五、TOGAF(架构内容框架)

TOGAF架构内容框架&#xff08;Architecture Content Framework&#xff09; TOGAF架构内容框架是TOGAF的一个重要组成部分&#xff0c;它提供了标准化的方法来描述企业架构。架构内容框架帮助架构师创建、管理和使用架构工件&#xff08;Artifacts&#xff09;&#xff0c;这些…

C++之打造my vector篇

目录 前言 1.参照官版&#xff0c;打造vector的基本框架 2.丰富框架&#xff0c;实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸&#xff0c;深度理解代码 迭代器…

1.单例模式

目录 简介 饿汉式 懒汉式 双重检测锁式 静态内部类式 枚举单例 测试 测试单例模式&#xff1a; 测试五种单例模式在多线程环境下的效率 问题&#xff08;拓展&#xff09; 例&#xff1a;反射破解单例模式 例&#xff1a;反序列化破解单例模式 总结&#xff1a;如何…

【PyCharm】常用快捷键

此篇文章内容会不定期更新&#xff0c;仅作为学习过程中的笔记记录 PyCharm的所有快捷键&#xff0c;其实均可以自定义&#xff0c;在位于Settings -> Keymap的目录下&#xff08;如图&#xff09;&#xff0c;可以自行改写为自己熟悉的键位组合。 若更改为PyCharm已存在的键…

GESP等级考试 C++二级-if语句

if语句是C中的选择语句&#xff0c;通过if语句程序可以在一种可能、二种可能或者多种可能中做出选择&#xff0c;对于不同的可能进行不同的处理。 1 一种可能 使用if语句对一种可能进行处理的格式如下所示&#xff1a; if (表达式) {语句; } 其中&#xff0c;if后面跟一个圆…

虹科方案 | 精准零部件测试!多路汽车开关按键功能检测系统

欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #LIN/CAN总线 #零部件测试 #CAN数据 导读 在汽车制造业中&#xff0c;零部件的安全性、功能性和可靠性是确保车辆整体性能的关键。虹科针对车辆零部件的LIN/CAN总线仿真测试&#xff0c;提出了基于虹科Baby-LIN系列产…

基于单片机的人脸识别的智能门禁系统设计

文章目录 前言资料获取设计介绍功能介绍设计清单核心代码具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等…

【Redis入门到精通一】什么是Redis?

目录 Redis 1. Redis的背景知识 2.Redis特性 3.Redis的使用场景 4.Ubuntu上安装配置Redis Redis Redis在当今编程技术中的地位可以说非常重要&#xff0c;大多数互联网公司内部都在使用这个技术&#xff0c;熟练使用Redis已经成为开发人员的一个必备技能。本章将带领读者…

oracle select字段有子查询会每次执行子查询吗

Oracle在执行SELECT语句时&#xff0c;如果子查询被嵌套在主查询中&#xff0c;子查询会被执行多次&#xff0c;这是因为子查询的结果不会被缓存。每次主查询需要用到子查询的结果时&#xff0c;子查询都会被重新执行。这种行为可能会导致性能问题&#xff0c;特别是当子查询结…

计算机网络:概述 - 计算机网络概述

目录 一. 互联网概述 1.1 网络 1.2 互联网 1.3 因特网 二. 互联网发展的三个阶段 三. 互联网的标准化工作 四. 互联网的组成 五. 计算机网络的类别 5.1 计算机网络的定义 5.2 计算机网络的不同类别 一. 互联网概述 起源于美国的互联网现如今已…

golang学习笔记13——golang的错误处理深度剖析

推荐学习文档 golang应用级os框架&#xff0c;欢迎star基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学…

简单了解 JVM

目录 ♫什么是JVM ♫JVM的运行流程 ♫JVM运行时数据区 ♪虚拟机栈 ♪本地方法栈 ♪堆 ♪程序计数器 ♪方法区/元数据区 ♫类加载的过程 ♫双亲委派模型 ♫垃圾回收机制 ♫什么是JVM JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java虚拟机。 虚拟机是指通过软件模…

新手制作视频用什么软件好?五款剪辑工具分享!

在数字时代&#xff0c;视频制作已成为许多人表达创意、记录生活的重要方式。但对于新手而言&#xff0c;面对琳琅满目的视频编辑软件&#xff0c;往往会感到无所适从。今天&#xff0c;我们就来推荐五款适合新手的视频制作软件&#xff0c;它们分别适用于不同的操作系统平台&a…

探索 Linux:开源操作系统的璀璨世界

摘要&#xff1a;本文围绕 Linux 展开深入探讨。从历史来看&#xff0c;20 世纪 90 年代初 Linus Torvalds 发布 Linux 内核源代码开启新纪元&#xff0c;开源模式使内核不断成长。Linux 的核心概念包含内核、文件系统、进程和线程等&#xff0c;其中内核管理硬件资源与提供系统…

Win10安装.net FrameWork3.5失败解决方法

win10安装.net FrameWork3.5失败解决方法 已经好久没有来投稿了,实在最近业务缠身,忙的焦头烂额(呵~多么伟大的牛马) 但最近开发使用windows11实在是拉胯的不行,升级完就后悔,所以就一怒之下,重装了win10 可是,好家伙,我重装完遇到一个问题,就是在使用.Net Framework3.5,按照Mi…

物理学基础精解【5】

文章目录 质点的速度一、平均速度二、瞬时速度三、速度质点的速度计算一、平均速度的计算二、瞬时速度的计算三、速度矢量的标量分量性质、定义、计算、例子和例题性质定义计算例子例题 质点的瞬时速度的方向的计算、性质、例子和例题计算性质例子例题 质点的速度 本题主要考察…

可对画面进行平台传输,实时查看监控的智慧交通开源了

智慧交通视觉监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。用户只需在界面上…

C语言字符函数与字符串函数

目录 1. 字符函数 1.1 字符分类函数 1.2 字符转换函数 2. 字符串函数 2.1 strlen 函数 2.2 strcpy 函数 2.3 strcat 函数 2.4 strcmp 函数 2.5 strncpy 函数 2.6 strncat 函数 2.7 strncmp 函数 2.8 strstr 函数 结语 1. 字符函数 在C语言标准库中提供了一系列用于…

RocketMQ 消费方式

在消息传递系统中&#xff0c;“推&#xff08;Push&#xff09;”和“拉&#xff08;Pull&#xff09;”是两种不同的消息消费方式&#xff0c;RocketMQ 也支持这两种模式。下面是对这两种模式的详细解释&#xff1a; 1. 推模式&#xff08;Push Model&#xff09; 模式简介…

【机器学习(五)】分类和回归任务-AdaBoost算法-Sentosa_DSML社区版

文章目录 一、算法概念一、算法原理&#xff08;一&#xff09;分类算法基本思路1、训练集和权重初始化2、弱分类器的加权误差3、弱分类器的权重4、Adaboost 分类损失函数5、样本权重更新6、AdaBoost 的强分类器 &#xff08;二&#xff09;回归算法基本思路1、最大误差的计算2…