微信小程序開發，頁面編寫佔比較高，熟悉 html 和 css 的同學，建議直接使用 html+css ，不熟悉的同學則可以使用下面任意一個UI框架 ，就像在報修小程序中，我們是有使用了一點 iView WeApp 。
下面我總結一下市面上比較常用的幾款 UI 框架 ，並給出我的使用心得，供大家參考。
1、WeUI
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub 地址：https://github.com/Tencent/weui
效果：https://weui.io
開發文檔參考：https://github.com/Tencent/weui/wiki
使用心得：
WeUI 使用簡單，風格微信原生風格，以綠色爲主色 ，主要是兩個大版本 ，1.x版本和2.x版本 ，相比1.x版本來說，2.x版本視覺上更好。
WeUI 使用第一個問題 ，文檔不是很詳細 ，訪問 https://weui.io 能看到效果圖，沒有直觀的顯示效果對應的代碼 ，從開發角度來說，文檔不夠直接，使用不是很方便。
WeUI 使用第二個問題是：風格與微信視覺體驗一致，在開發中我們需要更豐富漂亮的UI效果 ，需要修改WeUI的樣式或自定義css 。
2、iView Weapp （在項目中有使用）
iView Weapp是由 TalkingData 發佈的組件庫，一套高質量的
微信小程序 UI 組件庫。
GitHub 地址：https://github.com/TalkingData/iview-weapp
開發文檔：https://weapp.iviewui.com/docs/guide/start
使用心得：
1、優點：提供了豐富的UI組件，尤其是 tabBar、Tabs、抽屜、index索引 ，使用比較方便 。
2、缺點：頁面風格比較固定、修改起來比較困難。輸入框在模擬器下經常無法輸入，給應用調試帶來了麻煩。
3、ColorUI
鮮亮的高飽和色彩，專注視覺的小程序組件庫
GitHub 地址：https://github.com/weilanwl/ColorUI
開發文檔參考（編輯中）：https://www.color-ui.com
使用心得：
1、優點：視覺效果漂亮，注意看一下，他可以將樣式沉浸到手機最頂部，這一點很好，同時其他組件也挺好，可針對自己的需求，直接修改或覆蓋他的css樣式。
2、缺點：缺少文檔、很多新人無從下手。掃碼預覽時，近期廣告有些頻繁，影響使用，開發者也想有點費用，大家理解，喜歡的可以對開發者點廣告支持，開源不易。
4、Vant Weapp
Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基於相同的視覺規範，提供一致的 API 接口，助力開發者快速搭建小程序應用。
GitHub 地址：https://github.com/youzan/vant-weapp
開發文檔參考：https://youzan.github.io/vant-weapp/#/intro
使用心得：
1、優點：視覺效果簡單明朗、提供了日常開發使用的組件、文檔很詳細。
2、缺點：門檻相比其他幾個UI框架高，需要會 vue 的開發者，同時不支持原生開發。像我這樣對 vue 不是很熟悉的，不建議使用，比較熟悉 vue 的推薦使用。
5、TaroUI
Taro UI 是一款由凹凸實驗室打造、基於 Taro 編寫的多端 UI 組件庫。除了高顏值，Taro UI 最大的亮點就是支持多端運行。Taro UI 藉助 Taro 支持多端運行的特點，只需解決不同平臺 CSS 的表現差異問題，就可以在微信小程序/ H5 / ReactNative 等多端適配運行。
官方地址：https://taro-ui.jd.com/#/
1、優點：Taro UI 可謂神通廣大，功能豐富，開發一套代碼可以可以在微信小程序 / H5 / 百度小程序 等多端適配運行。
2、缺點：入門門檻高，不適合新人開發者。相對而言，使用的人數不夠多，開發中出現問題排查困難。只用在微信小程序開發上，大材小用了，殺雞焉用宰牛刀！
總結：
以上五個框架，對於新手來說、前四個可以使用，最後一個拓展瞭解。對於有 css 基礎的同學，參照他們的樣式，自己編寫 css 比較靈活。
往期文章：
flask 程序後臺源碼安裝部署（微信報修小程序源碼講解一）
flask 啓動程序與路由的使用（微信報修小程序源碼講解二）
flask 攔截器與session的使用（微信報修小程序源碼講解三）
flask mysql 數據庫增刪改查（微信報修小程序源碼講解四）
flask blueprint 藍圖與 url_for 的使用（微信報修小程序源碼講解五）
微信小程序授權登錄與用戶信息保存詳解（微信報修小程序源碼講解六）
小程序與後臺 api接口數據交互詳解（微信報修小程序源碼講解七）
手把手教你完成微信小程序用戶信息綁定（微信報修小程序源碼講解八）
歡迎關注個人微信公衆號，與我交流！
