如何在uni-app中选择一个合适的UI组件库
https://blog.csdn.net/qq_47443027/article/details/119734230
火兰
于 2021-08-16 15:27:13 发布
4782
收藏 3
分类专栏： uniapp
版权
uniapp
专栏收录该内容
2 篇文章0 订阅
订阅专栏
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-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 组件库
————————————————
版权声明：本文为CSDN博主「火兰」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_47443027/article/details/119734230
标签：vue,app,程序,ui,UI,组件,uni 来源： https://www.cnblogs.com/webSnow/p/16525440.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。