HarmonyOS ArkTS 本地库和三方库的用法

npm install ../library
1.

// 导入本地依赖库
import { MainPage } from '@ohos/library'

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 使用自定义组件
      MainPage()
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

import router from '@ohos.router';
/**
 * 自定义标题栏
 */
@Component
export struct TitleBar {
  // 左边图标是否显示
  private isShowLeft = true
  // 左边图标
  private leftIcon = $r('app.media.back')
  // 左边点击事件，默认返回上一页
  private leftClickEvent = () => {
    router.back()
  }
  // 标题
  private title = '标题'
  // 右边图标是否显示
  private isShowRight = false
  // 右边图标
  private rightIcon = $r('app.media.icon')
  // 左边点击事件
  private rightClickEvent: () => void

  build() {
    Column() {
      Stack() {
        Text(this.title).fontSize(20).fontColor('#ff1a1a1a')
        Row() {
          if (this.isShowLeft) {
            Image(this.leftIcon).size({ width: 55, height: 55 }).padding(15)
              .onClick(() => this.leftClickEvent())
          }
          Blank()
          if (this.isShowRight) {
            Image(this.rightIcon).size({ width: 55, height: 55 }).padding(15)
              .onClick(this.rightClickEvent)
          }
        }.width('100%')
      }.width('100%').height(0).layoutWeight(1)

      Divider().color('#ffbababa')
    }.width('100%').height(55)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

import { TitleBar } from '@ohos/library'
@Entry
@Component
struct Index {
  build() {
    Column() {
      TitleBar({ title: '主页', leftIcon: $r('app.media.menu'),
        leftClickEvent: () => {
          // 左图标点击事件
        }
      })
    }.width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

/**
 * 滑动菜单
 */
@Component
export struct SlideMenuContainer {
  // 菜单的宽度
  @State menuWidth: number = 0
  // 菜单x轴偏移量
  @State menuOffsetX: number = 0
  // 菜单偏移最小量
  private offsetXMin = 0
  // 菜单偏移最大量
  private offsetXMax = 0
  // 第一次按下的x坐标
  private firstDownX = -1
  // 上次按下的x坐标
  private lastDownX = -1
  // 背景透明度
  @State bgOpacity: number = 0
  // 滑动方向
  private slideDirection: 'left' | 'right'
  // 菜单布局
  @BuilderParam menu: any
  // 内容布局
  @BuilderParam content: any
  // 定时器ID
  private intervalID = 0
  // 是否打开菜单
  @Link @Watch('isOpenChanger') isOpen: boolean
  isOpenChanger() {
    if (this.isOpen) {
      this.openMenu()
    }
  }
  build() {
    Stack({ alignContent: Alignment.Start }) {
      // 内容布局
      Column() {
        this.content()
      }.width('100%').height('100%')

      if (this.bgOpacity) {
        // 透明背景
        Column() {
        }.width('100%').height('100%')
        .backgroundColor(Color.Black).opacity(this.bgOpacity)
      }
      // 菜单布局
      Column() {
        this.menu()
      }.width(this.menuWidth).height('100%')
      .backgroundColor(Color.White)
      .offset({ x: this.menuOffsetX })
    }.width('100%').height('100%')
    .onTouch((event) => this.onTouchEvent(event))
    .onAreaChange((oldValue: Area, newValue: Area) => {
      // 监听回调中获取容器的宽度
      const width = Number.parseInt(newValue.width.toString())
      this.menuWidth = width * 0.7
      this.menuOffsetX = -this.menuWidth
      this.offsetXMin = -this.menuWidth
      this.offsetXMax = 0
    })
  }
  /**
   * 触摸事件
   */
  onTouchEvent(event: TouchEvent) {
    const x = event.touches[0].x
    switch (event.type) {
      case TouchType.Down: // 手指按下
        {
          this.firstDownX = x
          this.lastDownX = x
          clearInterval(this.intervalID)
        }
        break;
      case TouchType.Move: // 手指移动
        {
          // 计算这次x坐标点与上次x坐标点的差
          const diff = x - this.lastDownX
          this.lastDownX = x
          // 累计算出滑动的距离
          this.menuOffsetX += diff
          // 确定方向
          this.slideDirection = diff > 0 ? 'right' : 'left'
          // 限定距离范围
          if (this.menuOffsetX >= this.offsetXMax) this.menuOffsetX = this.offsetXMax
          if (this.menuOffsetX <= this.offsetXMin) this.menuOffsetX = this.offsetXMin
          // 更改背景透明度
          this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
        }
        break;
      case TouchType.Up: // 手指抬起
        {
          if (Math.abs(x - this.firstDownX) < 5) {
            return
          }
          if (this.slideDirection === 'left') {
            // 是否小于宽度的3/2
            const isClose = Math.abs(this.menuWidth + this.menuOffsetX) < this.menuWidth * 2 / 3
              isClose ? this.closeMenu() : this.openMenu()
          } else {
            // 是否大于宽度的3/1
            const isOpen = Math.abs(this.menuWidth + this.menuOffsetX) > this.menuWidth / 3
              isOpen ? this.openMenu() : this.closeMenu()
          }
        }
        break;
      default:
        break;
    }
  }
  /**
   * 定时器改变偏移量
   * @param type 偏移量 加或减
   */
  intervalChangeOffset(type: 1 | -1) {
    this.intervalID = setInterval(() => {
      this.menuOffsetX += type * 15
      if (this.menuOffsetX >= this.offsetXMax) {
        this.menuOffsetX = this.offsetXMax
        clearInterval(this.intervalID)
      }
      if (this.menuOffsetX <= this.offsetXMin) {
        this.menuOffsetX = this.offsetXMin
        clearInterval(this.intervalID)
        this.isOpen = false
      }
      this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
    }, 5)
  }
  /**
   * 打开菜单
   */
  openMenu() {
    this.intervalChangeOffset(1)
  }
  /**
   * 关闭菜单
   */
  closeMenu() {
    this.intervalChangeOffset(-1)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.

import { SlideMenuContainer } from '@ohos/library'
@Entry
@Component
struct Index {
  @State isOpen: boolean = false
  ......
  /**
   * 内容布局
   */
  @Builder ContentLayout() {...}
  /**
   * 菜单布局
   */
  @Builder MenuLayout() {...}

  build() {
    Column() {
      SlideMenuContainer({
        isOpen: $isOpen,
        content: this.ContentLayout(),
        menu: this.MenuLayout()
      })
    }.width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

npm install @ohos/lottieETS --save
1.

// 导入三方库
import lottie from '@ohos/lottieETS'
@Entry
@Component
struct LottieDemo {
  private setting: RenderingContextSettings = new RenderingContextSettings(true)
  private crc: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)
  private lottiePath = 'common/lottie/car-loading2-data.json'
  private lottieName = 'carName'
  @State isPlay: boolean = false
  build() {
    Column() {
      Canvas(this.crc)
        .width(300)
        .height(300)
        .margin({ top: 30, bottom: 50 })
        .margin({ top: 30, bottom: 50 })
        .onReady(() => {
          lottie.loadAnimation({
            container: this.crc, // 需要绑定Canvas的CanvasRenderingContext2D
            renderer: "canvas", // 目前只支持canvas模式
            loop: true, // 是否循环播放
            autoplay: false, // 是否自动播放
            name: this.lottieName, // 设置lottie动画名称
            path: this.lottiePath // 指定lottie动画资源路径
          })
        })
        .onDisAppear(() => {
          // Canvas销毁时顺带销毁lottie动画
          lottie.destroy(this.lottieName)
        })
      Button(this.isPlay ? '暂停' : '播放')
        .width(150).height(30)
        .backgroundColor('#2D9FE5')
        .onClick(() => {
          this.isPlay = !this.isPlay
          this.isPlay ? lottie.play(this.lottieName) : lottie.pause(this.lottieName)
        })
    }.width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.