官方weui框架的weui.wxss放置于根目录style目录下,菜单图片位置根目录weixin里。
{
"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"
}
]
}
}
@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;
}
效果图如下
欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通