當前位置：首頁 > 資源分享 > 資源推薦 > 正文内容

資源推薦

Ant Design Mini - 支付寶小(xiǎo)程序官方推出的免費(fèi)開(kāi)源 UI 組件(jiàn)庫，新增支持微信小(xiǎo)程序，實用性大大增加

豫唐網絡2024-02-13 10:23222

支付寶小(xiǎo)程序官方的 UI 組件(jiàn)庫開(kāi)始支持運行在微信小(xiǎo)程序上(shàng)了，如果要開(kāi)發這兩家小(xiǎo)程序平台，這套組件(jiàn)很合适。

關于 Ant Design MiniAnt

Design Mini 也簡稱 antd-mini ，是一(yī)套運行在支付寶小(xiǎo)程序的 UI 組件(jiàn)庫，UI 設計遵循 Ant Design 規範，目前已經正式加入到(dào)了 Ant Design 生(shēng)态，成為(wèi)官方的 UI 組件(jiàn)庫。

作為(wèi)一(yī)套遵循 Ant Design 設計規範的組件(jiàn)庫， Ant Design Mini 的 logo 沿用了 Ant Design 系列 logo 的基礎幾何圖形，設計理念來源于小(xiǎo)程序英文 “Mini Program” 中首字母 “M” 的變形，達到(dào)了和 Ant Design 一(yī)緻的視覺效果，我個(gè)人很喜歡這個(gè) logo。

技(jì)術(shù)特性

高(gāo)性能(néng)：不需要配置，自(zì)動優化最佳的包體積大小(xiǎo)，組件(jiàn)的運行也達到(dào)了極佳的性能(néng)；

支持定制外觀和主題：可以高(gāo)效地對組件(jiàn)外觀進行調整或創造自(zì)己的主題；

原子化：恰到(dào)好處的組件(jiàn)的功能(néng)，不多(duō)也不少；

手機(jī)端操作流暢：擁有流暢的手勢和細膩的動畫(huà)，讓開(kāi)發中很容易打造出極緻的用戶體驗。

開(kāi)發上(shàng)手體驗

1、npm 安裝

Ant Design Mini 是一(yī)套運行在支付寶小(xiǎo)程序中的組件(jiàn)庫，安裝很簡單：

$ npmiantd-mini--save

2、開(kāi)啓 component2

從(cóng) 2.11.0 版本起，需要開(kāi)啓 component2，開(kāi)啓後自(zì)定義組件(jiàn)會(huì)使用新的生(shēng)命周期運行模式。開(kāi)啓方法：在支付寶小(xiǎo)程序 IDE 中的詳情 > 項目配置中，勾選啓用 component2 編譯。

3、在頁面 json 文件(jiàn)中引入組件(jiàn)

{  "usingComponents": {    "ant-button":"antd-mini/es/Button/index"}}

4. 在 axml 文件(jiàn)中使用

<ant-button>我是一(yī)個(gè)按鈕</ant-button>

更詳細的組件(jiàn)使用方法可以查看(kàn)官網的文檔，非常簡單，如果有 Vue.js 或者是微信小(xiǎo)程序的基礎，直接可以上(shàng)手使用。

使用建議

Ant Design Mini 目前有超過 30 個(gè)通(tōng)用的基礎組件(jiàn)，包含導航、引導提示、信息展示、信息輸入、反饋五大類型，這些組件(jiàn)都源于螞蟻集團旗下(xià)衆多(duō)移動端業(yè)務産品，比如有支付寶、網商銀(yín)行等。經過設計師(shī)的升級改造，既符合 Ant Design 的設計規範又(yòu)滿足大部分的開(kāi)發需求。如果我們的業(yè)務需要上(shàng)架到(dào)支付寶，Ant Design Mini 和支付寶的風格、操作體驗很接近，是一(yī)個(gè)很好的選擇。

開(kāi)發支付寶小(xiǎo)程序産品的人可能(néng)都了解，很多(duō)小(xiǎo)程序其實都是功能(néng)型的，大多(duō)都是滿足當前業(yè)務中的某個(gè)模塊，所以組件(jiàn)都很實用。其實我在去年(nián)就(jiù)了解到(dào) Ant Design Mini 了，但由于國(guó)内各家小(xiǎo)程序都有自(zì)己的一(yī)套規範，這套組件(jiàn)一(yī)直支持運行在支付寶小(xiǎo)程序上(shàng)，應用範圍比較局限，因此一(yī)直沒有推薦給大家。不過從(cóng)上(shàng)個(gè)月(yuè)起，Ant Design Mini 就(jiù)開(kāi)始适配微信小(xiǎo)程序了，也就(jiù)是說這套組件(jiàn)可以運行在微信小(xiǎo)程序上(shàng)了，我們甚至還(hái)可以通(tōng)過 uni-app 來實現用 Ant Design Mini 編寫一(yī)套代碼同時發布到(dào)支付寶和微信小(xiǎo)程序上(shàng)，實用性大大增加。

注意事(shì)項

需要注意的是，目前 Ant Design Mini 的微信版還(hái)沒有适配完所有組件(jiàn)，處于 bata 版，商用還(hái)需要等等。另外，Ant Design Mini 是可以在 uni-app 中使用的，官網有配置方法，但這套組件(jiàn)不是 uni-app 所支持的跨端組件(jiàn)，無法一(yī)套代碼編譯到(dào)所有小(xiǎo)程序平台，目前隻支持支付寶小(xiǎo)程序，使用 uni-app 也支持為(wèi)了能(néng)使用 uni-app 的相(xiàng)關功能(néng)，提高(gāo)開(kāi)發效率而已。