鸿蒙 HarmonyOS NEXT

安装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有多个页面