1.模版字符串``

let name:string = '模版字符串'
let age:number = 18
console.log('字符串:',`${name}和${age}`)

2.字符串和数字互相转换

//字符串转数字
let str1:string = '1.1'
console.log('转换',Number(str1))   //output:  1.1
console.log('转换',parseInt(str1)) //output:  1
console.log('转换',parseFloat(str1)) //output: 1.1

//数字转字符串
let num1:number = 1
console.log('转换',num1.toString())   //output:  1
console.log('转换',num1.toFixed(2)) //output:  1.00

3.变量

• 普通变量（不管组件内还是外）：只能在初始化时渲染，后续不在刷新
• 状态变量：需要装饰器@State修饰，改变会引起UI的渲染刷新

4.数组操作

• 增加：unshift（）从开头添加          push()从结尾添加
• 删除：shift()从开头删        pop()从结尾删   （都会返回删除的项）
• 任意位置删除或新增：splice（操作的起始位置，删除个数，新增的项1，新增的项2，...）
• 打印对象数组：JSON.stringify(stuArr)
• ForEach渲染控制：ForEach（this.titles,(item:string,index) = > {
• }）

5.Grid()  规则的行列布局

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,
            color: '#666',
            style: BorderStyle.Solid
          })
        }
      })
    }
    .backgroundColor(Color.Pink)
    .width('100%')
    .height(500)
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .columnsGap(5)
    .rowsGap(5)

6.badge() 角标

Badge({
            count:1,
            position:BadgePosition.RightTop,
            style:{
              fontSize:14,
              badgeSize:20,
              badgeColor:'#fa2a2d'
            }
          }){
            Column(){

            }
            .width('100%').height(200)
            .backgroundColor(Color.Green)
            .border({
              width: 1,
              color: '#666',
              style: BorderStyle.Solid
            })
          }

7.遮罩显隐控制：

• 透明度：opacity：0=>1
• 层级:zIndex:-1=>99

8.图片动画

• 缩放scale： 0=>1
• .animation({duration:500})

9.Swiper() 轮播

Swiper(){
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
        Image($r('app.media.ic_gallery_create'))
          .width(200)
          .fillColor(Color.Blue)
      }
      .width('100%').height(100)
      .loop(true)
      .autoPlay(true)
      .interval(4000)
      .vertical(false)
      .indicator(
        Indicator.dot()
          .itemWidth(20)
          .itemHeight(20)
          .color(Color.Black)
          .selectedColor(Color.Red)
          .selectedItemWidth(50)
          .selectedItemHeight(20)
      )

10.@Extend  扩展组件(样式和事件)

@Extend(组件名)

function  函数名(参数1，参数2) {}

11.@Styles 抽取通用属性、事件

全局：@Styles function setbg() {}  (不支持传参)

组件内: @Styles setbg() {}(不支持传参)

12.@Bulider 自定义构建函数（结构，样式，事件）

@Builder
function navItem(icon: ResourceStr,txt: string) {

}

13.Scroll

@Entry
@Component
struct Index {
  @State message: string = 'Hello World  哈哈哈hahahahah';
  myScroll:Scroller = new Scroller()
  build() {
    Column() {
      Scroll(this.myScroll){
        //只支持一个组件
        Column() {
          ForEach([1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3], (item: number, index: number) => {
            Text('kkkkkkk')
              .width('100%')
              .height(40)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor('#666')
              .backgroundColor(Color.Pink)
              .margin(5)
          })
        }
      }
      .width('100%')
      .height(500)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .scrollBarColor(Color.Red)
      .scrollBarWidth(5)
      .edgeEffect(EdgeEffect.Spring)
      .backgroundColor(Color.Yellow)
      .onDidScroll(()=> {
        const y = this.myScroll.currentOffset().yOffset
        console.log('滑动距离:', `y:${y}`);
      })
      Button('控制滚动条位置')
        .width(200).height(40)
        .margin(20)
        .onClick(() => {
          this.myScroll.scrollEdge(Edge.Top)
        })
    }
  }
}

14.Tabs  容器组件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World  哈哈哈hahahahah';
  @State selectedIndex:number = 0
  @Builder
  navItem(index:number, icon: ResourceStr, selectedIcon:ResourceStr, txt: string) {
    Column() {
      Image(index==this.selectedIndex?selectedIcon:icon)
        .width(30)
      Text(txt)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor(index==this.selectedIndex?Color.Red:Color.Black)
    }
  }

  build() {
    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('首页')
      }
      .tabBar(this.navItem(0,$r('app.media.app_icon'),$r('app.media.app_icon'),'首页'))

      TabContent(){
        Text('我的')
      }
      .tabBar(this.navItem(1,$r('app.media.startIcon'),$r('app.media.app_icon'),'我的'))
    }
    .vertical(false)
    .scrollable(true)
    .animationDuration(0)
    // .barMode(BarMode.Scrollable)  //滚动
    .onChange((index:number) => {
      this.selectedIndex = index
    })
  }
}