微信小程序使用擴展組件庫WeUI的入門教程
微信小程序使用WeUI入門教程
在學(xué)習(xí)微信小程序過程中，很多組件的樣式需要自己調(diào)整，且很多不是我們想要的樣子。所以找到了WeUI這樣的擴展組件庫，預(yù)覽了組件庫，真的非常nice！
但是找不到怎么去引用。網(wǎng)上資料又很少，最后還是要依賴官方文檔去學(xué)習(xí)，下面把如何入使用總結(jié)一下。
這是一套基于樣式庫weui-wxss開發(fā)的小程序擴展組件庫，同微信原生視覺體驗一致的UI組件庫，由微信官方設(shè)計團隊和小程序團隊為微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一。
1. 學(xué)習(xí)參考
WeUI樣式庫展示：https://weui.io/
微信官方WeUI相關(guān)文檔：https://wechat-miniprogram.github.io/weui/docs/
WeUI-wxss 項目地址：https://github.com/Tencent/weui-wxss
直奔主題，如何使用！
直接預(yù)覽WeUI-wxss示例代碼，直接引用上手~
打開[WeUI-wxss](https://github.com/Tencent/weui-wxss)項目地址，可以看到有一個dist目錄，這個目錄就是WeUI示例代碼，下載下來，用小程序打開該dist目錄，一定是該目錄哦！
然后，想用什么直接copy吧！
2.NodeJs初始化
這里如果沒有安裝NodeJs的自行安裝。
確保有NodeJs，在你小程序項目根目錄，執(zhí)行以下命令，然后一路回車鍵即可安裝完成。
npm init
執(zhí)行完以后，會在項目根目錄看到package.json文件
3.安裝WeUI組件庫
在項目根目錄執(zhí)行以下命令：
npm install --save weui-miniprogram --production
會在根目錄出現(xiàn)node_modules目錄
4.配置
4.1 構(gòu)建npm
打開微信小程序開發(fā)工具，點擊頂部菜單【工具】–【構(gòu)建npm】，構(gòu)建完成后會在項目根目錄生成miniprogram_npm文件夾，如下圖：
4.2 支持npm
點擊小程序開發(fā)工具右上角【詳情】–【本地設(shè)置】，勾選上【使用npm模塊】，這里有個坑需要注意一下，記得把基準(zhǔn)庫選擇最新的。
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"
}
在對應(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">微信號</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">聯(lián)系電話</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>
總結(jié)
到此這篇關(guān)于微信小程序使用擴展組件庫WeUI的文章就介紹到這了,更多相關(guān)小程序使用WeUI內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了openlayers 3實現(xiàn)車輛軌跡回放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript在控件上添加倒計時功能的實現(xiàn)代碼
JavaScript在控件上添加倒計時功能，主要原理是利用控件的setEnable(true)/setEnable(false)來進行設(shè)置控件的可用與不可用狀態(tài)，實現(xiàn)過程非常簡單，需要的的朋友參考下吧2017-07-07
這篇文章主要為大家詳細介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
javascript仿php的print_r函數(shù)輸出json數(shù)據(jù)
輸出json數(shù)據(jù)，php的print_r函數(shù)可以輕松實現(xiàn)，下面為大家介紹下javascript也可以模仿print_r函數(shù)輸出json數(shù)據(jù)，具體實現(xiàn)如下，感興趣的朋友可以了解下2013-09-09
這篇文章主要介紹了js實現(xiàn)可控制左右方向的無縫滾動效果,頁面中添加了兩個按鈕，控制圖片滾動的方向，感興趣的小伙伴們可以參考一下2016-05-05
本文詳細介紹下，如何動態(tài)加載外部js文件及js；動態(tài)加載外部css樣式及css樣式，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)js有所幫助2013-04-04
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)帶縮略圖的輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了js函數(shù)和this用法,結(jié)合實例形式分析了js函數(shù)和this基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了如何使用HTML、CSS和JavaScript創(chuàng)建一個簡單的電影院座位圖,并實現(xiàn)選票功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
JavaScript中的數(shù)組includes()方法用于判斷數(shù)組中是否包含指定的元素,并返回一個布爾值,這篇文章主要介紹了js includes方法的使用,需要的朋友可以參考下2024-01-01