1. 程式人生 > >Touch UI:高質量的移動端UI框架介紹

Touch UI:高質量的移動端UI框架介紹

  Hi,我們做了一款高質量的、免費的移動端UI框架。

  經過將兩年多開發和專案實踐,我們終於把Touch UI開放出來了。這是一套基於vue.js打造的移動端UI框架,包含近百種元件,幾乎囊括了開發移動應用的所有細節。

Touch UI有何亮點?

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

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

我們在做這套UI框架時,分析了大量的主流的移動應用,從中抽象出將近100種元件。囊括了容器佈局、切換、模態、表單、列表、文字、多媒體、圖形圖表、地圖等各個方面。

我們希望開發者在開發移動應用時,不必把精力花在到處找元件、處理相容等事情上,而是能夠專注於業務,真正實現元件拿來即用,像搭積木一樣開發移動應用。

2、友好的移動互動

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




3、優秀的效能

如何在功能豐富的基礎上還能保證高效能,是我們做這套框架的一個很大挑戰。為此,我們做了大量的工作來優化效能,例如按需編譯、資源拆分載入等等。現在基本可以達到點選頁面秒開的效果。

4、良好的開發體驗

前端工程化的出現,大大提高了前端專案的開發效率並降低維護成本,但對於完全沒有經驗的傳統前端工程師來說,各種的環境配置和依賴安裝還是有不小的門檻。

基於微軟VSCode編輯器的外掛機制,我們把前端工程化所需要的做的各種構建、編譯環節全部封裝起來,給開發者提供視覺化右鍵選單,從而簡化環境配置並降低入門門檻。同時,

Touch UI框架和元件也都在外掛裡面,這樣當框架有升級時,開發者通過線上升級外掛的方式就可以更新Touch UI,非常方便。


One More Thing

我們同時還推出了一套微信小程式UI框架:TouchUI-WX,它增加了30多種常用的元件用於官方元件的補充,並且擴充了不少功能,例如支援阿里的iconfont向量圖示庫,支援less語法等。


最重要的是,你可以將Touch UI工程與TouchUI-WX工程相互進行轉換。實現開發一套程式碼,釋出H5和微信小程式兩種應用。