小程序開發使用什么ui框架（小程序開發使用什么ui框架軟件）

今天給各位分享小程序開發使用什么ui框架的知識，其中也會對小程序開發使用什么ui框架軟件進行解釋，如果能碰巧解決你現在面臨的問題，別忘了關注本站，現在開始吧！

本文目錄一覽：

• 1、微信小程序ui框架有哪些
• 2、前端ui框架排名
• 3、web前端框架有哪些?
• 4、vue的ui框架有哪些
• 5、Taro 3.3 alpha 發布：用 ant-design 開發小程序？
• 6、小程序開發用什么框架

微信小程序ui框架有哪些

微信小程序開發，是目前火爆的開發方式，也是適應中小企業快速解決的一個方案。選擇一個合適自己的開發UI框架，能夠讓自己開發速度提升數倍。

推薦兩個小程序UI框架：

WeUI

WeUI是由微信官方設計團隊分別支持微信H5網頁和微信原生小程序的開源UI組件

ColorUI

ColorUI是開源且支持原生小程序的UI組件，由于我目前在幫朋友改一個原生的微信小程序，所以就選擇了這款開源組件。

前端ui框架排名

在前端項目開發過程中，現在很少有人會使用原生的CSS來搭建頁面，總歸都會引入一些前端UI框架以減少代碼的書寫。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時也會把其開源出來。下面就是最近經常使用并且很流行的一些前端UI框架，總有一款適合你：

Mint UI

Mint UI

Mint UI是餓了么團隊開發的基于Vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。

WeUI

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素。

Cube-ui

Cube-ui

Cube-ui 是滴滴團隊開發的基于 Vue.js 實現的精致移動端組件庫。支持按需引入和后編譯，輕量靈活；擴展性強，可以方便地基于現有組件實現二次開發。

iView UI

iView UI

iView UI是一個強大的UI庫，基于vue，有很多實用的基礎組件比elementui的組件更豐富，主要服務于 PC 界面的中后臺產品。使用單文件的 Vue 組件化開發模式 基于 npm + webpack + babel 開發，支持 ES2015 高質量、功能豐富 友好的 API ，自由靈活地使用空間。

LayUI

LayUI

LayUI是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。

ElementUI

ElementUI

Element是餓了么前端開源維護的Vue UI組件庫,組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細，例子也很豐富。 主要用于開發PC端的頁面，是一個質量比較高的Vue UI組件庫。

at-ui

at-ui

at-ui 是一款阿里團隊創建的基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發 PC 網站產品。 它提供了一套 npm + webpack + babel 前端開發工作流程，CSS 樣式獨立，即使采用不同的框架實現都能保持統一的 UI 風格。

amaze UI

amaze UI

Amaze UI 是一個移動優先的跨屏前端框架。提供基礎樣式，網格，表格、表單、按鈕及常用組件樣式。是一個輕量級（所有 CSS 和 JS gzip 后 100 kB 左右）、?Mobile first?的前端框架

Vant UI

Vant UI

Vant UI是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。

Flutter

Flutter

Flutter 是谷歌的移動端 UI 框架，可在極短的時間內構建 Android 和 iOS 上高質量的原生級應用。 Flutter 可與現有代碼一起工作, 它被世界各地的開發者和組織使用, 并且 Flutter 是免費和開源的.

ionic

Ionic既是一個CSS框架也是一個Javascript UI庫,Ionic 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序，它 提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。

web前端框架有哪些?

對于想轉行的小伙伴，小蝸這里整理了一份系統的學習路線，可按照這份大綱一步一步來學習，先將基礎打好，再學習框架部分，希望可以幫到你~

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿制任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿制任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web后臺技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變量的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分之結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟件開發流程、算法、變量、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：數據庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb數據庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發后臺應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、數據庫知識，范式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb數據庫。深入理解數據庫管理系統通用知識及MySQL數據庫的使用與管理，為Node.js后臺開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL數據庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和后臺開發框架完成Web系統的后臺開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，數據庫設計，后臺開發，使用vue、node完成pc和移動端整站開發。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能并上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Redux基本概念。練使用react完成項目開發、掌握Redux中的異步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網絡請求、打包。練掌握react-native和Flutter框架，并分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前后端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、后臺管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

web前端學習路線思維導圖

vue的ui框架有哪些

elementUI

2.iview

這個UI框架是對標elementUI而生的，最大優點是官方有桌面版配置工具，只需使用鼠標就可以構建一個基于iview+vue的應用，免去手巧命令的煩惱。最新的版本為3.x。建議對elementUI框架審美疲勞的同學可以嘗試這個呦。官方網站的文檔和例子基本上你是小白也能學明白。

3.zanUI

由有贊團隊開源的移動端UI框架，對于移動電商應用的開發來說，有很多寫好的頁面組件，可以直接拿來使用。當然zanUI的樣式也是很好看的。當然也有PC端組件，和小程序端。zanUI一共分三個版本，針對移動端的為vantUI，PC端為zentUI，小程序端為Vant Weapp。

4.onsenUI

onsenUI的組件樣式

這個UI框架是國外開發，所以UI設計，很多都是迎合國外用戶，對于國內用戶，可能不是很好看，但是做為主打海外市場的應用，這個UI框架還是值得去使用的。

5.mintUI

這個是一個中規中矩的移動端UI框架，適合移動端的絕大部分場景。

6.museUI

這個框架還是比較有特色的，不管怎么說，這類不隨波逐流的UI框架已經很少見了，但是還是建議使用在主打海外市場的應用上。

Taro 3.3 alpha 發布：用 ant-design 開發小程序？

小程序的設計并沒有完全遵循 Web 規范，導致小程序生態和傳統 Web 開發生態之間的割裂，海量優秀的 Web 物料并不能直接用于小程序開發。因而 Taro 在相當一段時間內生態都相對薄弱，UI 框架選擇不多的問題更是深深困擾著開發者。

另一方面，業界有著存量的 H5 應用，中短期內 H5 應用適配到小程序端的需要還會存在。我們希望能減少 H5 應用遷移到小程序端的成本，甚至能夠直接運行在小程序端。

Taro 團隊一直在思考如何最大限度地在小程序環境中復用 Web 生態，直到 Taro 3.0 誕生后，這種想法有了落地的可能。下文將介紹基于 Taro 3.0 實現 H5 同構的思路與問題，以及我們嘗試適配了三大移動端 UI 框架 WEUI 、 Ant Design Mobile 、 VantUI 的實驗結果。

Taro 3.0 是一款重運行時的跨端框架，它通過模擬實現瀏覽器的 BOM 和 DOM API 實現了對 React、Vue 等 Web 開發框架的兼容。

既然已經有了瀏覽器環境的 BOM 和 DOM API，Taro 應用和 Web 應用之間的鴻溝在于小程序組件和 HTML 標簽之間的差異。

Taro3 的渲染數據流如下：

前端框架 - Taro DOM - 小程序 data

HTML 標簽和小程序組件的標簽名、屬性、事件是有差異的，而前端框架無需感知這些差異。

因此前端框架適配層、Taro DOM 層不需要改動，只要在 Taro DOM 序列化為小程序 data 這一步作映射即可。

HTML 標簽相對小程序組件封裝程度更低、功能更簡單，可以看作是小程序組件的子集。因此可以按一定的規則，把 HTML 標簽映射為小程序組件，如：

完整的標簽名映射規則請看： RFC 附錄一

如果 HTML 標簽的屬性能在對應小程序組件的屬性上找到對應，則進行映射，如：

完整的屬性名映射規則請看： RFC 附錄二

把 HTML 特有的事件在小程序端找到相似的事件進行映射，如：

完整的事件映射規則請看： RFC 附錄三

前文介紹了我們會把 HTML 標簽映射為小程序組件，但是 H5 應用中使用到的 CSS 標簽選擇器就會失效。

因此 Taro 使用了類名去進行模擬：

Taro 提供兩種內置的瀏覽器默認樣式，可以直接引入生效：

理想很美好，但現實卻略顯骨感。即使 Taro 能實現 BOM、DOM API，支持使用 HTML 標簽等，同構方案還是存在著一些框架層面抹平不了的差異。以下列舉出若干主要限制：

在 H5 中我們可以調用 DOM API 同步獲取元素的尺寸：

但是在小程序中，獲取元素尺寸的 API 是異步的：

因此不能兼容那些使用了同步 DOM API 去獲取元素尺寸的組件。

canvas 、 video 、 audio 等標簽在 H5 端可以直接調用 HTMLElement 上的方法：

但是在 Taro 中，要調用組件上的原生方法，必須先創建對應的 Context ：

部分樣式或 CSS 選擇器在小程序中不支持，如：

首先需要安裝 v3.3 的 CLI 工具：

然后進入項目，把 package.json 文件中 taro 相關依賴的版本修改為 ^3.3.0-alpha.2 ，再重新安裝依賴（建議先把 node_modules 文件夾刪除）。

為了節省項目空間，同構功能是可選的，以 Taro 插件的形式提供。

首先開發者需要安裝插件 @tarojs/plugin-html ：

然后配置使用此插件：

為了驗證同構功能的可用性和效果，我們對 CSS 樣式庫 WEUI 、React 組件庫 Antd Design Mobile 、Vue2 組件庫 VantUI 的所有組件進行了測試。

測試效果比較理想，甚至稍微超出我們的預期，配合各組件庫自身的按需加載能力，能以小巧的體積使用豐富的組件，相信各位開發者會喜歡這個功能。

倉庫地址： taro-weui

WEUI 是一個 CSS 的樣式庫，與框架無關，兼容性比較高，大部分組件能直接使用。

倉庫地址： taro-antd-mobile

能直接兼容使用的組件大概為 80%，主要問題在于：

倉庫地址： taro-vant

VantUI 的組件十分豐富，能直接兼容使用的組件大概為 70%。部分開發者會在 Taro 中配合使用 Vant Weapp，但 Vant Weapp 只能運行在微信小程序，因此對 VantUI 的直接適配是一個很好的補充。

適配過程主要遇到的問題有：

同構方案還在持續優化中，部分實現還沒有最終定稿。歡迎各位開發者到我們的論壇下留言，提出您的寶貴意見～： 同構方案 RFC 。

歡迎關注凹凸實驗室

小程序開發用什么框架

小程序的開發都是通過各自的開發工具進行開發，有它獨有的語法規則。沒有什么框架，不過可以使用ui框架來改變頁面樣式 例如：Mintui Wux WeApp iView WeApp

關于小程序開發使用什么ui框架和小程序開發使用什么ui框架軟件的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。