??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??
項目介紹
項目內容： 自定義基礎組件和容器組件、依賴庫概念、本地依賴庫的創建和引用、三方庫的引用。
工具版本： DevEco Studio 3.1 Canary1。
SDK版本： 3.2.1.4（API Version 9 Canary1）（Stage模型）。
本項目基于??HarmonyOS??的ArkUI框架TS擴展的聲明式開發范式，關于語法和概念直接看官網官方文檔地址：??基于TS擴展的聲明式開發范式??，
效果演示
依賴庫
實際項目中，我們會把 公共代碼 或 獨立功能（UI、算法…） 抽離出來封裝成依賴庫，提供調用方法，調用者只需將依賴庫導入到項目中，使用簡單的代碼調用來完成開發，提高了開發效率。一般的依賴庫特點：調用簡單、擴展性高。
本地庫
本地庫主要是指未上架到npm中心，只是本地依賴使用的庫。
1、本地庫的創建
a.鼠標移到工程目錄頂部，鼠標右擊，選擇New>Module。
b.在Choose Your Ability Template界面中，選擇Ohos Library，點擊下一步。
c.在Configure the New Module界面中，配置模塊信息，點擊完成。
- Module name：新增模塊的名稱。
- Language：選擇開發HarmonyOS npm包的語言。
- Device type：選擇HarmonyOS npm包支持的設備類型。
- Enable Native：是否創建一個用于調用C++代碼的HarmonyOS npm共享模塊。
2、本地庫的依賴
在Terminal窗口中，進入模塊目錄中，執行如下命令進行安裝，并會在package.json中自動添加依賴。
npm install （本地模塊的路徑）
3、本地庫的調用
在依賴庫的根目錄中，index.ets文件提供了對外的導出。
在entry中index.ets頁面中，引入依賴庫。
// 導入本地依賴庫
import { MainPage } from '@ohos/library'
@Entry
@Component
struct Index {
build() {
Column() {
// 使用自定義組件
MainPage()
}.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
}
}
自定義組件
可復用的 UI 單元，可組合其它組件，被 @Component 裝飾的結構體。
本項目依賴庫中自定義組件：公共標題欄、側滑菜單容器。
1、標題欄組件
標題自定義，左右都可以定義圖標和點擊事件。且左邊圖標有默認事件：頁面返回。
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)
}
}
標題欄組件的使用：
import { TitleBar } from '@ohos/library'
@Entry
@Component
struct Index {
build() {
Column() {
TitleBar({ title: '主頁', leftIcon: $r('app.media.menu'),
leftClickEvent: () => {
// 左圖標點擊事件
}
})
}.width('100%').height('100%')
}
}2、側滑菜單容器
左右滑動可以控制菜單，菜單打開時，背景透明度改變，使用動畫效果打開或關閉菜單。
/**
* 滑動菜單
*/
@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)
}
}
側滑菜單的使用 （部分代碼）
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%')
}
}三方庫
其他公司開源的庫或者個人開源的庫，上架到npm中心供其他開發者下載使用的庫。
本項目中使用的是三方庫是：lottieETS 一個適用于OpenHarmony的動畫庫。
依賴方式和本地庫一樣，使用命令安裝：
npm install @ohos/lottieETS --save
以下示例只是簡單用法，其他方法的使用請查看官方的文檔：??lottieETS 使用說明??。
// 導入三方庫
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%')
}
}
結尾
此項目中本地庫和三方庫的依賴都比較簡單，難點是自定義組件的使用，還是需要多看官方的文檔。最后希望鴻蒙社區越來越多的人加入，創作出更多優秀三方庫。
項目地址：https://gitee.com/liangdidi/CallLibraryDemo。
每天進步一點點、需要付出努力億點點。
??想了解更多關于開源的內容，請訪問：??
??51CTO 開源基礎軟件社區??
??https://ost.51cto.com??。
