如何在uni-app中选择⼀个合适的UI组件库
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中⽤起来，就显得有些困难了。可能需要改动许多代码，才能在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-u i属于vue组件，uni-app引擎底层⾃动diff更新数据。哪怕遇到⼤数据和⾼频更新数据时，表现都会⽐⼿动setData要好很多。
在插件市场⾥众多 vue 组件都具备这个特点。
3
优化逻辑层和视图层通讯折损
⽬前不论⼩程序还是app的webview渲染，全都是逻辑层和视图层分离的。
这样就会涉及到逻辑层和视图层的⼀个通讯问题。⽐如在视图层拖动⼀个可跟⼿的组件，由于通讯的损耗，⽤ js 监听很难做到实时跟⼿的操作。
这时就需要使⽤css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都⽐较复杂，所以uni-ui在在需要跟⼿式操作的ui组件⾥做了封装，⽐如uni-swiper-action列表项左滑菜单，就在底层使⽤了这些技术，实现了⾼性能的交互体验。
3
总结⼀下
mui框架常用组件有哪些尽管现在 uni-ui 可能在某些⽅⾯还不是很完美，但是在 uni-app 框架中⽆疑是优先的选择。
⽆论是 uni-ui 的跨端能⼒还是性能，在⼩程序和混合 app 领域，暂时还没有⽐ uni-ui 更好的选择。
如果⼤家有什么更好的建议，或者很棒的实现，都可以到 uni-ui 的 github 上提 Issues 和 PR，共同维护起来⼀个好⽤的 UI 组件库。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。