亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序使用擴(kuò)展組件庫WeUI的入門教程

 更新時(shí)間:2022年04月21日 11:06:33   作者:這把躺贏  
WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫,由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì),令用戶的使用感知更加統(tǒng)一,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用擴(kuò)展組件庫WeUI的相關(guān)資料,需要的朋友可以參考下

微信小程序使用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)文章

最新評(píng)論