WeUI是什么

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)。由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。它最初是為了給在微信端頁(yè)面提供一致的視覺體驗(yàn)而開發(fā)開源的一個(gè)樣式庫(kù)，后續(xù)隨著小程序、企業(yè)微信等等的開放能力出現(xiàn)，WeUI也提供了小程序、企業(yè)微信等等的版本。我們將要介紹的，就是WeUI的小程序版本。

WeUI提供非常多的基礎(chǔ)組件。列舉如下：

表單組件

Button 按鈕
Input 輸入框
List 列表
Slider 滑塊
Uploader 上傳組件
基礎(chǔ)組件

Article 文章
Badge 徽章（小紅點(diǎn)）
Flex 布局
Footer 腳注
Gallery 畫廊
…等等
操作反饋

ActionSheet 彈出式菜單
Dialog 對(duì)話框
Msg 提示頁(yè)
Picker 選擇器
Toast 彈出式顯示
導(dǎo)航相關(guān)

Navbar 導(dǎo)航欄
Tabbar 選項(xiàng)欄
搜索相關(guān)
12345678910111213141516171819202122232425

官網(wǎng)地址：https://weui.io/。

Github地址為：
https://github.com/Tencent/weui。

小程序版本的地址為：
https://github.com/Tencent/weui-wxss/。

使用weui進(jìn)行開發(fā)可以簡(jiǎn)單分為兩個(gè)步驟。

第一步：導(dǎo)入weui.wxss文件

因?yàn)閣eui.wxss是樣式文件，所以導(dǎo)入需要在工程的樣式文件進(jìn)行導(dǎo)入，在這里因?yàn)槲覀兪窃陧?xiàng)目全局使用weui的，所以在項(xiàng)目根目錄的App.wxss文件進(jìn)行導(dǎo)入。

weui.wxss文件位于項(xiàng)目的dist/style目錄下，我們?cè)诠こ滔聞?chuàng)建thirdparty目錄，把weui.wxss文件拷貝進(jìn)去。接著，在app.wxss導(dǎo)入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目錄找到對(duì)應(yīng)組件的視圖層代碼和邏輯層代碼，比如我們要使用的九宮格，就位于example目錄下的grid。我們可以直接拷貝使用里面的代碼。

為了演示我們自己依賴weui實(shí)現(xiàn)的九宮格，我們?cè)谏厦鎰?chuàng)建的工程新建一個(gè)頁(yè)面weuidemo，置于pages目錄下。

圖片描述
然后在app.json下增加一個(gè)tabbar相關(guān)配置，使得我們可以通過tabbar訪問到這個(gè)頁(yè)面。

{
  "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": "首頁(yè)",
        "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

對(duì)grid.js文件內(nèi)容也拷貝到weuidemo.wxml文件。

Page({
    data: {
        grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]
    }
});
12345

然后點(diǎn)擊重新編譯，就能看到九宮格的初步效果。

圖片描述
同時(shí)呢，會(huì)出現(xiàn)錯(cuò)誤日志，提示相關(guān)圖標(biāo)沒有找到，把圖標(biāo)路徑修改或者按照代碼的圖標(biāo)路徑放置圖標(biāo)文件即可。

這樣子，就可以完成在自建小程序工程使用weui了，在此基礎(chǔ)上，開發(fā)者就可以進(jìn)行自定義的開發(fā)了。

總結(jié)
weui 是在微信終端非常出色的UI樣式庫(kù)，提供了非常多豐富的基礎(chǔ)UI組件，最重要的是擁有了和微信一致的視覺體驗(yàn)，使得用戶即使從微信切換到相關(guān)小程序，也不會(huì)覺得UI感到突兀。接著本文介紹了在自建工程里面使用weui的方法，并配有詳細(xì)的圖示，相信大家在看完本篇文章之后，都會(huì)懂得在自建工引入weui。