阅读 1014

uni-ui 1.0 正式发布:高效的移动端 Vue 跨端UI库

前言

众所周知,浏览器的兼容问题一直为人诟病,为了解决跨端兼容问题,DCloud官方推出了一款官方UI库——uni-ui

我们的目标是更快、更简单开发出,基于 Vue 的一款可以兼容多端小程序及App美观易用的跨端UI库。如果你需要开发一个跨端应用,不想自己去解决兼容性问题,又想要性能高,那么使用 uni-ui 是你的首选。

现有组件

uni-ui现有组件

开发理念

性能

uni-app除了vue版还有nvue版,nvue是在App端使用weex渲染引擎,提供了原生渲染能力。使用nvue开发,可以让开发者的App启动更快,性能更好。

weex中,css的书写有很大的限制,例如只能用一层类名来写css。于是我们帮助开发者提前写好了一些常用的组件,完全做到开箱即用。uni-uinvue版本就是用于nvue页面的ui库。

作为移动端组件库,uni-ui 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系,我们尝试了很多的优化方式,包括支持组件按需加载、公共模块复用、组件编译流程优化等。

在使用一系列的优化手段之后,目前 uni-ui 的组件编译出来的apk,在低端安卓机安装后依然可以流畅运行。uni-ui 之所以在低端安卓机还能保持如此流畅,主要归功于我们独特的优化方式。我们针对安卓低端机进行了专项的性能分析,分析出每一个css属性对性能对影响,写代码的时候尽量去避免使用对性能有影响的css属性。我们还做了算法上的优化,降低了时间复杂度及空间复杂度,细节在此不做赘述,有兴趣的同学可以看下 uni-ui 中部分的源码。在此附上源码链接:uni-ui

跨端性

uni-ui最强大的特性就是在于它的跨端性。

uni-uiDCloud前端团队基于DCloud统一的规范实现的 Vue 跨端组件库,写一套代码即可编译到 iOSAndroidH5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等平台。

实现使用一套UI,在多端表现统一。兼容性问题我们已经帮开发者们做好了,让开发者免去手动兼容的苦恼。我们提供了一整套 UI 基础组件和业务组件,通过 uni-ui,可以快速搭建出风格统一的页面,提升开发效率。目前uni-ui已有近30个组件。我们会在此基础上不断完善,开发更多实用的组件。

生态化

除了提供组件以外,我们也在为丰富 uni-ui 的开发生态做很多尝试,希望能覆盖各个场景下的开发需求,为大家提供便利。下面是我们现有的一些生态或能力:

  • 基于 vue-cli 的脚手架 dcloudio/uni-preset-vue
  • 支持 i18n 多语言定制
  • 支持通过 postcss 插件进行主题定制
  • 性能更好的nvueuni-ui
  • 官方 Demo 仓库 - uni-ui

最后

uni-ui 现在还有很多不足。很多组件才刚起步,不够完善,需要补充更多业务组件到 uni-ui 中。期望得到大家的批评和建议,一起建立一个更好的 uni-ui。 完整代码请移步 uni-ui

扫码立即体验