WeUI是什么
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫。由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。它最初是為了給在微信端頁面提供一致的視覺體驗而開發開源的一個樣式庫，后續隨著小程序、企業微信等等的開放能力出現，WeUI也提供了小程序、企業微信等等的版本。我們將要介紹的，就是WeUI的小程序版本。
WeUI提供非常多的基礎組件。列舉如下：
表單組件
Button 按鈕
Input 輸入框
List 列表
Slider 滑塊
Uploader 上傳組件
基礎組件
Article 文章
Badge 徽章（小紅點）
Flex 布局
Footer 腳注
Gallery 畫廊
…等等
操作反饋
ActionSheet 彈出式菜單
Dialog 對話框
Msg 提示頁
Picker 選擇器
Toast 彈出式顯示
導航相關
Navbar 導航欄
Tabbar 選項欄
搜索相關
12345678910111213141516171819202122232425
官網地址：https://weui.io/。
Github地址為：
https://github.com/Tencent/weui。
小程序版本的地址為：
https://github.com/Tencent/weui-wxss/。
使用weui進行開發可以簡單分為兩個步驟。
第一步：導入weui.wxss文件
因為weui.wxss是樣式文件，所以導入需要在工程的樣式文件進行導入，在這里因為我們是在項目全局使用weui的，所以在項目根目錄的App.wxss文件進行導入。
weui.wxss文件位于項目的dist/style目錄下，我們在工程下創建thirdparty目錄，把weui.wxss文件拷貝進去。接著，在app.wxss導入weui.wxss文件。在app.wxss增加import這一行的代碼。
/**app.wxss**/
@import 'thirdparty/weui.wxss';
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
12345678910111213
第二步：參照weui提供的例子使用weui組件
我們可以在example目錄找到對應組件的視圖層代碼和邏輯層代碼，比如我們要使用的九宮格，就位于example目錄下的grid。我們可以直接拷貝使用里面的代碼。
為了演示我們自己依賴weui實現的九宮格，我們在上面創建的工程新建一個頁面weuidemo，置于pages目錄下。
圖片描述
然后在app.json下增加一個tabbar相關配置，使得我們可以通過tabbar訪問到這個頁面。
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/weuidemo/weuidemo"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/weuidemo/weuidemo",
"text": "weuidemo",
"iconPath": "",
"selectedIconPath": ""
}
]
}
}
1234567891011121314151617181920212223242526272829
接著把grid目錄下的grid.wxml代碼拷貝到weuidemo.wxml文件。
<view class="page">
<view class="page__hd">
<view class="page__title">Grid</view>
<view class="page__desc">九宮格</view>
</view>
<view class="page__bd">
<view class="weui-grids">
<block wx:for="{{grids}}" wx:key="*this">
<navigator url="" class="weui-grid" hover-class="weui-grid_active">
<image class="weui-grid__icon" src="../images/icon_tabbar.png" />
<view class="weui-grid__label">Grid</view>
</navigator>
</block>
</view>
</view>
</view>
12345678910111213141516
對grid.js文件內容也拷貝到weuidemo.wxml文件。
Page({
data: {
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]
}
});
12345
然后點擊重新編譯，就能看到九宮格的初步效果。
圖片描述
同時呢，會出現錯誤日志，提示相關圖標沒有找到，把圖標路徑修改或者按照代碼的圖標路徑放置圖標文件即可。
這樣子，就可以完成在自建小程序工程使用weui了，在此基礎上，開發者就可以進行自定義的開發了。
總結
weui 是在微信終端非常出色的UI樣式庫，提供了非常多豐富的基礎UI組件，最重要的是擁有了和微信一致的視覺體驗，使得用戶即使從微信切換到相關小程序，也不會覺得UI感到突兀。接著本文介紹了在自建工程里面使用weui的方法，并配有詳細的圖示，相信大家在看完本篇文章之后，都會懂得在自建工引入weui。
