安装DevEco Studio
下载地址:https://developer.huawei.com/consumer/cn/
Project name:// 工程名
Bundle naem: // 包名
Save location: // 路径
其他默认
字符串拼接
作用:把两个或多个字符出,拼成一个字符串。(通常拼接得是字符串和变量)
let name:string = "张三"
let age :number = 18
console.log("个人信息:" + name + age) // 个人信息:张三18
// 注意点: + 两边只要有字符串,就是拼串的作用(如果两边都是数字,就是计算的作用)
let num :number = 100
let num2:number = 200
console.log("总数",num+num2) // 300
模板字符串
作用:拼接字符串和变量,( 更利于多个字符串拼接 )
优势:更适合于多个变量的字符串拼接
// 模板字符串Tab上面键 ` `
let name:string = "张三"
let age :number = 18
console.log("个人信息:", `姓名是${name},今年${age}岁`) // 个人信息:姓名是张三今年18岁
类型转换
1、字符串转数字
Number ( ):字符串 直接转数字,转换失败返回 NaN(字符串包含非数字)
parseInt ( ):去掉小数部分 转数字,转换失败返回 NaN
parseFloat ( ):保留小数部分 转数字,转换失败返回 NaN
// Number(变量)字符串直接转数字
let str:string = '1' console.log("数字是",Number (str)) // 1
let str2:string = '1.6' console.log("数字是",Number (str2)) // 1.6
let str3:string = '1.1a' console.log("数字是",Number (str3)) // NaN
// parseInt(变量)去掉小数部分转数字
let str:string = '1' console.log("数字是",parseInt (str)) // 1
let str2:string = '1.6' console.log("数字是",parseInt (str2)) // 1
let str3:string = '1.1a' console.log("数字是",parseInt (str3)) // 1
let str4:string = 'a' console.log("数字是",parseInt (str4)) // NaN
// parseFloat(变量)保留小数部分转数字
let str:string = '1' console.log("数字是",parseFloat (str)) // 1
let str2:string = '1.6' console.log("数字是",parseFloat (str2)) // 1.6
let str3:string = '1.1a' console.log("数字是",parseFloat (str3)) // 1.1
let str4:string = 'a' console.log("数字是",parseFloat (str4)) // NaN
2、数字转字符串
toString ( ):数字直接转字符串
toFixed ( ):四舍五入转字符串,可设置保留几位小数
// toString ( ):数字直接转字符串
let str:number = 1 console.log("字符串是",str.toString ()) // 1
let str2:number = 1.6 console.log("字符串是",str2。toString ()) // 1.6
// toFixed ( ):四舍五入转字符串,可设置保留几位小数 变量.toFixe(2)设置保留两位小数
let str:number = 1 console.log("字符串是",str.toFixed ()) // 1
let str2:number = 1.6 console.log("字符串是",str2.toFixed ()) // 2
let str3:number = 1.124 console.log("字符串是",str3.toFixe ()) // 1
let str4:number = 1.1294 console.log("字符串是",str4.toFixe (2)) // 1.13
点击事件
说明;组件被点击时触发的事件
作用:监听(感知)用户 点击行为,进行对应操作
语法:onClick((参数)= >{})
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
// 点击事件
build() {
Column(){
Button("点击").onClick((event: ClickEvent) => {
// console.log("打印点击")
// 弹框 AlertDialog.show
AlertDialog.show({
message:"您好,这是个弹框"
})
})
Text("我是文本").onClick(()=>{
AlertDialog.show({
message:"您好,这是文本弹框"
})
}).margin({
top:20
})
}.width("100%")
}}
状态管理
普通变量:只能在初始化时渲染,后续将不再刷新
状态变量:需要装饰器装饰,改变会引起UI的渲染刷新(必须设置类型和初始值)
注意:定义在组件内普通变量 或状态变量,都需要通过 this 访问
数组操作
增加:向前添加 unshift 向后添加 push
删除:删除第一个 shift 删除最后一个 pop
角标组件
Badge角标组件
Badge({
count:1, // 角标数值
position:BadgePosition.RightTop // 角标位置
style:{
fontSize:12, // 文字大小
badgeSize:16, // 圆形大小
badgeColor:"#fff"
}
}){
Image($('app.media.图片'))
}
Grid布局
Grid布局的基本使用:规则的行列布局中非常常见,几行几列
Column(){
Grid(){
// ForEach([1,2,3,4,5],()=>{
GridItem(){
Column(){
}
.width("100%")
.height("100%")
.backgroundColor(Color.Pink)
// }
})
}.columnsTemplate('1fr 1fr 1fr ') // 控制有多少列
.rowsTemplate('1fr 1fr') // 控制有多少行
.columnsGap(10) // 控制有多少列间隙
.rowsGap(10)// 控制有多少行间隙
}.width("100%")
.height(200)
.backgroundColor("#eee")
透明度----动画
透明度
.opacity()
// 动画
.animation({
duration: 400
})
轮播图
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column(){
Swiper(){
Text("1").backgroundColor(Color.Blue)
Text("2").backgroundColor(Color.Pink)
Text("3").backgroundColor(Color.Red)
}.width("100%")
.height(200)
.autoPlay(true) // 自动轮播
.interval(2000) // 轮播间隔
// .vertical(true)
.aspectRatio(1) // 等比例缩放宽÷高
.indicator(
Indicator.dot()
.itemWidth(20)
.itemHeight(20)
.color(Color.Gray)
.selectedItemWidth(25)
.selectedItemHeight(25)
.selectedColor("#fff")
)
}
}
}
@Extend - 扩展组件(样式,事件)
// 自定义组件样式和事件
@Extend(Text)
function textFn(){
.fontSize(20)
.fontWeight(700)
.onClick(()=>{
AlertDialog.show({
message:"007"
})
})
}
@Extend(Text)
function bannerText( bgColor: ResourceColor,bannerText:string) {
.backgroundColor(bgColor)
.onClick(()=>{
AlertDialog.show({
message:bannerText
})
})
}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column(){
Text("007").textFn()
Swiper(){
Text("1").bannerText(Color.Blue,"1")
Text("2").bannerText(Color.Pink,"2")
Text("3").bannerText(Color.Red,"3")
}.width("100%")
.height(200)
.autoPlay(true) // 自动轮播
.interval(2000) // 轮播间隔
// .vertical(true)
.aspectRatio(1) // 等比例缩放宽÷高
.indicator(
Indicator.dot()
.itemWidth(20)
.itemHeight(20)
.color(Color.Gray)
.selectedItemWidth(25)
.selectedItemHeight(25)
.selectedColor("#fff")
)
}
}
}
@Styles: 抽取通用属性、事件
// 1.在全局定义
@Styles function commonStyles() {
.width(100)
.height(100)
.onClick(()=>{ })
}
@Component
struct FancyDemo {
// 2. 在组件内定义
@Styles setBg() {
.backgroundColor(this.Color)
}
builder(){
Text()
.commonStyles()
.setBg()
}
}
@ Builder 自定义构建函数(结构、样式、事件)
// 全局 Builder
@Builder
function navItem(icon: ResourceStr, text: string) {
Column({ space: 10 }) {
Image(icon)
.width('80%');
Text(text);
}
.width('25%')
.onClick(() => {
AlertDialog.show({
message: '点了' + text
})
})
}
Row() {
navItem($r('app.media.ic_reuse_01'),'阿里拍卖')
navItem($r('app.media.ic_reuse_02'),'菜鸟')
}
// 局部 builder 类似,只是定义在组件内,this.xxx()
滚动容器Scroll
Scroll(){
// 只支持一个子组件
Column(){
// 内容放在内部
// 尺寸超过 Scroll 即可滚动
}
}
.width("100%")
.height(200)
.scrollable(ScrollDirction.Horizontal)
修饰符
readonly 只读的 (不可以修改)
private 私有的 (只可以内部访问)
protected 受保护的 (子类可以访问)
public 默认
@Preview 组件的样式预览
@Link 父子组件双向绑定
@Provide(父用)、@Consume(子孙用) 后代组件
@Entry
@Component
struct InfoBottom {
@Provide then:string = "xxx" // 基本类型和复杂类型都可以传递
build() {
Row(){
Text("我是底部")
}.width("100%")
.height(60)
.backgroundColor(Color.Blue)
}
}
@Component
struct InfoBottom {
@Consume then:string = "xxx" // 接受父组件传值
build() {
Row(){
Text("子组件")
}.width("100%")
.height(60)
.backgroundColor(Color.Blue)
}
}
Stage 模型—目录
1、 AppScope/app.js5:应用的全局配置信息。
2、 enty:HarmonyOS工程模块,编译构建生成一个HAP包。
2.1、src/main/ets: 用于存放ArkTS。
2.2、src/main/ets/entryability: 应用/服务的入口。
2.3、src/main/ets/pages: 应用/页面。
2.4、src/main/resources:用于存放应用/服务所用到的资源文件。
2.5、src/main/module.json5:模块应用配置文件。
2.6、build-profile.json5:当前的模块信息,编译信息配置项,包括buildOption、targets配置等。
2.7 hvigorfile.ts:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
2.8 obfuscation-rules.txt:混淆规则文件。
3、 oh_modules:用于存放三方库依赖信息。
4、 build-profile.json5:应用级配置信息,包括签名signingConfigs、产品配置products等。
5、 hvigorfile.ts:应用级编译构建任务脚本。
解析app.json5 和 module.json5
app.json5
{
"app": {
"bundleName": "包名",
"vendor": "应用开发厂商描述",
"versionCode": 版本号,数值越大版本越高,
"versionName": "给用户看的版本号",
"icon": "应用图标",
"label": "应用名"
}
}
修改应用管理里的-图标用户名版本号
"versionName": "给用户看的版本号",
"icon": "应用图标", 文件夹 AppScope/resources/base/media
"label": "应用名" 文件夹 AppScope/resources/base/element
module.json5
修改图标和应用名
图标:src/main/resources/base/media文件
应用名:src/main/resources/base/element文件
修改应用名建议点 Open editor
Stage模型 - UIAbility组件
一个应用有对个模块,每个模块有多个UIAbility,每个UIAbility有多个page,每一个page有多个页面