使用 Taro 開發(fā)鴻蒙原生應(yīng)用 —— 快速上手，鴻蒙應(yīng)用開發(fā)指南

隨著鴻蒙系統(tǒng)的不斷完善，許多應(yīng)用廠商都希望將自己的應(yīng)用移植到鴻蒙平臺上。最近，Taro 發(fā)布了 v4.0.0-beta.x 版本，支持使用 Taro 快速開發(fā)鴻蒙原生應(yīng)用，也可將現(xiàn)有的小程序轉(zhuǎn)換為鴻蒙原生應(yīng)用。

在 《使用 Taro 開發(fā)鴻蒙原生應(yīng)用》 系列文章中，我們已經(jīng)介紹了 鴻蒙的基本概念 和 Taro 適配鴻蒙的原理。本文作為該系列的第三篇，將正式為開發(fā)者提供一份完整的鴻蒙應(yīng)用開發(fā)指南，幫助大家使用 Taro 開發(fā)自己的第一個鴻蒙應(yīng)用。

一、環(huán)境配置

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

步驟 1：安裝、配置 DevEco Studio

1.登錄 HarmonysOS 應(yīng)用開發(fā)門戶，點(diǎn)擊右上角注冊按鈕，注冊開發(fā)者帳號；

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

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

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

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

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

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

2.關(guān)注目錄 entry/src/main/ets/pages/Index.ets 下面的文件，熟悉文件結(jié)構(gòu)。pages 目錄下為頁面入口，新建項(xiàng)目的頁面目錄會包含若干個 .ets 文件，應(yīng)用級配置信息位于 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 目前只支持在華為提供的測試真機(jī)上進(jìn)行預(yù)覽與調(diào)試，模擬器調(diào)試將在不久后支持。

1. 預(yù)覽：

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

2. 調(diào)試：

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

二、Taro 開發(fā)流程

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

1. 安裝 CLI

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

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

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

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

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

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

$ npm i @tarojs步驟 3：修改 Taro 編譯配置

config/index.ts

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

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

{
  //...
  "requestPermissions"步驟 5：編譯運(yùn)行

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

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

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

三、注意事項(xiàng)

1. 樣式

布局

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

尺寸單位

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

2. 調(diào)試

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

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

SDK 版本問題

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

3. 與小程序的差異

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

組件和 API

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

樣式解析存在一定的限制

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

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

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

四、總結(jié)

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

讓我們一起開啟鴻蒙應(yīng)用開發(fā)的新篇章吧！

作者：京東零售 利齊諾

來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源