微信小程序開(kāi)發(fā)教程：WeUI一個(gè)專(zhuān)為微信小程序設(shè)計(jì)的UI框架（微信小程序ui框架有哪些）
WeUI是什么
WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)。由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶(hù)的使用感知更加統(tǒng)一。它最初是為了給在微信端頁(yè)面提供一致的視覺(jué)體驗(yàn)而開(kāi)發(fā)開(kāi)源的一個(gè)樣式庫(kù)，后續(xù)隨著小程序、企業(yè)微信等等的開(kāi)放能力出現(xiàn)，WeUI也提供了小程序、企業(yè)微信等等的版本。我們將要介紹的，就是WeUI的小程序版本。
WeUI提供非常多的基礎(chǔ)組件。列舉如下：
表單組件
Button 按鈕Input 輸入框List 列表Slider 滑塊Uploader 上傳組件基礎(chǔ)組件Article 文章Badge 徽章（小紅點(diǎn)）flex 布局Footer 腳注Gallery 畫(huà)廊…等等操作反饋ActionSheet 彈出式菜單Dialog 對(duì)話(huà)框Msg 提示頁(yè)P(yáng)icker 選擇器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)行開(kāi)發(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。我們可以直接拷貝使用里面的代碼。
為了演示我們自己依賴(lài)weui實(shí)現(xiàn)的九宮格，我們?cè)谏厦鎰?chuàng)建的工程新建一個(gè)頁(yè)面weuidemo，置于pages目錄下。
圖片描述
然后在app.json下增加一個(gè)tabbar相關(guān)配置，使得我們可以通過(guò)tabbar訪問(wèn)到這個(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)沒(méi)有找到，把圖標(biāo)路徑修改或者按照代碼的圖標(biāo)路徑放置圖標(biāo)文件即可。
這樣子，就可以完成在自建小程序工程使用weui了，在此基礎(chǔ)上，開(kāi)發(fā)者就可以進(jìn)行自定義的開(kāi)發(fā)了。
總結(jié)
weui 是在微信終端非常出色的UI樣式庫(kù)，提供了非常多豐富的基礎(chǔ)UI組件，最重要的是擁有了和微信一致的視覺(jué)體驗(yàn)，使得用戶(hù)即使從微信切換到相關(guān)小程序，也不會(huì)覺(jué)得UI感到突兀。接著本文介紹了在自建工程里面使用weui的方法，并配有詳細(xì)的圖示，相信大家在看完本篇文章之后，都會(huì)懂得在自建工引入weui。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。