Taro首個支援鴻蒙的 UI 庫，同時還相容 React Native、小程式、H5

少恭写代码發表於2024-11-19
鴻蒙UIReact NativeH5

Taro 4.0 已經推出一段時間了，4.0 版本主要是支援了鴻蒙端的開發以及 Vite 編譯工具的支援。duxapp 在這段時間也跟隨 Taro 的腳步，實現的對鴻蒙端的支援，並且也將之前的 duxui 這個多端的 UI 庫，對鴻蒙端實現了相容。

duxui 元件庫提供了 60+ 的元件支援，能快速幫助你完成業務。

現在使用這個 UI 庫，不僅能開發鴻蒙，還能實現同時開發 React Native、小程式和 H5，也是目前唯一一個能相容這麼多端的 UI 庫。

元件展示

效果圖

如何使用

使用下面的命令，可以快速初始化一個 UI 庫的示例專案，你可以透過這個示例專案快速的檢視到 UI 庫在鴻蒙端以及其他端的效果

npx duxapp-cli create projectExample duxuiExample
  • 提示：在這之前需要安裝好基本的環境 nodejs 20+ yarn git

建立專案後，進入專案目錄 projectExample 執行以下命令

yarn dev:harmony --app=duxuiExample

編譯完成後，使用 DevEco Studio 開啟 dist/harmony 目錄，這個目錄就是一個原生鴻蒙專案

  • 如果你還不瞭解鴻蒙開發基礎知識，或者想繼續深入瞭解如何開發，可以檢視這篇入門教程

duxapp 做了些什麼

自動化

在 duxapp 中，我們把鴻蒙工程模板做了封裝，就像 React Native 端那樣，你不需要自行建立專案工程檔案，在你執行鴻蒙相關的命令的時候，會自動建立鴻蒙工程專案，你需要做的就是使用 DevEco Studio 來繼續編譯 duxapp 生成的鴻蒙工程檔案

配置化

包名、版本等資訊就和 React Native 端那樣，透過配置檔案來實現

模組化

我們將鴻蒙端的支援封裝到了 duxapp 的一個模組 duxappHarmony 中，只要你依賴了這個模組，就能實現對鴻蒙端的相容

如果你還不是很瞭解 duxapp 的模組化，可以檢視模組化介紹

UI元件庫

在過去這一段時間的相容過程中，主要做的工作就是對 UI 庫的相容，因為鴻蒙的 arkui 和 Web 標準對比，存在不小的差異，每個元件都需要進行適配，並且還需要對一些底層程式碼進行修改。總得來說，現階段雖然還存在一些小問題，但是95%的功能已經實現相容

繼續

如果你對這個專案有興趣，可以檢視文件，繼續瞭解詳情

開發文件：http://duxapp.cn

GitHub：https://github.com/duxapp

相關文章