当前位置：首页 > article >正文

微信小程序框架weui的基础使用

article 2025/7/2 5:33:00

WeUI

你在使用小程序从零开始开发的时候，一定会想小程序有没有一个UI库，类似于前端中的Bootstrap，MD，Semantic UI这样的框架UI库，如果有的话，一定是一个完美的事情。上帝总是宠着我们，这样的好事情真的有，我的答案是weui.wxss。
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。
在app.wxss内或者需要的页面引入weui.wxss，代码示例如下：
/app.wxss/

@import  'weui.wxss';

根组件使用class="page”，代码示例如下：

<view class="page"> </view>

页头和主体使用class=“page__xx”(注意是两个下划线) ，代码示例如下：

<view class="page">
<view class="page__hd"></view>  <!--页头-->
<!--主体-->
<view class="page__bd"></view>
</view>

其他组件采用weui-xx，例如class = “weui-flex”，代码示例如下：

<view id="{{item.id}}" class="weui-flex" >

组件的子组件样式，
例如weui-flex还有weui-flex__item信息。
注意：子组件样式后面使用的两个下划线，"__"。

实战项目框架的制作

官方WeUI框架的weui.wxss放置于根目录style目录下，菜单图片位置根目录weixin里。
在这里插入图片描述
app.json代码示例如下：

{"pages":["pages/01jichuzujian/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#eee","navigationBarTitleText": "WeUI-Wxss:讲师黄菊华","navigationBarTextStyle":"black"},"tabBar":{"list":[{"pagePath": "pages/01jichuzujian/index","text": "基础组件","iconPath": "weixin/b-off.png","selectedIconPath": "weixin/b-on.png"},{"pagePath":"pages/02biaodan/index","text":"表单","iconPath":"weixin/a-off.png","selectedIconPath":"weixin/a-on.png"},{"pagePath": "pages/03caozuofankui/index","text": "操作反馈","iconPath": "weixin/c-off.png","selectedIconPath": "weixin/c-on.png"} ,{"pagePath": "pages/04daohang/index","text": "导航相关","iconPath": "weixin/d-off.png","selectedIconPath": "weixin/d-on.png"}   ,{"pagePath": "pages/05sousuo/index","text": "搜索相关","iconPath": "weixin/e-off.png","selectedIconPath": "weixin/e-on.png"}                    ]}
}

app.wxss代码示例如下：

@import 'style/weui.wxss';
page{background-color: #F8F8F8;font-size: 16px;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page__hd {padding: 10px;
}
.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;
}

栏目首页

在这里插入图片描述
.wxml文件代码示例如下：

<view class="weui-cells  weui-cells_show "> <navigator url="/pages/01jichuzujian/01-article" class="weui-cell weui-cell_access"><view class="weui-cell__bd">article文章</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="/pages/01jichuzujian/02-badge" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Badge徽章</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="/pages/01jichuzujian/03-flex" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Flex的布局和样式</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="/pages/01jichuzujian/04-grid" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Grid九宫格</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator>  <navigator url="/pages/01jichuzujian/05-icon" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Icon图标</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator> <navigator url="/pages/01jichuzujian/06-loadmore" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Loadmore加载更多</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator> <navigator url="/pages/01jichuzujian/07-panel" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Panel画板</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator>   <navigator url="/pages/01jichuzujian/08-preview" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Preview表单预览</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator>   <navigator url="/pages/01jichuzujian/09-progress" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Progress进度条</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator>     <navigator url="/pages/01jichuzujian/10-footer" class="weui-cell weui-cell_access"><view class="weui-cell__bd">Footer页脚</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator>    </view>

.wxss文件代码示例如下：

.weui-cells{margin-top:0;opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s
}
.weui-cells:after,.weui-cells:before{display:none
}
.weui-cells_show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)
}
.weui-cell:before{right:15px
}

article文章

在这里插入图片描述
.wxml文件代码代码如下：

<view class="page"> <view class="page__hd"><view class="page__title">Article文章的排版布局</view><view class="page__desc">我是文章的描述信息，这个章节主要讲解布局要使用哪些WXSS的元素</view></view><view class="page__bd"><view class="weui-article"><view class="weui-article__h1">大标题</view><view class="weui-article__section"><view class="weui-article__title">章标题</view><view class="weui-article__section"><view class="weui-article__h3">1.1 节标题</view><view class="weui-article__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</view><view class="weui-article__p"><image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" /><image class="weui-article__img" src="/images/pic_article.png" mode="aspectFit" style="height: 180px" /></view></view><view class="weui-article__section"><view class="weui-article__h3">1.2 节标题</view><view class="weui-article__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</view></view></view></view></view>
</view>