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

少恭写代码發表於2024-11-19

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

相關文章