接一,继续学习。和大家一起学习进步。
学习全局配置。
属性 类型 描述
entryPagePath string 小程序默认启动首页
pages string[] 页面路径列表
window Object 全局的默认窗口表现
tabBar Object 底部 tab 栏的表现
networkTimeout Object 网络超时时间
debug boolean 是否开启 debug 模式,默认关闭
functionalPages boolean 是否启用插件功能页,默认关闭
{
"pages":[ //配置页面
"pages/index/index",
"pages/logs/logs"
],
"window":{ //配置默认窗口
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#BBFFFF", //设置背景颜色(rgd颜色)
"navigationBarTitleText": "小卖部", //设置名称
"navigationBarTextStyle":"black" //导航标题颜色
},
"tabBar": {
"selectedColor":"#ddd", //设置颜色
"list": [
{
"pagePath": "pages/index/index", //地址
"text": "首页", //名称
"iconPath": "pages/static/tabber/1161511.png", //图片
"selectedIconPath": "pages/static/tabber/1161511.png"
},
{
"pagePath": "pages/shop/shop",
"text": "商品",
"iconPath": "pages/static/tabber/3966732.png",
"selectedIconPath": "pages/static/tabber/3966732.png"
}
]
}
}
组件:
test:编写文本信息:类似于span标签
view:容器,类似于div标签
image:图片
flex布局:
/* pages/index/index.wxss */
.c1{
color:red;
}
image{
/*宽*/
width: 100rpx;
/*高*/
height: 100px;
}
.menu{
display: flex;
/*水品方向排列,规定主轴方向,row水品方向,。column垂直方向*/
flex-direction: column;
/*元素在主轴方向如何展示*/
justify-content: space-around;
/*元素在副轴方向如何展示,flex-start:中间,flex-end:末尾*/
align-items: flex-start;
}
.menu.item{
display: flex;
flex-direction: column;
}
样式:
display: flex; flex布局
flex-direction: row; 规定主轴方向
justify-content: space-around; 规定主轴上排列方向
align-items: flex-start; 规定主轴排列方向