微信小程式使用擴充套件元件庫WeUI的入門教學

2022-04-21 13:00:23

微信小程式使用WeUI入門教學

在學習微信小程式過程中，很多元件的樣式需要自己調整，且很多不是我們想要的樣子。所以找到了WeUI這樣的擴充套件元件庫，預覽了元件庫，真的非常nice！

但是找不到怎麼去參照。網上資料又很少，最後還是要依賴官方檔案去學習，下面把如何入使用總結一下。

這是一套基於樣式庫weui-wxss開發的小程式擴充套件元件庫，同微信原生視覺體驗一致的UI元件庫，由微信官方設計團隊和小程式團隊為微信小程式量身設計，令使用者的使用感知更加統一。

1. 學習參考

WeUI樣式庫展示：https://weui.io/

微信官方WeUI相關檔案：https://wechat-miniprogram.github.io/weui/docs/

WeUI-wxss 專案地址：https://github.com/Tencent/weui-wxss

直奔主題，如何使用！

直接預覽WeUI-wxss範例程式碼，直接參照上手~

開啟[WeUI-wxss](https://github.com/Tencent/weui-wxss)專案地址，可以看到有一個dist目錄，這個目錄就是WeUI範例程式碼，下載下來，用小程式開啟該dist目錄，一定是該目錄哦！

然後，想用什麼直接copy吧！

2.NodeJs初始化

這裡如果沒有安裝NodeJs的自行安裝。

確保有NodeJs，在你小程式專案根目錄，執行以下命令，然後一路確認鍵即可安裝完成。

npm init

執行完以後，會在專案根目錄看到package.json檔案

3.安裝WeUI元件庫

在專案根目錄執行以下命令：

npm install --save weui-miniprogram --production

會在根目錄出現node_modules目錄

4.設定

4.1 構建npm

開啟微信小程式開發工具，點選頂部選單【工具】–【構建npm】，構建完成後會在專案根目錄生成miniprogram_npm資料夾，如下圖：

4.2 支援npm

點選小程式開發工具右上角【詳情】–【本地設定】，勾選上【使用npm模組】，這裡有個坑需要注意一下，記得把基準庫選擇最新的。

5.專案使用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"
  }

在對應的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">表單結構</h2>
			<view class="weui-form__desc">展示表單頁面的資訊結構樣式, 分別由頭部區域/控制元件區域/提示區域/操作區域和底部資訊區域組成。</view>
		</view>
		<view class="weui-form__control-area">
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表單組標題</view>
				<view class="weui-cells weui-cells_form">
					<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="填寫本人微訊號" 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="填寫本人微訊號的暱稱" 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="填寫繫結的電話號碼" 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>

總結

到此這篇關於微信小程式使用擴充套件元件庫WeUI的文章就介紹到這了,更多相關小程式使用WeUI內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！