導(dǎo)讀

本指南為開(kāi)發(fā)者提供了使用 Taro 框架開(kāi)發(fā)鴻蒙原生應(yīng)用的快速入門(mén)方法。Taro，作為一個(gè)多端統(tǒng)一開(kāi)發(fā)框架，讓開(kāi)發(fā)者能夠使用一套代碼同時(shí)適配多個(gè)平臺(tái)，包括鴻蒙系統(tǒng)。文章將詳細(xì)介紹如何配置開(kāi)發(fā)環(huán)境，以及如何利用 Taro 的特性和組件庫(kù)來(lái)構(gòu)建鴻蒙應(yīng)用。從基本的項(xiàng)目設(shè)置到復(fù)雜的應(yīng)用邏輯開(kāi)發(fā)，本文將一步步引導(dǎo)開(kāi)發(fā)者了解 Taro 在鴻蒙應(yīng)用開(kāi)發(fā)中的實(shí)際應(yīng)用，快速掌握跨平臺(tái)開(kāi)發(fā)的技巧。

01 前言

在今年的敏捷團(tuán)隊(duì)建設(shè)中，我通過(guò)Suite執(zhí)行器實(shí)現(xiàn)了一鍵自動(dòng)化單元測(cè)試。Juint除了Suite執(zhí)行器還有哪些執(zhí)行器呢？由此我的Runner探索之旅開(kāi)始了！

隨著鴻蒙系統(tǒng)的不斷完善，許多應(yīng)用廠商都希望將自己的應(yīng)用移植到鴻蒙平臺(tái)上。最近，Taro 發(fā)布了 v4.0.0-beta.x 版本，支持使用 Taro 快速開(kāi)發(fā)鴻蒙原生應(yīng)用，也可將現(xiàn)有的小程序轉(zhuǎn)換為鴻蒙原生應(yīng)用。本文將正式為開(kāi)發(fā)者提供一份完整的鴻蒙應(yīng)用開(kāi)發(fā)指南，幫助大家使用 Taro 開(kāi)發(fā)自己的第一個(gè)鴻蒙應(yīng)用。

02 環(huán)境配置

首先要準(zhǔn)備鴻蒙運(yùn)行所需的環(huán)境，根據(jù)參考文檔提示的步驟在 HUAWEI DevEco Studio 的 IDE 中完成 MyApplication 項(xiàng)目的創(chuàng)建，熟悉鴻蒙開(kāi)發(fā)者工具的預(yù)覽查看等功能。

步驟 1：安裝、配置 DevEco Studio

1.登錄 HarmonysOS 應(yīng)用開(kāi)發(fā)門(mén)戶(hù)，點(diǎn)擊右上角注冊(cè)按鈕，注冊(cè)開(kāi)發(fā)者帳號(hào)；

2.進(jìn)入 HUAWEI DevEco Studio 套件貨架中心，申請(qǐng)白名單，由于目前最新版本的 OpenHarmony SDK 和 IDE 仍未對(duì)外開(kāi)發(fā)，因此個(gè)人開(kāi)發(fā)者若想嘗鮮，需要先申請(qǐng)白名單成為合作伙伴后才能繼續(xù)進(jìn)行下面的步驟；

3.白名單申請(qǐng)通過(guò)后，進(jìn)入貨架，下載 IDE 版本為 DevEco Studio 4.0.3.700 的 DevEcoStudio4.0-API10 開(kāi)發(fā)套件；

4.下載完成后，打開(kāi) IDE 安裝包進(jìn)行安裝，安裝成功后啟動(dòng) DevEco Studio，根據(jù)引導(dǎo)解壓套件里附帶的 SDK 壓縮包，并根據(jù)引導(dǎo)在 IDE 中配置好 SDK 的使用路徑；

5.SDK 配置成功后，看到設(shè)置面板中各個(gè) SDK 的版本號(hào)與下面的圖片中相同，則標(biāo)識(shí)配置成功了。

步驟 2：創(chuàng)建 Harmony 主項(xiàng)目

1.創(chuàng)建新項(xiàng)目，選擇需要開(kāi)發(fā)的設(shè)備，然后 Mode 選擇 Stage 模型，Compile SDK 選擇 4.0.0(API 10)，按照引導(dǎo)操作后一個(gè)新的項(xiàng)目就被創(chuàng)建出來(lái)了；

2.關(guān)注目錄 entry/src/main/ets/pages/Index.ets 下面的文件，熟悉文件結(jié)構(gòu)。pages 目錄下為頁(yè)面入口，新建項(xiàng)目的頁(yè)面目錄會(huì)包含若干個(gè) .ets 文件，應(yīng)用級(jí)配置信息位于 build-profile.json5，當(dāng)前的模塊信息、編譯信息配置項(xiàng)位于 entry/build-profile.json5。項(xiàng)目結(jié)構(gòu)詳情；

3.創(chuàng)建好項(xiàng)目后，根據(jù)配置插件指引，將下載的套件附帶的插件配置在項(xiàng)目配置中。

步驟 3：預(yù)覽 & 調(diào)試

DevEco Studio 目前只支持在華為提供的測(cè)試真機(jī)上進(jìn)行預(yù)覽與調(diào)試，模擬器調(diào)試將在不久后支持。

1. 預(yù)覽：

用戶(hù)真機(jī)與電腦相連，打開(kāi)開(kāi)發(fā)者模式，即可在真機(jī)看到效果。這里需要注意的是，真機(jī)需要使用華為側(cè)提供的測(cè)試機(jī)，測(cè)試機(jī)中會(huì)安裝純鴻蒙的系統(tǒng)鏡像，能夠體驗(yàn)到完整的鴻蒙系統(tǒng)功能，純鴻蒙應(yīng)用目前還不能完美地在 HarmonyOS 4.0 的商用機(jī)側(cè)跑起來(lái)。

2. 調(diào)試：

鏈接上真機(jī)后，選擇好對(duì)應(yīng)的入口模塊，在項(xiàng)目代碼中打上斷點(diǎn)等信息，在編譯器中啟動(dòng)調(diào)試即可。

03 Taro開(kāi)發(fā)流程

步驟 1：安裝 Taro v4.0.0-beta.x

1. 安裝 CLI

安裝 v4.0.0-beta.x 版本的 Taro CLI：

npm i -g @tarojs/cli@beta

2. 安裝項(xiàng)目依賴(lài)

如您是新項(xiàng)目，創(chuàng)建項(xiàng)目時(shí)推薦創(chuàng)建編譯器為 vite 的模板，若創(chuàng)建項(xiàng)目選擇了 webpack 或 webpack5 的模板，則需要手動(dòng)安裝 vite、terser 以及 @tarojs/vite-runner。

$ npm i vite@^4.2.0
$ npm i terser@^5.4.0
$ npm i @tarojs/vite-runner@beta

舊項(xiàng)目需要把 package.json 文件中 Taro 相關(guān)依賴(lài)的版本修改為 ~4.0.0-beta.0，再重新安裝依賴(lài)，并添加上述三個(gè)和 vite 相關(guān)的依賴(lài)。

如果安裝失敗或打開(kāi)項(xiàng)目失敗，可以刪除 node_modules、yarn.lock、package-lock.json 后重新安裝依賴(lài)再?lài)L試。

步驟 2：安裝 Taro 適配鴻蒙插件

$ npm i @tarojs/plugin-platform-harmony-ets@beta

步驟 3：修改 Taro 編譯配置

config/index.ts

config = {// 配置使用插件plugins: ['@tarojs/plugin-platform-harmony-ets'],// harmony 相關(guān)配置harmony: {// 將編譯方式設(shè)置為使用 Vite 編譯compiler: 'vite',// 【必填】鴻蒙主應(yīng)用的絕對(duì)路徑，例如：projectPath: path.resolve(process.cwd(), '../MyApplication'),// 【可選】HAP 的名稱(chēng)，默認(rèn)為 'entry'hapName: 'entry',// 【可選】modules 的入口名稱(chēng)，默認(rèn)為 'default'name: 'default',},
}

步驟 4：修改鴻蒙主項(xiàng)目的權(quán)限配置

根據(jù)項(xiàng)目需要在鴻蒙主項(xiàng)目 entry/src/main/module.json5 中所需要使用到的機(jī)器權(quán)限。

{//..."requestPermissions": [{"name": "ohos.permission.VIBRATE"},{"name": "ohos.permission.GET_WIFI_INFO"},{"name": "ohos.permission.GET_NETWORK_INFO"},{"name": "ohos.permission.SET_NETWORK_INFO"},{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_BUNDLE_INFO"},{"name": "ohos.permission.LOCATION"},{"name": "ohos.permission.APPROXIMATELY_LOCATION"},{"name": "ohos.permission.LOCATION_IN_BACKGROUND"}]
}

步驟 5：編譯運(yùn)行

在 package.json 里添加以下的 scripts 命令，運(yùn)行命令，Taro 可將打包結(jié)果生成到配置的鴻蒙主項(xiàng)目路徑中。

"scripts": {"build:harmony": "taro build --type harmony","dev:harmony": "npm run build:harmony -- --watch"
}

步驟 6：預(yù)覽 & 調(diào)試

開(kāi)發(fā)者可根據(jù)上面運(yùn)行鴻蒙 demo 項(xiàng)目的方式進(jìn)行預(yù)覽與調(diào)試。

04 注意事項(xiàng)

1. 樣式

布局

鴻蒙沒(méi)有實(shí)現(xiàn)盒子模型，因此目前在實(shí)現(xiàn)上是使用鴻蒙的 Flex 和 Column 實(shí)現(xiàn)的。

尺寸單位

目前 Taro 轉(zhuǎn)鴻蒙支持使用 px、vw、vh 作為數(shù)據(jù)的單位，諸如 rem、em 等單位則暫時(shí)不支持。

2. 調(diào)試

真機(jī)調(diào)試

當(dāng)前，真機(jī)調(diào)試需要使用華為側(cè)提供的測(cè)試機(jī)，測(cè)試機(jī)中會(huì)安裝純鴻蒙的系統(tǒng)鏡像，能夠體驗(yàn)到完整的鴻蒙系統(tǒng)功能，純鴻蒙應(yīng)用目前還不能完美地在 HarmonyOS 4.0 的商用機(jī)側(cè)跑起來(lái)。

SDK 版本問(wèn)題

由于鴻蒙側(cè)迭代 SDK 的速度較快，目前 Taro 適配的 SDK 版本為最新的 API 10 版本，對(duì)于 API 版本為 9 的鴻蒙項(xiàng)目可能會(huì)存在組件和 API 的不兼容和不支持。

3. 與小程序的差異

當(dāng)下，雖然 Taro 適配鴻蒙 ArkTS 的工作已經(jīng)基本完成，但在適配過(guò)程中，我們也發(fā)現(xiàn)了一些暫時(shí)無(wú)法解決或者計(jì)劃后續(xù)解決的遺留問(wèn)題。

組件和 API

由于鴻蒙平臺(tái)和小程序平臺(tái)本身就存在著較大的差異，因此一些小程序的組件和 API 規(guī)范，在鴻蒙平臺(tái)會(huì)沒(méi)有辦法重新實(shí)現(xiàn)，如與登錄和賬號(hào)信息相關(guān)的 API 以及 live-player 等和直播相關(guān)的組件。

樣式解析存在一定的限制

由于在 ArkTS 中，會(huì)使用聲明式 UI 來(lái)對(duì) UI 的樣式進(jìn)行描述，因此不存在 sass 和 css 等樣式文件，因此 Taro 在適配鴻蒙 ArkTS 時(shí)，會(huì)在編譯時(shí)去解析這些樣式文件。并將這些樣式以?xún)?nèi)聯(lián)的方式寫(xiě)入到組件的 TS/JS 代碼中。

正常的樣式基于 W3C 規(guī)范，存在著類(lèi)名級(jí)聯(lián)和樣式繼承的行為，由于開(kāi)發(fā)者在代碼中的寫(xiě)法各異，Taro 沒(méi)有辦法在編譯時(shí)獲取準(zhǔn)確的節(jié)點(diǎn)結(jié)構(gòu)以及節(jié)點(diǎn)類(lèi)名信息，因此無(wú)法支持這兩種行為。

另外，由于樣式的解析是基于組件文件的緯度的，因此樣式文件只能應(yīng)用于被其引用的組件文件中，而不能跨文件應(yīng)用，并且樣式文件也只支持類(lèi)選擇器。

05 結(jié)語(yǔ)

本指南詳細(xì)介紹了鴻蒙運(yùn)行環(huán)境的配置、使用 Taro 開(kāi)發(fā)鴻蒙應(yīng)用的步驟和注意事項(xiàng)。我們希望，開(kāi)發(fā)者們通過(guò)本指南，可以快速上手并高效開(kāi)發(fā)自己的鴻蒙應(yīng)用，順利的進(jìn)入到鴻蒙應(yīng)用開(kāi)發(fā)的新領(lǐng)域。

為了能讓大家更好的學(xué)習(xí)鴻蒙 (OpenHarmony) 開(kāi)發(fā)技術(shù)，這邊特意整理了《鴻蒙 (OpenHarmony)開(kāi)發(fā)學(xué)習(xí)手冊(cè)》（共計(jì)890頁(yè)），希望對(duì)大家有所幫助：https://qr21.cn/FV7h05

《鴻蒙 (OpenHarmony)開(kāi)發(fā)學(xué)習(xí)手冊(cè)》

入門(mén)必看：https://qr21.cn/FV7h05

1. 應(yīng)用開(kāi)發(fā)導(dǎo)讀(ArkTS)
2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

1. 系統(tǒng)定義
2. 技術(shù)架構(gòu)
3. 技術(shù)特性
4. 系統(tǒng)安全

如何快速入門(mén)？：https://qr21.cn/FV7h05

1. 基本概念
2. 構(gòu)建第一個(gè)ArkTS應(yīng)用
3. 構(gòu)建第一個(gè)JS應(yīng)用
4. ……

開(kāi)發(fā)基礎(chǔ)知識(shí)：https://qr21.cn/FV7h05

1. 應(yīng)用基礎(chǔ)知識(shí)
2. 配置文件
3. 應(yīng)用數(shù)據(jù)管理
4. 應(yīng)用安全管理
5. 應(yīng)用隱私保護(hù)
6. 三方應(yīng)用調(diào)用管控機(jī)制
7. 資源分類(lèi)與訪問(wèn)
8. 學(xué)習(xí)ArkTS語(yǔ)言
9. ……

基于ArkTS 開(kāi)發(fā)：https://qr21.cn/FV7h05

1.Ability開(kāi)發(fā)
2.UI開(kāi)發(fā)
3.公共事件與通知
4.窗口管理
5.媒體
6.安全
7.網(wǎng)絡(luò)與鏈接
8.電話服務(wù)
9.數(shù)據(jù)管理
10.后臺(tái)任務(wù)(Background Task)管理
11.設(shè)備管理
12.設(shè)備使用信息統(tǒng)計(jì)
13.DFX
14.國(guó)際化開(kāi)發(fā)
15.折疊屏系列
16.……