詳解：如何在uni-app中選擇一個(gè)合適的UI組件庫(kù)

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：96


uni-app

框架轉(zhuǎn)眼已經(jīng)發(fā)布了一年多，使用uni-app的開(kāi)發(fā)者也是與日俱增。因?yàn)?/span>uni-app是一個(gè)跨端框架，所以我們大多使用它就是為了同時(shí)一套代碼跨多端，選擇uni-app 可以算是眼下一個(gè)比較好的選擇。

無(wú)疑，uni-app是一個(gè)冉冉升起的新星，同樣帶給我們的一個(gè)問(wèn)題就是與之配套的 UI 組件庫(kù)卻沒(méi)有那么多的選擇。而我們開(kāi)發(fā)應(yīng)用，組件庫(kù)又是一個(gè)不可或缺的輔助開(kāi)發(fā)的利器。

那么有沒(méi)有一個(gè)好用，且性能又比較不錯(cuò)的組件庫(kù)供我們?cè)?/span>uni-app中使用呢？

組件庫(kù)選擇

首先一個(gè)問(wèn)題就是UI組件庫(kù)怎么選擇？

vue 組件庫(kù)

因?yàn)?/span>uni-app是基于vue開(kāi)發(fā)所有前端應(yīng)用的框架，那么我們肯定首先想到的就是vue組件庫(kù)可不可以用。

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

比如說(shuō) Mint UI 、Vant 、Mui、vonic等等。

我們知道uni-app雖然基于vue開(kāi)發(fā)，但是同時(shí)還要遵循小程序的開(kāi)發(fā)規(guī)范。

所以像小程序開(kāi)發(fā)一樣，uni-app中同樣的沒(méi)有document、window對(duì)象。

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

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

這就導(dǎo)致我們不能在uni-app中使用許多通常前端開(kāi)發(fā)中的操作。所以純前端開(kāi)發(fā)的 vue組件庫(kù)在我們的uni-app中用起來(lái)，就顯得有些困難了?？赡苄枰膭?dòng)許多代碼，才能在uni-app中正常運(yùn)行，或者干脆跑不起來(lái)。

小程序自定義組件庫(kù)

既然說(shuō) vue 組件庫(kù)不能使用，那么小程序組件庫(kù)可以支持么？

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

但是需要注意的是，雖然支持了小程序組件，并不是說(shuō)就能在全平臺(tái)都能運(yùn)行。我們選擇 uni-app 本來(lái)就是為了跨端，而使用小程序組件庫(kù)，卻只能在對(duì)應(yīng)的小程序平臺(tái)使用，這顯然也不再我們的預(yù)期內(nèi)。

如果只兼容微信小程序平臺(tái)這里推薦兩個(gè)好用的組件庫(kù)：

Vant Weapp
iView Weapp

uni-app 組件庫(kù)

那么想要在 uni-app 中開(kāi)心的使用組件庫(kù)，還是使用 uni-app 框架開(kāi)發(fā)的組件庫(kù)用起來(lái)更順手。

好在 uni-app 有插件市場(chǎng)，給我們提供了很多的組件，但總歸沒(méi)有太多成體系的組件庫(kù)。

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

uni-ui

剛開(kāi)始的時(shí)候，使用 uni-ui 簡(jiǎn)直是一言難盡，總感覺(jué)誠(chéng)意不足。不過(guò)隨著 uni-app 的版本迭代，似乎官方也開(kāi)始在 uni-ui 上花心思了。

一改之前的 BUG 不斷，性能不足的窘迫。也開(kāi)始奮起直追，目前 uni-ui 內(nèi)組件還在不斷的更新、優(yōu)化，基本上可以維持我們項(xiàng)目的基本開(kāi)發(fā)。

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

跨端能力

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

小程序端的組件是可以支持的，但是也僅僅是支持對(duì)應(yīng)平臺(tái)。例如 Vant Weapp 、iView Weapp 等小程序組件庫(kù)也只是能在微信小程序平臺(tái)運(yùn)行，跨端能力遠(yuǎn)遠(yuǎn)滿足不了我們的需求。

而 uni-ui 畢竟是 uni-app 親兒子，能力雖有些不足，但是它也有自己的有優(yōu)點(diǎn)，這點(diǎn)就表現(xiàn)在跨端能力上。

uni-ui 的組件都是多端自適應(yīng)的，底層會(huì)抹平很多小程序平臺(tái)的差異或 bug。

比如 uni-swiper-action 組件，在 app、h5和微信小程序上會(huì)使用交互體驗(yàn)更好的 wxs 技術(shù)，但在不支持 wxs 的其他小程序端會(huì)使用 js 模擬達(dá)到類(lèi)似效果，使我們?cè)诳缍说耐瑫r(shí)，而性能還能得到保障。而以上這些我們開(kāi)發(fā)者只要拿來(lái)組件開(kāi)箱即用。

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

更新數(shù)據(jù)

雖然uni-app支持小程序自定義組件。但小程序自定義組件的組件庫(kù)都需要使用 setData手動(dòng)更新數(shù)據(jù)，在大數(shù)據(jù)量時(shí)、或高頻更新數(shù)據(jù)時(shí)，很容易產(chǎn)生性能問(wèn)題。

而uni-ui屬于vue組件，uni-app引擎底層自動(dòng)diff更新數(shù)據(jù)。哪怕遇到大數(shù)據(jù)和高頻更新數(shù)據(jù)時(shí)，表現(xiàn)都會(huì)比手動(dòng)setData要好很多。

在插件市場(chǎng)里眾多 vue 組件都具備這個(gè)特點(diǎn)。

優(yōu)化邏輯層和視圖層通訊折損

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

這樣就會(huì)涉及到邏輯層和視圖層的一個(gè)通訊問(wèn)題。比如在視圖層拖動(dòng)一個(gè)可跟手的組件，由于通訊的損耗，用 js 監(jiān)聽(tīng)很難做到實(shí)時(shí)跟手的操作。

這時(shí)就需要使用css動(dòng)畫(huà)以及平臺(tái)底層提供的wxs、bindingx等技術(shù)。不過(guò)這些技術(shù)都比較復(fù)雜，所以uni-ui在在需要跟手式操作的ui組件里做了封裝，比如uni-swiper-action列表項(xiàng)左滑菜單，就在底層使用了這些技術(shù)，實(shí)現(xiàn)了高性能的交互體驗(yàn)。