认识一下
老板又提要求了，一周内要全面上线APP端、H5端、微信小程序、支付宝小程序、百度小程序、字节跳动小程序...... 爆肝吗？跑路吗？莫慌，uni-ui来拯救你。
首先uni-ui是什么？用一句话来描述：uni-ui是uni-app内置组件的扩展。uni-app是一个使用Vue.js开发所有前端应用的框架，作为uni-app的扩展组件库uni-ui自然少不了全端兼容。
最近uni-ui做了一系列大改动，包括性能优化、功能扩展。现在在最新的uni-ui中已经全面兼容nvue了。
深入一点
你可能会想在不需要发布到所有端的时候，其他端的代码对项目会不会有影响。关于这点可以完全放心，得益于uni-app的条件编译机制，在编译阶段就会把非本端代码去除掉，完全不用担心会产生多余代码。我们的目标是通过条件编译让uni-ui实现多端均为最优解。下面我们举个简单例子来看一下uni-ui是如何把uni-app特性发扬光大的。
条件编译
话不多说先上代码：
<!-- #ifdef APP-NVUE -->
<loading-indicator v-if="status === 'loading' && showIcon" :style="{color: color}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
<!-- #endif -->
<!-- #ifdef H5 -->
<svg width="24" height="24" viewBox="25 25 50 50" v-if="(iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
class="uni-load-more__img uni-load-more__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" stroke-width="3"></circle>
</svg>
<!-- #endif -->上面这段代码来自uni-ui的uni-load-more组件，在nvue内使用weex的loading-indicator组件实现APP端最完美的加载效果，在H5端使用svg模拟安卓端加载动画也是目前最常用的方式。当然这些内部实现用户都不用关心，达到最优效果才是用户需要的。
富交互解决方案
目前小程序的框架主流是分为视图层和逻辑层，uni-app的APP端也是。而视图层逻辑层分离的情况下频繁用户交互的效果通常表现是比较卡顿的。所以微信小程序推出了wxs，阿里推出了适用于weex的bindingX（tips: uni-app可以将wxs代码编译到微信小程序、QQ小程序、APP、H5上）。
在同一个组件内用wxs、bindingX和普通方式是一件让人头疼的事，写起来也十分的别扭。但是不用担心，uni-ui已经帮你做好了。在一些uni-ui组件内（比如：uni-swipe-action）通过条件编译在支持富交互解决方案的条件下，使用wxs、bindingX实现更加流畅的交互效果。代码就不贴上来了，Github传送门。bindingX那部分代码很快就会调整完毕放到这个仓库，敬请期待。
其他特性
还有一些uni-ui优化的点就不在详细说了，这里随便列几个
-
uni-ui继承了uni-app的自动差量更新特性，开发小程序再也不怕数不清的setData了 -
uni-ui内对一些有动画的组件做了特殊处理，页面隐藏后动画不执行，目前仅限APP端，后续会在各个小程序端实现 - 相关组件集成uni统计打点，了解一下一张报表看全端的uni统计
最后
与web开发不同，uni-ui不包括基础组件，它是uni-app基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
uni-ui目前还有不少缺点，比如没有多语言、界面略丑等等。我们目前也在完善uni-ui的各个方面，如果你有任何想让我们改进的地方，都可以去论坛、Github向我们提出来。
最后的最后
写完这篇文章必须得强力吹一波HBuilderX，毫不谦虚的说写markdown无敌了。