uni-app框架轉眼已經發布了一年多，使用uni-app的開發者也是與日俱增。因為uni-app是一個跨端框架，所以我們大多使用它就是為了同時一套代碼跨多端，選擇uni-app 可以算是眼下一個比較好的選擇。

無疑，uni-app是一個冉冉升起的新星，同樣帶給我們的一個問題就是與之配套的 UI 組件庫卻沒有那么多的選擇。而我們開發應用，組件庫又是一個不可或缺的輔助開發的利器。

那么有沒有一個好用，且性能又比較不錯的組件庫供我們在uni-app中使用呢？

1

組件庫選擇

首先一個問題就是UI組件庫怎么選擇？

1

vue 組件庫

因為uni-app是基于vue開發所有前端應用的框架，那么我們肯定首先想到的就是vue組件庫可不可以用。

首先排除PC端的組件庫如ElementUI、iview這些，可供我們選擇移動端的 vue 組件庫也有很多。

比如說 Mint UI 、Vant 、Mui、vonic等等。

我們知道uni-app雖然基于vue開發，但是同時還要遵循小程序的開發規范。

所以像小程序開發一樣，uni-app中同樣的沒有document、window對象。

而且我們看到官方文檔中有提及到:

uni-app只支持vue單文件組件（.vue組件）。其他的諸如：動態組件，自定義 render，和 <script type="text/x-template"> 字符串模版等，在非H5端不支持。

這就導致我們不能在uni-app中使用許多通常前端開發中的操作。所以純前端開發的 vue組件庫在我們的uni-app中用起來，就顯得有些困難了?？赡苄枰膭釉S多代碼，才能在uni-app中正常運行，或者干脆跑不起來。

2

小程序自定義組件庫

既然說 vue 組件庫不能使用，那么小程序組件庫可以支持么 ？

答案是可以，小程序組件是得到官方支持的，詳看小程序組件支持。

但是需要注意的是，雖然支持了小程序組件，并不是說就能在全平臺都能運行。我們選擇 uni-app 本來就是為了跨端，而使用小程序組件庫，卻只能在對應的小程序平臺使用，這顯然也不再我們的預期內。

如果只兼容微信小程序平臺這里推薦兩個好用的組件庫：

• Vant Weapp
• iView Weapp

3

uni-app 組件庫

那么想要在 uni-app 中開心的使用組件庫，還是使用 uni-app 框架開發的組件庫用起來更順手。

好在 uni-app 有插件市場，給我們提供了很多的組件，但總歸沒有太多成體系的組件庫。

那可供我們選擇的只有官方的 uni-ui 組件庫。

2

uni-ui

剛開始的時候，使用 uni-ui 簡直是一言難盡，總感覺誠意不足。不過隨著 uni-app 的版本迭代，似乎官方也開始在 uni-ui 上花心思了。

一改之前的 BUG 不斷，性能不足的窘迫。也開始奮起直追，目前 uni-ui 內組件還在不斷的更新、優化，基本上可以維持我們項目的基本開發。

現在我為什么要推薦大家使用 uni-ui 而不是使用其他三方的組件庫呢？

1

跨端能力

上述我們我們已經提到，使用 vue 組件庫，基本上是行不通的，除非你有能力改造大量組件，來兼容 uni-app ，所以目前我們不推薦使用，看之后官方的更新，以及對 vue 前端組件的支持 。

小程序端的組件是可以支持的，但是也僅僅是支持對應平臺。例如 Vant Weapp 、iView Weapp 等小程序組件庫也只是能在微信小程序平臺運行，跨端能力遠遠滿足不了我們的需求。

而 uni-ui 畢竟是 uni-app 親兒子，能力雖有些不足，但是它也有自己的有優點，這點就表現在跨端能力上。

uni-ui 的組件都是多端自適應的，底層會抹平很多小程序平臺的差異或 bug。

比如 uni-swiper-action 組件，在 app、h5和微信小程序上會使用交互體驗更好的 wxs 技術，但在不支持 wxs 的其他小程序端會使用 js 模擬達到類似效果，使我們在跨端的同時，而性能還能得到保障。而以上這些我們開發者只要拿來組件開箱即用。

不僅如此，uni-ui 的組件還支持了 nvue 的原生渲染，媽媽終于不用擔心我在 nvue 中沒有組件可以用了。

2

更新數據

雖然uni-app支持小程序自定義組件。但小程序自定義組件的組件庫都需要使用 setData手動更新數據，在大數據量時、或高頻更新數據時，很容易產生性能問題。

而uni-ui屬于vue組件，uni-app引擎底層自動diff更新數據。哪怕遇到大數據和高頻更新數據時，表現都會比手動setData要好很多。

在插件市場里眾多 vue 組件都具備這個特點。

3

優化邏輯層和視圖層通訊折損

目前不論小程序還是app的webview渲染，全都是邏輯層和視圖層分離的。

這樣就會涉及到邏輯層和視圖層的一個通訊問題。比如在視圖層拖動一個可跟手的組件，由于通訊的損耗，用 js 監聽很難做到實時跟手的操作。

這時就需要使用css動畫以及平臺底層提供的wxs、bindingx等技術。不過這些技術都比較復雜，所以uni-ui在在需要跟手式操作的ui組件里做了封裝，比如uni-swiper-action列表項左滑菜單，就在底層使用了這些技術，實現了高性能的交互體驗。

3

總結一下

盡管現在 uni-ui 可能在某些方面還不是很完美，但是在 uni-app 框架中無疑是優先的選擇。

無論是 uni-ui 的跨端能力還是性能，在小程序和混合 app 領域，暫時還沒有比 uni-ui 更好的選擇。

如果大家有什么更好的建議，或者很棒的實現，都可以到 uni-ui 的 github 上提 Issues 和 PR，共同維護起來一個好用的 UI 組件庫。