序言：
本文详细介绍了字符串拼接、各类运算符、状态管理（界面数据动态展示）并给出相应的具体案例和实现代码。
笔者也是跟着B站黑马的课程一步步学习，学习的过程中添加部分自己的想法整理为笔记分享出来，如有代码错误或笔误，欢迎指正。
B站黑马的课程链接：鸿蒙课程介绍_哔哩哔哩_bilibili
往期笔记：
【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础
【02】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-界面进阶与布局排布（附QQ登陆、得物、京东登陆综合案例+代码）
【03】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-更多布局（弹性/层叠）方式与界面开发综合（附飞狗卡片+B站卡片案例+实战开发支付宝界面+代码）
目录
一.字符串拼接
作用：把两个或多个字符串，拼接成一个字符串（通常拼字符串和变量）
代码例子：
//字符串拼接
let name:string = '河马'
let age:number = 18
console.log('简介信息','姓名'+name)
console.log('简介信息','年龄'+age)
//tip：+两边只要有字符串，'+'都是拼串的作用（如果两边都是数字，则为计算的作用）控制台日志：
二.类型转换
1.字符串转数字
Number()
//字符串直接转数字，转换失败返回NaN（字符串中包含非数字）
parseInt()
//去掉小数部分 转数字，转换失败返回NaN
parseFloat()
//保留小数部分 转数字，转换失败返回NaN2.数字转字符串
toString()
//数字直接转字符串
toFixed()
//四舍五入转字符串，可以设置保留几位小数代码例子：
let money1:string = '12000'
let money2:number = 5000
console.log('总工资',Number(money1)+money2)
//字符串通常用于展示
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column(){
Text(money2.toString())
}
}
}
三.交互-点击事件
说明：组件 被点击时 触发的事件
作用：监听（感知）用户 点击行为，进行对应操作
语法：
onClick((参数)=>{})代码案例：
build() {
Column(){
Button('点点我')
.onClick(()=>{
console.log('敢点击我，你比泰森还牛逼')
})
.width('100%')
}
}控制台日志：
代码案例2（+弹框）
build() {
Column(){
Button('点点我')
.onClick(()=>{
AlertDialog.show({
message:'敢点我，你比泰森还牛逼！'
})
})
.width('100%')
}
}
代码案例3：
Text('我是文本组件')
.width('100%')
.backgroundColor(Color.Pink)
.onClick(()=>{
AlertDialog.show({
message:'其实我是一个神秘的杀手'
})
})
四.状态管理
之前构建的页面多为静态界面。
但如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念
点击交互 触发了 文本状态变更，状态变更引起了UI渲染
普通变量：只能在初始化时渲染，后续不会再刷新
状态变量：需要装饰器装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）
组建内的状态变量需要用this.xxx来引入
build() {
Column(){
Text(this.msg2)
.fontSize(50)
.width('100%')
.margin({bottom:30})
Button('点击修改文字')
.onClick(()=>{
this.msg2='我是超绝无敌派大星'
})
}
.margin(50)
}
→
计数器案例
Row(){
Button('-')
.onClick(()=>{
this.num--
})
Text(this.num.toString())
.margin(10)
Button('+')
.onClick(()=>{
this.num++
})
}
五.运算符
1.算术运算符&赋值运算符
| 算数运算符 | 作用 | 赋值运算符 | 作用 |
| + | 加法运算 | += | 加法赋值 |
| - | 减法运算 | -= | 减法赋值 |
| * | 乘法运算 | *= | 乘法赋值 |
| / | 除法运算 | /= | 除法赋值 |
| % | 取余（求模） | %= | 取余赋值 |
例：num+=1 相当于num=num+1
2.案例-点赞案例
build() {
Column(){
//图片
Image($r('app.media.eyes'))
.width('100%')
.borderRadius({topLeft:10,topRight:10})
//文字
Text('考眼力又来了你能看见几只鸭子？')
.fontSize(30)
.padding(5)
Row() {
Image($r('app.media.avatar'))
.width(50)
.padding(5)
Text('视野联行眼镜')
.fontSize(20)
.margin(10)
.fontColor('#ccc')
Blank()
Row() {
Image($r('app.media.ic_love'))
.width(14)
.fillColor(this.mycolor)
Text(this.num.toString())
.padding(5)
.fontSize(12)
.fontColor(this.mycolor)
.onClick(() => {
this.num++
})
}
.onClick(()=>{
this.num=this.num+1
this.mycolor='#ff0000'
})
}
.width('100%')
}
.width('100%')
}
→点击小爱心或文字
3.一元运算符
常见一元运算符：++和--
前置写法：先赋值后自增/自减
let num1:number = 10
let num2:number = ++num1 //num2=11后置写法：后赋值后自增/自减
let num1:number = 10
let num2:number = num1-- //num2=94.比较运算符
作用：用来判断比较两个数据大小，返回一个布尔值（true/false）
类型：<、>、 >=、<=、==、!=
例子：
5.逻辑运算符
作用：扩充判断条件
| 逻辑运算符 | 作用 |
| && | 与，都真才真 |
| || | 或，一真就真 |
| ！ | 非，取反 |
代码示例：
6.运算符优先级
六.综合案例-美团购物车
1.需求分析：
①商品区域：数字框 + -
②底部结算：联动计算并渲染展示（已选件数 总价格 优惠价格）
2.核心思路：
①提取状态：数量、原价、现价
②界面绑定
③点击修改数据，自动更新
代码：
struct Index {
// 核心思路:
// 1. 提取状态: 数量, 原价, 现价
// 2. 结合状态渲染
// 3. 修改状态, 界面自动更新
@State count: number = 5
@State oldPrice: number = 40.4
@State newPrice: number = 10.4
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.toFixed(2))
.fontSize(18)
}
.fontColor('#ff4000')
Text() {
Span('￥')
Span(this.oldPrice.toFixed(2))
}
.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 = this.count - 1
// 让状态变量,在原有数据的基础上自减1
this.count--
})
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++
})
}
}
.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} 件，`)
.fontColor('#848484')
Span('合计:')
Span('￥')
.fontColor('#fd4104')
Span((this.count * this.newPrice).toFixed(2))
.fontColor('#fd4104')
.fontSize(16)
}
.fontSize(14)
Text('共减￥' + (this.count * (this.oldPrice - this.newPrice)).toFixed(2))
.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')
}
}
感谢观看。
扫一扫
1083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
