大家好！我是黑臂麒麟（起名原因：一個(gè)出生全右臂自帶紋身的高質(zhì)量程序員??），也是一位6+（約2個(gè)半坤年）的前端；
學(xué)習(xí)如像練武功一樣，理論和實(shí)踐要相結(jié)合，學(xué)一門只是也是一樣；
這里會(huì)用兩周的時(shí)間把所學(xué)的常用ArkUI基礎(chǔ)的常用組件輸出在網(wǎng)；
如需深究可前往高級(jí)ArkTS系列課程；
望對(duì)學(xué)習(xí)鴻蒙小伙伴有所幫助；
前言
剛刷完codelabs的引入第三方庫(kù)的案例，目前引入方式是使用根據(jù)npm改造的鴻蒙自己ohpm。目前只能使用OpenHarmony三方庫(kù)中心。三方庫(kù)中心的目前不多。還處于開(kāi)始階段，后續(xù)開(kāi)發(fā)后需要更多開(kāi)發(fā)者貢獻(xiàn)?，F(xiàn)在常用的三方庫(kù)可以分為UI、動(dòng)畫(huà)、網(wǎng)絡(luò)、圖片、多媒體、數(shù)據(jù)存儲(chǔ)、安全、工具等。
這里記錄兩種方式：
- 創(chuàng)建本地項(xiàng)目庫(kù)方法
- 使用第三方庫(kù)方法，這里我們使用
@ohos/lottie，@ohos/axios常用庫(kù)；
創(chuàng)建本地庫(kù)
本地庫(kù)主要是指未上架到ohpm中心且在項(xiàng)目組內(nèi)共享使用的庫(kù)文件，這類庫(kù)需要開(kāi)發(fā)者在項(xiàng)目中創(chuàng)建并開(kāi)發(fā)新的Library模塊，創(chuàng)建步驟如下：
-
鼠標(biāo)移到工程目錄頂部，單擊鼠標(biāo)右鍵，選擇New>Module。
-
在
Choose Your Ability Template界面中，選擇Static Library，并單擊Next。
-
在
Configure the New Module界面中，設(shè)置新添加的模塊信息，設(shè)置完成后，單擊Finish完成創(chuàng)建。- Module name：新增模塊的名稱。
- Language：選擇開(kāi)發(fā)HarmonyOS ohpm包的語(yǔ)言。
- Device type：選擇HarmonyOS ohpm包支持的設(shè)備類型。
- Enable Native：是否創(chuàng)建一個(gè)用于調(diào)用C++代碼的HarmonyOS ohpm共享模塊。
-
創(chuàng)建完成后，會(huì)在工程目錄中生成HarmonyOS ohpm共享模塊及相關(guān)文件。
引入本地庫(kù)
兩種方式：
- 方式一：在
Terminal窗口中，執(zhí)行如下命令進(jìn)行安裝，并會(huì)在oh-package.json5中自動(dòng)添加依賴。
ohpm install ../library
- 方式二：在工程的
oh-package.json5中設(shè)置HarmonyOS ohpm三方包依賴，配置示例如下：
"dependencies": {
"@ohos/library": "file:../library"
}
手動(dòng)編寫(xiě)依賴設(shè)置完成后，執(zhí)行ohpm install命令安裝依賴包，依賴包會(huì)存儲(chǔ)在工程的oh_modules目錄下，這個(gè)跟我們前端拉新項(xiàng)目下來(lái)安裝依賴包相似
下面是本地庫(kù)NewButton代碼：
import ButtonViewModel from '../../viewmodel/ButtonsViewModel';
@Component
export struct Buttons {
@Prop buttonText: string;
@Prop stateEffect: boolean;
@Prop buttonShape: string;
@Prop buttonType: string;
@Prop fontColor: string;
build() {
Row() {
Column() {
Button({
type: ButtonViewModel.fetchType(this.buttonShape),
stateEffect: this.stateEffect
}) {
Text(this.buttonText)
.fontSize('16vp')
.fontColor(this.fontColor || '#FFFFFF')
}
.width('100vp')
.height('35vp')
.backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
}
}
}
}
在完成上述步驟后，我們繼續(xù)完成
inner頁(yè)面的開(kāi)發(fā)，在inner頁(yè)面中我們通過(guò)import的方式引入開(kāi)發(fā)的本地庫(kù)，并通過(guò)循環(huán)傳入不同的參數(shù)展示不同的button。
import { Buttons } from '@ohos/library';
import InnerViewModel from '../viewmodel/InnerViewModel';
import { ButtonList } from '../viewModel/ButtonList';
@Component export struct Inner {
@State buttonList: ButtonList[] = InnerViewModel.getButtonListData();
scroller: Scroller = new Scroller();
build(){
Scroll(this.scroller) {
Column({ space: 12 }) {
ForEach(this.buttonList, (item: ButtonList) => {
Column() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Start
}){
...
Column() {
Buttons({
buttonText: item.buttonText,
buttonShape: item.buttonShape,
buttonType: item.buttonType,
stateEffect: item.stateEffect,
fontColor: item.fontColor
})
.alignSelf(ItemAlign.Center)
.margin({ bottom: '21vp' })
}
...
}
})
}
...
}
...
}
}
社區(qū)庫(kù)調(diào)用
社區(qū)庫(kù)是指已經(jīng)由貢獻(xiàn)者上架到ohpm中心供其他開(kāi)發(fā)者下載使用的庫(kù)，調(diào)用這類庫(kù)的方法如下：
通過(guò)如下兩種方式設(shè)置HarmonyOS ohpm三方包依賴信息,這里推薦第一種。前端也是常用第一種方式。（下面步驟以@ohos/lottie三方庫(kù)為例，其他庫(kù)替換對(duì)應(yīng)庫(kù)的名字及版本號(hào)即可）：
- 方式一：在Terminal窗口中，執(zhí)行如下命令安裝HarmonyOS ohpm三方包，DevEco Studio會(huì)自動(dòng)在工程的oh-package.json5中自動(dòng)添加三方包依賴。
ohpm install @ohos/lottie
- 方式二：在工程的
oh-package.json5中設(shè)置HarmonyOS ohpm三方包依賴，配置示例如下：
"dependencies": {
"@ohos/lottie": "^2.0.0"
}
跟上面一樣，需要執(zhí)行ohpm install命令安裝依賴包，依賴包會(huì)存儲(chǔ)在工程的oh_modules目錄下。
在完成上述步驟后，我們繼續(xù)完成outer頁(yè)面的開(kāi)發(fā)，在outer頁(yè)面中我們通過(guò)import的方式引入配置的社區(qū)庫(kù)，并實(shí)現(xiàn)對(duì)社區(qū)庫(kù)動(dòng)畫(huà)的調(diào)用。
import lottie, { AnimationItem } from '@ohos/lottie';
import Logger from '../common/utils/log/Logger';
@Component
export struct Outer {
private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
private animateName: string = 'data';
private animateItem: AnimationItem | null = null;
@State canvasTitle: string | undefined = undefined;
build(){
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween
}){
Column(){
Canvas(this.renderingContext)
.width('100%')
.aspectRatio(1.76)
.backgroundImage($r('app.media.canvasBg'))
.backgroundImageSize(ImageSize.Cover)
.onDisAppear(() => {
lottie.destroy(this.animateName);
})
Text(this.canvasTitle)
.width('100%')
.fontSize('14fp')
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.fontColor('#182431')
.opacity(0.4)
}
.margin({
top: '10vp',
left: '10vp',
right: '10vp'
})
Column({ space: 12 }){
Button(){
Text('加載動(dòng)畫(huà)')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('41vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem != null) {
this.animateItem.destroy();
this.animateItem = null;
}
this.canvasTitle = '加載動(dòng)畫(huà)';
this.animateItem = lottie.loadAnimation({
container: this.renderingContext,
renderer: 'canvas',
loop: 10,
autoplay: true,
name: this.animateName,
path: 'common/lottie/data.json'
})
})
Button() {
Text('結(jié)束并回到第0幀')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem === null) return;
this.canvasTitle = '結(jié)束并回到第0幀';
this.animateItem.goToAndPlay(0, true);
})
Flex({ justifyContent: FlexAlign.SpaceBetween }){
Button(){
Text('播放')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('49%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick( () => {
if (this.animateItem === null) return;
this.canvasTitle = '播放'
lottie.play();
})
Button() {
Text('暫停')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('49%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem === null) return;
this.canvasTitle = '暫停';
lottie.pause();
})
}
}
.padding({
left: '23vp',
right: '23vp',
bottom: '41vp'
})
}
.height('100%')
}
}
總結(jié)
這里介紹了本地庫(kù)使用、遠(yuǎn)程第三方庫(kù)引入；
本地庫(kù)或者遠(yuǎn)程第三方庫(kù)，都需要ohpm引入到oh-package.json5中才能使用；
我是前端，喜歡用ohpm直接導(dǎo)入。如需要手動(dòng)導(dǎo)入可以選擇第二種；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-855866.html
結(jié)語(yǔ)
本篇文章的內(nèi)容結(jié)束了。文章有不對(duì)或不完整的地方，望多指點(diǎn)；
望更多小伙伴們加入harmonyOS開(kāi)發(fā)大家庭，壯大生態(tài)圈，讓鴻蒙更好，讓國(guó)產(chǎn)手機(jī)（物聯(lián)網(wǎng)）系統(tǒng)更強(qiáng)大。
如對(duì)你學(xué)習(xí)有所幫助，希望可愛(ài)你動(dòng)動(dòng)小手，關(guān)注、點(diǎn)贊、收藏；文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-855866.html
到了這里，關(guān)于HarmonyOS基礎(chǔ)（七）- 詳細(xì)剖析鴻蒙引入第三方庫(kù)案例篇（1）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
