Codelabs 上有不少學(xué)習(xí)的案例，這次學(xué)習(xí)的是庫的調(diào)用（ArkTS）案例。學(xué)習(xí)筆記拆成兩部分，本文是關(guān)于社區(qū)庫調(diào)用的學(xué)習(xí)筆記，以下我的學(xué)習(xí)心得，小白們也可以跟著一步步實(shí)現(xiàn)吖。

本次學(xué)習(xí)的案例由主頁面、本地庫組件頁面、社區(qū)庫組件頁面三個(gè)頁面組成，主頁面由 Navigation 作為根組件實(shí)現(xiàn)全局標(biāo)題，由 Tabs 組件實(shí)現(xiàn)本地庫和社區(qū)庫頁面的切換。

效果如下：

軟件要求：

DevEco Studio 版本：DevEco Studio 3.1 Beta1 及以上版本

HarmonyOS SDK 版本：API version 9 及以上版本

概念知識(shí)

Tabs：一種可以通過頁簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁簽對(duì)應(yīng)一個(gè)內(nèi)容視圖。

Canvas：畫布組件，用于自定義繪制圖形。

以上這兩個(gè)組件在以往的文章也有提及過啦，于此著重學(xué)習(xí)兩個(gè)新的知識(shí)點(diǎn)：

Navigation：一般作為 Page 頁面的根容器，通過屬性設(shè)置來展示頁面的標(biāo)題、工具欄、菜單。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-basic-components-navigation-0000001333800549?ha_linker=eyJ0cyI6MTY3ODM2NzAyODQ1OSwiaWQiOiI4ZDBkZTMzZjU1MzY0NDRlYjZkYTQ5MjM1MzcwMjEzZiJ9

HarmonyOS npm 包：在傳統(tǒng)的 npm 三方包的基礎(chǔ)上，定義了 HarmonyOS npm 共享包特定的工程結(jié)構(gòu)和配置文件，支持 HarmonyOS 頁面組件、相關(guān) API、資源的調(diào)用。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/creating_har_api8-0000001341502357?ha_linker=eyJ0cyI6MTY3ODM2NzA4OTk3NSwiaWQiOiI4ZDBkZTMzZjU1MzY0NDRlYjZkYTQ5MjM1MzcwMjEzZiJ9

創(chuàng)建項(xiàng)目

如下圖：

社區(qū)庫調(diào)用

①設(shè)置依賴

社區(qū)庫是指已經(jīng)由貢獻(xiàn)者上架到 npm 中心供其他開發(fā)者下載使用的庫，調(diào)用這類庫的步驟如下：

首先需要設(shè)置 HarmonyOS npm 三方包的倉庫信息，在DevEco Studio 的 Terminal 窗口執(zhí)行如下命令進(jìn)行設(shè)置：

npmconfigset@ohos:registry=https://repo.harmonyos.com/npm/

然后通過如下兩種方式設(shè)置 HarmonyOS npm 三方包依賴信息（下面步驟以 @ohos/lottieETS 三方庫為例，其他庫替換對(duì)應(yīng)庫的名字及版本號(hào)即可）：

方式一：在 Terminal 窗口中，執(zhí)行如下命令安裝 HarmonyOS npm 三方包，DevEco Studio 會(huì)自動(dòng)在工程的 package.json 中自動(dòng)添加三方包依賴。

npminstall@ohos/lottieETS--save

方式二：在工程的 package.json 中設(shè)置 HarmonyOS npm 三方包依賴，配置示例如下：

"dependencies":{

"@ohos/lottieETS":"^1.0.2"

}

依賴設(shè)置完成后，需要執(zhí)行 npm install 命令安裝依賴包，依賴包會(huì)存儲(chǔ)在工程的 node_modules 目錄下。

②引入配置的社區(qū)庫，并實(shí)現(xiàn)對(duì)社區(qū)庫動(dòng)畫的調(diào)用

首先在如圖路徑，創(chuàng)建動(dòng)畫的數(shù)據(jù)文件 data.json： 接著在 pages 目錄下創(chuàng)建文件 Outer.ets 用于引用社區(qū)庫動(dòng)畫，主要代碼如下。

通過 import 的方式引入配置的社區(qū)庫，設(shè)置畫布，用于展示動(dòng)畫：

importlottiefrom'@ohos/lottieETS';

@Component
exportstructOuter{
privaterenderingSettings:RenderingContextSettings=newRenderingContextSettings(true);
privaterenderingContext:CanvasRenderingContext2D=newCanvasRenderingContext2D(this.renderingSettings);
privateanimateName:string='data';
privateanimateItem:any=null;
@StatecanvasTitle:string='';

aboutToDisappear():void{
lottie.destroy();
}

onPageShow():void{
lottie.play();
}

onPageHide():void{
lottie.pause();
}

下圖為該社區(qū)庫的一些 api 接口說明截圖，在 node_modules 下的 index.d.ts 文件里。

調(diào)用的主要代碼：

Column(){
Canvas(this.renderingContext)
.width('100%')
.aspectRatio(1.76)
.backgroundImage($r('app.media.canvasBg'))
.backgroundImageSize(ImageSize.Cover)
.onDisAppear(()=>{
lottie.destroy(this.animateName);
})

Column({space:12}){
Button(){
Text('加載動(dòng)畫')
.fontSize('16fp')
.fontColor("#007DFF")
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('40vp')
.backgroundColor("#dedbdb")
.onClick(()=>{
this.canvasTitle="加載動(dòng)畫";
this.animateItem=lottie.loadAnimation({
container:this.renderingContext,
renderer:'canvas',
loop:10,
autoplay:true,
name:this.animateName,
path:'common/lottie/data.json'
});
})

最后在主頁面通過 navigation 組件，引用 Outer 組件，代碼如下：

import{Outer}from'./Outer';
@Entry
@Component
structIndex{
privatecontroller:TabsController=newTabsController();
@StatecurrentIndex:number=0;

@BuilderNavigationTitle(){
Column(){
Text("庫的調(diào)用")
.fontColor(Color.Black)
.lineHeight("33vp")
.fontSize('24fp')
.fontWeight(FontWeight.Bold)
}
.height('56vp')
.justifyContent(FlexAlign.Center)
}

@BuilderTabBuilder(index:number){
Column(){
Column(){
Text(index===0?"本地調(diào)用":"社區(qū)調(diào)用")
.fontColor(this.currentIndex===index?"#007dff":"#182431")
.fontSize('16fp')
}
.height('100%')
.justifyContent(FlexAlign.Center)
.border(this.currentIndex===index
?{width:{bottom:'1vp'},color:"#007DFF"}
:{}
)
}
.height('56vp')
.padding({top:'10vp',bottom:'10vp'})
.justifyContent(FlexAlign.Center)
}

build(){
Column(){
Navigation(){
Tabs({barPosition:BarPosition.Start,controller:this.controller}){
TabContent(){
//Inner()
}.tabBar(this.TabBuilder(0))

TabContent(){
Outer()
}.tabBar(this.TabBuilder(1))
}
.barWidth('80%')
.barHeight('56vp')
.onChange((index:number)=>{
this.currentIndex=index;
})
}
.title(this.NavigationTitle)
.hideBackButton(true)
.titleMode(NavigationTitleMode.Mini)
}
.backgroundColor("#F1F3F5")
}
}