準(zhǔn)備工作

• 原版SwanLinkOS系統(tǒng)的"競(jìng)"開(kāi)發(fā)板(若和筆者一樣，已經(jīng)把原版系統(tǒng)刷掉的，可以參考【軟通動(dòng)力鴻湖萬(wàn)聯(lián)揚(yáng)帆系列“競(jìng)”開(kāi)發(fā)板試用體驗(yàn)】DevEco Device Tool編譯燒錄OH v3.1 R到“競(jìng)”開(kāi)發(fā)板燒錄Firefly提供的鏡像)

• DevEco Studio

• 提供給OEM廠商開(kāi)發(fā)應(yīng)用的工具包OpenHarmony v3.1Release Full SDK

1. 下載安裝DevEco Studio

Huawei DevEco Studio(以下簡(jiǎn)稱ide)是華為基于IntelliJ IDEA Community開(kāi)源版本打造的適用于開(kāi)發(fā)HarmonyOS/OpenHarmony應(yīng)用/服務(wù)的工具，是一款面向終端全場(chǎng)景多設(shè)備的一站式集成開(kāi)發(fā)環(huán)境。

1.1 下載ide

在瀏覽器中打開(kāi)ide官方下載界面，當(dāng)前提供了Windows(64-bit)和Mac兩個(gè)系統(tǒng)的安裝包，筆者使用的是Windows操作系統(tǒng)，因此點(diǎn)擊Windows(64-bit)列的下載圖標(biāo)按鈕進(jìn)行下載，如圖1-1所示。

1.2 安裝ide

在Windows操作系統(tǒng)上安裝ide，需要滿足以下條件：

• 操作系統(tǒng)：Windows10 64位及以上

• 內(nèi)存：8GB

• 硬盤(pán)：100GB及以上

1.使用解壓縮工具解壓下載的devecostudio-windows-tools-3.0.0.993.zip文件得到deveco-studio-3.0.0.993.exe安裝文件，雙擊安裝文件打開(kāi)安裝向?qū)?，如圖1-2所示。

2.點(diǎn)擊Next按鈕跳轉(zhuǎn)到選擇安裝路徑界面，選擇ide安裝路徑，可以通過(guò)點(diǎn)擊界面中的Browse按鈕或直接在輸入框中更改安裝路徑。若開(kāi)發(fā)者僅有一個(gè)磁盤(pán)則默認(rèn)即可，若開(kāi)發(fā)者有多個(gè)磁盤(pán)，建議安裝到除C盤(pán)之外的其他磁盤(pán)中，如圖1-3所示。

3.安裝路徑選擇后點(diǎn)擊Next按鈕跳轉(zhuǎn)到安裝選項(xiàng)界面，勾選Create Desktop Shortcut(創(chuàng)建桌面圖標(biāo))、Update Context Menu(更新關(guān)聯(lián)菜單)、Update PATH Variable(添加PATH變量)，如圖1-4所示。

4.點(diǎn)擊Next按鈕跳轉(zhuǎn)到選擇開(kāi)始菜單創(chuàng)建快捷方式文件夾界面，默認(rèn)即可，如圖1-5所示。

5.點(diǎn)擊Install按鈕跳轉(zhuǎn)到安裝進(jìn)度界面，等待安裝完成即可，如圖1-6所示。

6.安裝完成后，自動(dòng)跳轉(zhuǎn)到安裝完成界面，選擇稍后重啟，點(diǎn)擊Finish按鈕關(guān)閉安裝向?qū)?，如圖1-7所示。

1.3 配置ide

首次啟動(dòng)ide還需要配置node.js和SDK。

1.配置node.js：node.js提供兩種配置方式，一種是本地已經(jīng)安裝可以直接選擇，如圖1-8所示；另一種是本地未安裝需要下載安裝，只需要選擇node.js安裝路徑，會(huì)自動(dòng)安裝node.js，如圖1-9所示。

2. ide支持OpenHarmony和HarmonyOS應(yīng)用/服務(wù)的開(kāi)發(fā)，在開(kāi)發(fā)之前需要配置好SDK路徑，會(huì)下載默認(rèn)的SDK，如圖1-10所示。

2. 替換PublicSDK為FullSDK

ide自帶的SDK為PublicSDK，是提供給應(yīng)用開(kāi)發(fā)的工具包，其不包含系統(tǒng)應(yīng)用所需要的高權(quán)限API；FullSDK是提供給OEM廠商開(kāi)發(fā)應(yīng)用的工具包，ide不會(huì)自動(dòng)下載，需要手動(dòng)替換，其包含系統(tǒng)應(yīng)用所需要的高權(quán)限API。

首先打開(kāi)OpenHarmony 3.1.1 Release版本說(shuō)明文件，在表2獲取源碼路徑表中根據(jù)自己的操作系統(tǒng)選擇下載標(biāo)準(zhǔn)系統(tǒng)Full SDK包，如圖1-11所示，然后按照表1版本軟件和工具配套關(guān)系表中的替換指南進(jìn)行操作即可，如圖1-12所示。

3. 梳理知識(shí)要點(diǎn)

• 全屏顯示 - window API

• 數(shù)據(jù)請(qǐng)求 - http API

• 視頻播放組件 - Video

3.1 全屏顯示

窗口(window)API提供管理窗口的能力，包括對(duì)當(dāng)前窗口創(chuàng)建、銷(xiāo)毀、各屬性設(shè)置等。使用窗口API需要在使用的頁(yè)面導(dǎo)入模塊import window from '@ohos.window';

import window from '@ohos.window';


export default {
 onCreate() {
  // 獲取當(dāng)前窗口實(shí)例
  window.getTopWindow((err, data) => {
   if (err.code) {
    console.error('TeAVideo --> getTopWindow cause: ' + JSON.stringify(err));
    return;
   }
   // 設(shè)置窗口全屏顯示
   data.setFullScreen(true);
  })
 },
 ...
}

（左右移動(dòng)查看全部?jī)?nèi)容）

3.2 數(shù)據(jù)請(qǐng)求

在OpenHarmony工具集之?dāng)?shù)據(jù)請(qǐng)求封裝·讓獲取數(shù)據(jù)變簡(jiǎn)單筆者對(duì)數(shù)據(jù)請(qǐng)求做了簡(jiǎn)單的封裝，并通過(guò)提交一個(gè)ohos npm倉(cāng)踩坑記錄作為一個(gè)插件提交到了npm倉(cāng)庫(kù)，按照倉(cāng)庫(kù)說(shuō)明在package.json中引入該倉(cāng)庫(kù)，本節(jié)不做過(guò)多贅述。

3.3 視頻播放組件Video

視頻播放組件對(duì)于多媒體類(lèi)應(yīng)用是必不可少的組件，OpenHarmony從API 7版本開(kāi)始提供視頻播放組件Video，該組件支持播放網(wǎng)絡(luò)視頻和本地視頻，播放網(wǎng)絡(luò)視頻需要配置ohos.permission.INTERNET權(quán)限。

// 本地視頻
@Entry
@Component
struct Index {
 videoCtrl: VideoController = new VideoController();


 build() {
  Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
   Video({src: $rawfile('lidong.mp4'), controller: this.videoCtrl})
    .width(800).height(600)
    .controls(true) // 顯示控制器
    .autoPlay(true) // 自動(dòng)播放
  }
  .width('100%').height('100%')
  .backgroundColor(0xF5F5F5)
 }
}

（左右移動(dòng)查看全部?jī)?nèi)容）

以上是一個(gè)簡(jiǎn)單的視頻播放，接下來(lái)筆者將利用VideoController對(duì)象的方法自定義控制器。

@Entry
@Component
struct Index {
 @State initVal: number = 0;
 @State duration: number = 0;
 videoCtrl: VideoController = new VideoController();


 build() {
  Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
   Stack({alignContent: Alignment.Bottom}) {
    Video({src: $rawfile('lidong.mp4'), controller: this.videoCtrl})
     .controls(false)
     .autoPlay(false)
     .objectFit(ImageFit.Fill)
     .onPrepared((e) => {
      this.duration = e.duration
     })
     .onUpdate((e) => {
      this.initVal = e.time
     })


    Column({space: 5}) {
     Progress({value: 0, total: this.duration, type: ProgressType.Linear})
      .width('90%').height(32)
      .value(this.initVal)
     Button('播放').fontSize(16).padding(8)
      .onClick(() => {
       this.videoCtrl.start();
      })
    }
    .width('100%').height(80)
    .backgroundColor(0xD5D5D5)
   }
   .width('90%').height(600)
   .backgroundColor(0xE5E5E5)
  }
  .width('100%').height('100%')
  .backgroundColor(0xF5F5F5)
 }
}

（左右移動(dòng)查看全部?jī)?nèi)容）

注：效果見(jiàn)視頻！

更多熱點(diǎn)文章閱讀

• DevEco Device Tool 3.1 Beta1版本發(fā)布，產(chǎn)品化配置優(yōu)化添加自定義燒錄器
• 鴻湖萬(wàn)聯(lián)“競(jìng)”開(kāi)發(fā)板：基于JS UI框架的視頻播放應(yīng)用
• 全球首家支持OpenHarmony的3D引擎，Cocos Creator 3.6.1社區(qū)版發(fā)布
• 全新升級(jí)的鴻蒙開(kāi)發(fā)套件，你想知道的都在這里
• 一張圖看懂華為開(kāi)發(fā)者大會(huì)2022主題演講

提示：本文由電子發(fā)燒友社區(qū)發(fā)布，轉(zhuǎn)載請(qǐng)注明以上來(lái)源。如需社區(qū)合作及入群交流，請(qǐng)?zhí)砑游⑿臙EFans0806，或者發(fā)郵箱liuyong@huaqiu.com。