唠一下uni-ui

认识一下

老板又提要求了，一周内要全面上线APP端、H5端、微信小程序、支付宝小程序、百度小程序、字节跳动小程序...... 爆肝吗？跑路吗？莫慌，uni-ui来拯救你。

首先uni-ui是什么？用一句话来描述：uni-ui是uni-app内置组件的扩展。uni-app是一个使用Vue.js开发全部前端应用的框架，做为uni-app的扩展组件库uni-ui天然少不了全端兼容。

最近uni-ui作了一系列大改动，包括性能优化、功能扩展。如今在最新的uni-ui中已经全面兼容nvue了。

• 什么是nvue
• 去Github围观一下

深刻一点

你可能会想在不须要发布到全部端的时候，其余端的代码对项目会不会有影响。关于这点能够彻底放心，得益于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无敌了。