Hi，我們做了一款高質(zhì)量的、免費的移動端UI框架。

經(jīng)過將兩年多開發(fā)和項目實踐，我們終于把Touch UI開放出來了。這是一套基于vue.js打造的移動端UI框架，包含近百種組件，幾乎囊括了開發(fā)移動應用的所有細節(jié)。

Touch UI有何亮點？

我們認為，一套足夠好的移動端UI框架應該滿足4個要素。

1、豐富的組件和易用的API

我們在做這套UI框架時，分析了大量的主流的移動應用，從中抽象出將近100種組件。囊括了容器布局、切換、模態(tài)、表單、列表、文本、多媒體、圖形圖表、地圖等各個方面。 我們希望開發(fā)者在開發(fā)移動應用時，不必把精力花在到處找組件、處理兼容等事情上，而是能夠?qū)Ｗ⒂跇I(yè)務，真正實現(xiàn)組件拿來即用，像搭積木一樣開發(fā)移動應用。

2、友好的移動交互

跟PC開發(fā)不同，移動端的UI應該具備友好的移動端交互，例如上拉下拉、手指滑屏、按下滑動等等。我們在這些方面做了充分的考慮，每個組件都是針對移動端精心打造，追求原生級別的操作體驗。

3、優(yōu)秀的性能

如何在功能豐富的基礎上還能保證高性能，是我們做這套框架的一個很大挑戰(zhàn)。為此，我們做了大量的工作來優(yōu)化性能，例如按需編譯、資源拆分加載等等?，F(xiàn)在基本可以達到點擊頁面秒開的效果。

4、良好的開發(fā)體驗

前端工程化的出現(xiàn)，大大提高了前端項目的開發(fā)效率并降低維護成本，但對于完全沒有經(jīng)驗的傳統(tǒng)前端工程師來說，各種的環(huán)境配置和依賴安裝還是有不小的門檻。 基于微軟VSCode編輯器的插件機制，我們把前端工程化所需要的做的各種構建、編譯環(huán)節(jié)全部封裝起來，給開發(fā)者提供可視化右鍵菜單，從而簡化環(huán)境配置并降低入門門檻。同時，Touch UI框架和組件也都在插件里面，這樣當框架有升級時，開發(fā)者通過在線升級插件的方式就可以更新Touch UI，非常方便。

One More Thing

我們同時還推出了一套微信小程序UI框架：TouchUI-WX，它增加了30多種常用的組件用于官方組件的補充，并且擴充了不少功能，例如支持阿里的iconfont矢量圖標庫，支持less語法等。

最重要的是，你可以將Touch UI工程與TouchUI-WX工程相互進行轉換。實現(xiàn)開發(fā)一套代碼，發(fā)布H5和微信小程序兩種應用。

官網(wǎng)：www.touchui.io

Github：github.com/uileader/to…

總結

以上是生活随笔為你收集整理的Touch UI：高质量的移动端UI框架介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。