我们上一章节讲解了如何引入小程序weui样式库文件weui.css，并验证了引入的有效性，今天给大家介绍如何利用微信小程序weui样式库，做出button按钮的效果。
一、打开小程序IDE工具，在pages下新建文件夹button
二、在button文件下新建文件button.wxml，button.wxss
三、在项目根目录下的app.json中配置新建的文件button，如下图
四、在根目录下的app.wxss添加全局样式代码
page{
background-color: #F8F8F8;
font-size: 16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page__hd {
padding: 40px;
}
.page__bd {
padding-bottom: 40px;
}
.page__bd_spacing {
padding-left: 15px;
padding-right: 15px;
}
.page__ft{
padding-bottom: 10px;
text-align: center;
}
.page__title {
text-align: left;
font-size: 20px;
font-weight: 400;
}
.page__desc {
margin-top: 5px;
color: #888888;
text-align: left;
font-size: 14px;
}五、打开button.wxml文件，添加button按钮代码
<view class="page"> <view class="page__hd"> <view class="page__title">Button</view> <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view> </view> <view class="page__bd page__bd_spacing"> <button class="weui-btn" type="primary">页面主操作 Normal</button> <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button> <button class="weui-btn" type="default">页面次要操作 Normal</button> <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button> <button class="weui-btn" type="warn">警告类操作 Normal</button> <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button> <view class="button-sp-area"> <button class="weui-btn" type="primary" plain="true">按钮</button> <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button> <button class="weui-btn" type="default" plain="true">按钮</button> <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button> <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button> <button class="weui-btn mini-btn" type="default" size="mini">按钮</button> <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button> </view> </view> </view><!--V型知识库原创 www.vxzsk.com-->
六、打开button.wxss文件，添加如下代码
.button-sp-area{
margin: 0 auto;
padding-top: 15px;
width: 60%;
}
.mini-btn{
margin-right: 5px;
}七、点击IDE工具上面编译按钮，编译成功后，页面效果如下
此文章本站原创，地址 https://www.vxzsk.com/1880.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程