唠一下uniui

认识一下

老板又提要求了，一周内要全面上线 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 无敌了。