pc端ui框架推薦（WeUI-為微信）

2023-09-13 17:10:17

微信，其自身作為一個移動端的應用而言，具有獨特視覺標準和交互體驗設計。而當我們進行微信內的頁面，或是微信小程序的開發時，一般都需要遵循微信的設計語言，儘可能地模仿微信自身的視覺設計，保持用戶體驗上的一致性。為此，微信團隊開源了官方的基礎樣式庫 WeUI，使得開發者和設計師們只需引入樣式文件，就能使用微信樣式的元素組件，十分方便。

WeUI - 微信基礎樣式庫

簡介

WeUI，是 Tencent（騰訊開源）在 Github 上開源的微信風格的基礎樣式庫，項目位於 https://github.com/Tencent/weui，目前版本為 v2.4.0。WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素，適配 iOS 和安卓系統，視覺標準基本與微信保持一致。對於進行微信內網頁和微信小程序開發而言，可以十分方便地實現與微信協調一致的基礎 UI 界面，提升用戶視覺體驗。

WeUI Github項目

安裝

WeUI 作為一個前端基礎樣式庫，只需引入單個 CSS 樣式文件就可以使用了，項目提供了 CDN 連結：

WeUI 綠色按鈕

也可以通過 npm 進行下載，引入到前端項目中：

npm install --save weui

然後在 Node 項目中引用：

import "weui";

示例

WeUI 提供了頁面層級規範，用於規範頁面元素所屬的層級、層級順序，和組合規範。最底層是內容頁面，其上是導航頁面，然後是則遮蓋層，最上方則是彈出頁面。

WebUI頁面層級

WeUI 提供了豐富的移動端組件，包括：

基礎組件：包括 Flex 布局、面板、圖標、進度條等表單：包括按鈕、輸入框、選擇框、列表等操作反饋：包括對話框、消息、彈出式顯示等導航相關：包括導航欄、標籤欄等搜索相關：搜索欄等

WeUI組件

WeUI 提供了微信風格的按鈕，包括綠色的主要按鈕，以及次操作和警告類操作按鈕等，包含了加載中和不可用等按鈕狀態：

WeUI按鈕

對應的 HTML 代碼如下：

頁面主操作頁面主操作頁面主操作

WeUI 提供了基本的表單結構組件，一個表單，由

頭部區域控制項區域提示區域操作區域底部信息區

這幾個部分組成，可以適應不同的表單應用場景。

WeUI表單

WeUI 提供了基礎的列表組件，可以實現帶說明的、帶圖標和說明的、帶跳轉的等的列表項，方便向用戶展示多行信息：

WeUI列表

WeUI 提供了 Badge 徽章組件，可以實現小紅點、未讀數字、列表標籤等多種應用場景：

WeUI徽章

實現小紅點的代碼如下，使用 weui-badge_dot 的 class 實現：

新消息提示跟摘要信息後，統一在列表右側單行列表詳細信息

WeUI 支持 Flex 布局，自動實現等寬的水平布局：

WeUI Flex布局

對於消息反饋方面，WeUI 提供了對話框，支持 iOS 樣式和安卓樣式的對話框，提供了攜帶較多信息的強用戶提醒：

WeUI對話框

WeUI 還提供了消息頁面，為操作結果提供反饋，提示操作成功或是失敗，並提供進一步跳轉操作：

WeUI消息

WeUI 實現了基本的 Toast 彈出式提示，包括成功提示和加載中提示，可以通過 Js 代碼控制它們的顯示和消失：

buju 數據加載中 $(function{ var $loadingToast = $('#loadingToast'); $('#showLoadingToast').on('click', function{ if ($loadingToast.css('display') != 'none') return; $loadingToast.fadeIn(100); setTimeout(function { $loadingToast.fadeOut(100); }, 2000); });});

WeUI 彈出式提示

而在導航相關組件，提供了底部標籤欄，和頭部導航欄：

WeUI 底部菜單

WeUI 支持黑暗模式，默認跟隨系統設置，可以在 body 添加屬性 data-weui-theme 來控制，值為 light 或 dark。

...

另外，開源社區還提供了不少的第三方擴展，如 vue-weui、react-weui 等，方便使用不同前端框架的開發者使用，提高開發效率。

總結

WeUI 作為微信官方開源的基礎樣式庫，提供了豐富的樣式組件，使得開發者可以直接引用到前端項目中，就能實現與微信一致的設計風格，減少了為不同 UI 風格而糾結的困擾，大大提升了微信 Web 應用開發的用戶體驗和開發效率。對於進行微信 Web 開發的開發人員而言，WeUI 毫無疑問是值得在實踐中使用的，設計人員也可以進行學習，參考借鑑其中的設計理念。