隨著鴻蒙系統(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)用。

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

一、環(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ā)門戶，點(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)目

創(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)了；

關(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)詳情；

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

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

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

預(yù)覽：

用戶真機(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)。

調(diào)試：

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

二、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)目依賴

如您是新項(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)依賴的版本修改為～4.0.0-beta.0，再重新安裝依賴，并添加上述三個(gè)和 vite 相關(guān)的依賴。

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

步驟 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 的名稱，默認(rèn)為 'entry'
    hapName: 'entry',
    // 【可選】modules 的入口名稱，默認(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)試。

三、注意事項(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í)去解析這些樣式文件。并將這些樣式以內(nèi)聯(lián)的方式寫入到組件的 TS/JS 代碼中。

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

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

審核編輯 黃宇