微信小程序使用擴(kuò)展組件庫WeUI的入門教程
微信小程序使用WeUI入門教程
在學(xué)習(xí)微信小程序過程中,很多組件的樣式需要自己調(diào)整,且很多不是我們想要的樣子。所以找到了WeUI這樣的擴(kuò)展組件庫,預(yù)覽了組件庫,真的非常nice!
但是找不到怎么去引用。網(wǎng)上資料又很少,最后還是要依賴官方文檔去學(xué)習(xí),下面把如何入使用總結(jié)一下。
這是一套基于樣式庫weui-wxss開發(fā)的小程序擴(kuò)展組件庫,同微信原生視覺體驗(yàn)一致的UI組件庫,由微信官方設(shè)計(jì)團(tuán)隊(duì)和小程序團(tuán)隊(duì)為微信小程序量身設(shè)計(jì),令用戶的使用感知更加統(tǒng)一。
1. 學(xué)習(xí)參考
WeUI樣式庫展示:https://weui.io/
微信官方WeUI相關(guān)文檔:https://wechat-miniprogram.github.io/weui/docs/
WeUI-wxss 項(xiàng)目地址:https://github.com/Tencent/weui-wxss
直奔主題,如何使用!
直接預(yù)覽WeUI-wxss示例代碼,直接引用上手~
打開[WeUI-wxss](https://github.com/Tencent/weui-wxss)項(xiàng)目地址,可以看到有一個(gè)dist目錄,這個(gè)目錄就是WeUI示例代碼,下載下來,用小程序打開該dist目錄,一定是該目錄哦!
然后,想用什么直接copy吧!
2.NodeJs初始化
這里如果沒有安裝NodeJs的自行安裝。
確保有NodeJs,在你小程序項(xiàng)目根目錄,執(zhí)行以下命令,然后一路回車鍵即可安裝完成。
npm init
執(zhí)行完以后,會(huì)在項(xiàng)目根目錄看到package.json文件
3.安裝WeUI組件庫
在項(xiàng)目根目錄執(zhí)行以下命令:
npm install --save weui-miniprogram --production
會(huì)在根目錄出現(xiàn)node_modules目錄
4.配置
4.1 構(gòu)建npm
打開微信小程序開發(fā)工具,點(diǎn)擊頂部菜單【工具】–【構(gòu)建npm】,構(gòu)建完成后會(huì)在項(xiàng)目根目錄生成miniprogram_npm
文件夾,如下圖:
4.2 支持npm
點(diǎn)擊小程序開發(fā)工具右上角【詳情】–【本地設(shè)置】,勾選上【使用npm模塊】,這里有個(gè)坑需要注意一下,記得把基準(zhǔn)庫選擇最新的。
5.項(xiàng)目使用WeUI
在小程序根目錄app.wxss中引入樣式文件(按照自己的路徑引入)
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
在需要頁面的json文件引入需要的組件,例如:
"usingComponents": { "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page" }
在對(duì)應(yīng)的wxml頁面就可以使用了,示例:
<page-meta root-font-size="system"/> <view class="page" data-weui-theme="{{theme}}"> <view class="weui-form"> <view class="weui-form__text-area"> <h2 class="weui-form__title">表單結(jié)構(gòu)</h2> <view class="weui-form__desc">展示表單頁面的信息結(jié)構(gòu)樣式, 分別由頭部區(qū)域/控件區(qū)域/提示區(qū)域/操作區(qū)域和底部信息區(qū)域組成。</view> </view> <view class="weui-form__control-area"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells__title">表單組標(biāo)題</view> <view class="weui-cells weui-cells_form"> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"><label class="weui-label">微信號(hào)</label></view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫本人微信號(hào)" placeholder-class="weui-input__placeholder" /> </view> </view> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"> <label class="weui-label">昵稱</label> </view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫本人微信號(hào)的昵稱" placeholder-class="weui-input__placeholder" /> </view> </view> <view class="weui-cell weui-cell_active"> <view class="weui-cell__hd"> <label class="weui-label">聯(lián)系電話</label> </view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="填寫綁定的電話號(hào)碼" type="number" placeholder-class="weui-input__placeholder" /> </view> </view> </view> </view> </view> <view class="weui-form__opr-area"> <a aria-role="button" class="weui-btn weui-btn_primary">確定</a> </view> </view> </view>
總結(jié)
到此這篇關(guān)于微信小程序使用擴(kuò)展組件庫WeUI的文章就介紹到這了,更多相關(guān)小程序使用WeUI內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單圓盤時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單圓盤時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序webview與h5通過postMessage實(shí)現(xiàn)實(shí)時(shí)通訊的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08原生JS使用Canvas實(shí)現(xiàn)拖拽式繪圖功能
這篇文章主要介紹了原生js實(shí)現(xiàn)Canvas實(shí)現(xiàn)拖拽式繪圖,支持畫筆、線條、箭頭、三角形和圓形等等圖形繪制功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-06-06微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航條切換頁面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊導(dǎo)航條切換頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11javascript 單例模式詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript 單例模式詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
這里也會(huì)遇到一次性關(guān)閉所有modal引起陰影遮罩的問題,也就是所有modal都關(guān)閉了,但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案,需要的朋友參考下吧2017-02-02