嘮一下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無敵了。