認識一下
老闆又提要求了，一週內要全面上線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無敵了。