WeUI是什么
WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫。由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。它最初是為了給在微信端頁面提供一致的視覺體驗而開發(fā)開源的一個樣式庫，后續(xù)隨著小程序、企業(yè)微信等等的開放能力出現(xiàn)，WeUI也提供了小程序、企業(yè)微信等等的版本。我們將要介紹的，就是WeUI的小程序版本。
WeUI提供非常多的基礎(chǔ)組件。列舉如下：
表單組件
Button 按鈕Input 輸入框List 列表Slider 滑塊Uploader 上傳組件基礎(chǔ)組件Article 文章Badge 徽章（小紅點）flex 布局Footer 腳注Gallery 畫廊…等等操作反饋ActionSheet 彈出式菜單Dialog 對話框Msg 提示頁Picker 選擇器Toast 彈出式顯示導(dǎo)航相關(guān)Navbar 導(dǎo)航欄Tabbar 選項欄搜索相關(guān)12345678910111213141516171819202122232425
官網(wǎng)地址：https://weui.io/。
Github地址為：https://github.com/Tencent/weui。
小程序版本的地址為：https://github.com/Tencent/weui-wxss/。
使用weui進行開發(fā)可以簡單分為兩個步驟。
第一步：導(dǎo)入weui.wxss文件
因為weui.wxss是樣式文件，所以導(dǎo)入需要在工程的樣式文件進行導(dǎo)入，在這里因為我們是在項目全局使用weui的，所以在項目根目錄的app.wxss文件進行導(dǎo)入。
weui.wxss文件位于項目的dist/style目錄下，我們在工程下創(chuàng)建thirdparty目錄，把weui.wxss文件拷貝進去。接著，在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目錄找到對應(yīng)組件的視圖層代碼和邏輯層代碼，比如我們要使用的九宮格，就位于example目錄下的grid。我們可以直接拷貝使用里面的代碼。
為了演示我們自己依賴weui實現(xiàn)的九宮格，我們在上面創(chuàng)建的工程新建一個頁面weuidemo，置于pages目錄下。
圖片描述
然后在app.json下增加一個tabbar相關(guān)配置，使得我們可以通過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文件內(nèi)容也拷貝到weuidemo.wxml文件。
Page({ data: { grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] }});12345
然后點擊重新編譯，就能看到九宮格的初步效果。
圖片描述
同時呢，會出現(xiàn)錯誤日志，提示相關(guān)圖標(biāo)沒有找到，把圖標(biāo)路徑修改或者按照代碼的圖標(biāo)路徑放置圖標(biāo)文件即可。
這樣子，就可以完成在自建小程序工程使用weui了，在此基礎(chǔ)上，開發(fā)者就可以進行自定義的開發(fā)了。
總結(jié)
weui 是在微信終端非常出色的UI樣式庫，提供了非常多豐富的基礎(chǔ)UI組件，最重要的是擁有了和微信一致的視覺體驗，使得用戶即使從微信切換到相關(guān)小程序，也不會覺得UI感到突兀。接著本文介紹了在自建工程里面使用weui的方法，并配有詳細(xì)的圖示，相信大家在看完本篇文章之后，都會懂得在自建工引入weui。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。