介紹

本篇Codelab主要向開發(fā)者展示了在Stage模型中，如何調(diào)用已經(jīng)上架到[三方庫中心]的社區(qū)庫和項(xiàng)目內(nèi)創(chuàng)建的本地庫。效果圖如下：

相關(guān)概念

• [Navigation]：一般作為Page頁面的根容器，通過屬性設(shè)置來展示頁面的標(biāo)題、工具欄、菜單。
• [Tabs]：一種可以通過頁簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁簽對應(yīng)一個(gè)內(nèi)容視圖。
• [Canvas]：畫布組件，用于自定義繪制圖形。
• [OpenHarmony 共享包]：OpenHarmony 共享包定義了特定的工程結(jié)構(gòu)和配置文件，支持OpenHarmony頁面組件相關(guān)API、資源的調(diào)用。

環(huán)境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發(fā)板類型：[潤和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
   4. HarmonyOS鴻蒙開發(fā)文檔參考：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

HarmonyOS&OpenHarmony開發(fā)文檔PDF加v
mau123789直接可以拿取，文檔包含在上

├──entry/src/main/ets                  // 代碼區(qū)
│  ├──common
│  │  ├──constants                     // 常量文件
│  │  │  └──CommonConst.ets            // 通用常量
│  │  ├──lottie
│  │  │  └──data.json                  // 動(dòng)畫JSON文件
│  │  └──utils
│  │     └──log                        // 日志工具類
│  │        └──Logger.ets
│  ├──entryability
│  │  └──EntryAbility.ts               // 程序入口類
│  ├──pages
│  │  └──MainPage.ets                  // 主界面
│  ├──view
│  │  ├──InnerComponent.ets            // 本地庫子頁面
│  │  └──OuterComponent.ets            // 社區(qū)庫子界面
│  └──viewmodel
│     ├──ButtonList.ets                // 按鈕類
│     └──InnerViewModel.ets            // 本地庫數(shù)據(jù)獲取
├──entry/src/main/resources            // 資源文件
└──library/src/main/ets                // 本地庫代碼區(qū)       
   ├──components
   │  └──MainPage           
   │     └──Buttons.ets                // 本地庫代碼實(shí)現(xiàn)
   └──viewmodel
      └──ButtonsViewModel.ets          // 按鈕數(shù)據(jù)類型

整體框架搭建

本篇Codelab由主頁面、本地庫組件頁面、社區(qū)庫組件頁面三個(gè)頁面組成，主頁面由Navigation作為根組件實(shí)現(xiàn)全局標(biāo)題，由Tabs組件實(shí)現(xiàn)本地庫和社區(qū)庫頁面的切換，代碼如下：

// MainPage.ets
import { Outer } from '../view/OuterComponent';
import { Inner } from '../view/InnerComponent';
import { CommonConstants } from '../common/constants/CommonConst';

@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController();
  @State currentIndex: number = 0;

  ...

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

          TabContent() {
            Outer()
          }.tabBar(this.TabBuilder(CommonConstants.SECOND_TAB))
        }
        .barWidth(CommonConstants.BAR_WIDTH)
        .barHeight($r('app.float.default_56'))
        .onChange((index: number) = > {
          this.currentIndex = index;
        })
      }
      .titleMode(NavigationTitleMode.Mini)
      .title(this.NavigationTitle)
      .hideBackButton(true)
    }
    .backgroundColor($r('app.color.app_bg'))
  }
}

在pages文件夾下新建components文件并在此文件夾下創(chuàng)建兩個(gè)ArkTS文件，分別命名為inner和outer，至此整體框架搭建完畢。

本地庫實(shí)現(xiàn)

本地庫主要是指未上架到ohpm中心且在項(xiàng)目組內(nèi)共享使用的庫文件，這類庫需要開發(fā)者在項(xiàng)目中創(chuàng)建并開發(fā)新的Library模塊，創(chuàng)建步驟如下：

1. 通過如下兩種方法，在OpenHarmony工程中添加OpenHarmony ohpm塊。
   • 方法1：鼠標(biāo)移到工程目錄頂部，單擊鼠標(biāo)右鍵，選擇New>Module。
   • 方法2：在菜單欄選擇File > New > Module。
2. 在Choose Your Ability Template界面中，選擇Static Library，并單擊Next。
3. 在Configure the New Module界面中，設(shè)置新添加的模塊信息，設(shè)置完成后，單擊Finish完成創(chuàng)建。
   • Module name：新增模塊的名稱。
   • Language：選擇開發(fā)OpenHarmony ohpm包的語言。
   • Device type：選擇OpenHarmony ohpm包支持的設(shè)備類型。
   • Enable Native：是否創(chuàng)建一個(gè)用于調(diào)用C++代碼的OpenHarmony ohpm共享模塊。
4. 創(chuàng)建完成后，會在工程目錄中生成OpenHarmony ohpm共享模塊及相關(guān)文件。

本Codelab在本地庫中實(shí)現(xiàn)了對Button組件的簡單封裝，主要代碼實(shí)現(xiàn)如下：

// library/src/main/ets/components/MainPage/Buttons.ets
@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($r('app.float.default_16'))
          .fontColor(this.fontColor || $r('app.color.white'))
        }
        .width($r('app.float.default_90'))
        .height($r('app.float.default_35'))
        .backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
      }
    }
  }
}

如果想在Codelab的主工程代碼中引用本地庫，有如下兩種方式：

方式一：在Terminal窗口中，執(zhí)行如下命令進(jìn)行安裝，并會在package.json中自動(dòng)添加依賴。

ohpm install ../library --save

方式二：在工程的oh_package.json5中設(shè)置OpenHarmony ohpm三方包依賴，配置示例如下：

"dependencies": {
  "@ohos/library": "file:../library"
}

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

ohpm install

在完成上述步驟后，我們繼續(xù)完成inner頁面的開發(fā)，在inner頁面中我們通過import的方式引入開發(fā)的本地庫，并通過循環(huán)傳入不同的參數(shù)展示不同的button，代碼實(shí)現(xiàn)如下：

// InnerComponent.ets
import { Buttons } from '@ohos/library';

@Component
export struct Inner {
  @State buttonList: ButtonList[] = InnerViewModel.getButtonListData();
  scroller: Scroller = new Scroller();

  build() {
    Scroll(this.scroller) {
      Column({ space: CommonConstants.SPACE_12 }) {
        ForEach(this.buttonList,  (item: ButtonList) = > {
          Column() {
            Flex({
              direction: FlexDirection.Column,
              justifyContent: FlexAlign.SpaceBetween,
              alignItems: ItemAlign.Start
            }) {
              Column() {
                ...
              }
              .alignItems(HorizontalAlign.Start)

              Column() {
                Buttons({
                  buttonText: item.buttonText,
                  buttonShape: item.buttonShape,
                  buttonType: item.buttonType,
                  stateEffect: item.stateEffect,
                  fontColor: item.fontColor
                })
                  .alignSelf(ItemAlign.Center)
                  .margin({ bottom: $r('app.float.default_21') })
              }
              .width($r('app.float.default_260'))
              .height($r('app.float.default_90'))
              .backgroundImage($r('app.media.mobile'))
              .backgroundImageSize(ImageSize.Contain)
              .justifyContent(FlexAlign.End)
              .alignSelf(ItemAlign.Center)
              .align(Alignment.End)
            }
            .padding({
              bottom: $r('app.float.default_24')
            })
            .width(CommonConstants.CONTAINER_WIDTH)
            .height(CommonConstants.CONTAINER_HEIGHT)
          }
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .padding({
            top: $r('app.float.default_12'),
            left: $r('app.float.default_8')
          })
          .backgroundColor($r('app.color.white'))
          .borderRadius($r('app.float.default_24'))
        })
      }
      .width(CommonConstants.CONTAINER_WIDTH)
      .padding({
        left: $r('app.float.default_12'),
        right: $r('app.float.default_12'),
        top: $r('app.float.default_12')
      })
    }
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
    .margin({bottom: $r('app.float.default_24')})
  }
}

至此本地庫的調(diào)用已完成。

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

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

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

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

  ohpm install @ohos/lottie --save
  

• 方式二：在工程的oh_package.json5中設(shè)置OpenHarmony ohpm三方包依賴，配置示例如下：

  "dependencies": {
      "@ohos/lottie": "^2.0.0"
  }
  

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

  ohpm install
  

在完成上述步驟后，我們繼續(xù)完成outer頁面的開發(fā)，在outer頁面中我們通過import的方式引入配置的社區(qū)庫，并實(shí)現(xiàn)對社區(qū)庫動(dòng)畫的調(diào)用，關(guān)鍵代碼如下：

// OuterComponent.ets
import lottie, { AnimationItem } from '@ohos/lottie';
import Logger from '../common/utils/log/logger';
import { CommonConstants } from '../common/constants/CommonConst';

@Component
export struct Outer {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);
  private animateName: string = CommonConstants.ANIMATE_NAME;
  private animateItem: AnimationItem | null = null;
  @State canvasTitle: Resource | undefined = undefined;

  ...

  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {

      // Canvas area
      Column() {
        Canvas(this.renderingContext)
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() = > {
            lottie.destroy(this.animateName);
          })
        ...
      }
      .margin({
        top: $r('app.float.default_10'),
        left: $r('app.float.default_10'),
        right: $r('app.float.default_10')
      })

      // Buttons area
      Column({ space: CommonConstants.SPACE_12 }) {
        Button() {
          ...
        }
        .width(CommonConstants.CONTAINER_WIDTH)
        .height($r('app.float.default_40'))
        .backgroundColor($r('app.color.outer_button_bg'))
        .onClick(() = > {
          this.canvasTitle = $r('app.string.outer_button_load');
          this.animateItem = lottie.loadAnimation({
            container: this.renderingContext,
            renderer: 'canvas',
            loop: 10,
            autoplay: true,
            name: this.animateName,
            path: 'common/lottie/data.json'
          });
        })
        ...
        }
      }
      .padding({
        left: $r('app.float.default_23'),
        right: $r('app.float.default_23'),
        bottom: $r('app.float.default_41')
      })
    }
    .height(CommonConstants.CONTAINER_HEIGHT)
  }
}

審核編輯 黃宇