微信小程序常用样式大全,你要找的都在这里!

小程序发展势如破竹,以其独有的优势,受到几大巨头青睐,纷纷投身小程序开发,在小程序开发过程中经常遇到各种各样的样式问题,今天春哥团队小编总结下,再也不用傻傻一个个敲代码了。
微信小程序用完即走、低频使用、性能要求低,不支持webview;

  • 以iphone6尺寸(750*1334)为视觉稿进行设计;
  • iphone6下1px=1rpx=0.5pt     iphone6 plux下1px=0.6rpx;
  • 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会;

1.设置全局字体样式app.wxss:

text{
font-family:MicroSoft yahei;
}

2.设置弹性盒子模型:

复制代码
.container{
/*弹性模型*/
display:flex;
/*垂直方向 列方向 排布*/
flex-direction:column;
/*居中*/
align-items:center;
/*要从整体解决排布的问题是最好的方案*/
}
复制代码

3.设置页面全屏样式及背景色:

page{
height:100%;
background:#b3d4db;
}

4.全局设置导航条颜色app.json:

"window": {
"navigationBarBackgroundColor": "#405f80"
}

5.页面设置导航条颜色和标题*.json:

{
"navigationBarBackgroundColor": "#405f80",
"navigationBarTitleText":"文与字"
}

6.设置字体属性:

.user-name{
font-size:32rpx;
font-weight:bold;
}

7.创建圆角矩形边框:

复制代码
.moto-container{
border:1px solid #405f80;
width:200rpx;
height:80rpx;
border-radius:5rpx;
text-align:center;
}
复制代码

8.外边距设置:

margin-top:20rpx;
margin-bottom:40rpx;

9.内边距设置:

padding-bottom:20rpx;

10.上、下边线设置:

border-bottom:1px solid #ededed;
border-top:1px solid #ededed;

11.文字间距设置:

letter-spacing:2rpx;

12.垂直居中(此元素放置在父元素的中部):

vertical-align: middle;

 13.设置子元素Image样式:

.circle-img image{
    width:90rpx;
    height: 90rpx
}

14.最底层垂直居中横线样式:

复制代码
.horizon{
    width:660rpx;
    height: 2rpx;
    background-color: #e5e5e5;
    vertical-align: middle;
    position:relative;
    top:46rpx;
    margin: 0 auto;
    z-index: -99
}
复制代码

15.图片居中覆盖:

复制代码
.audio{
    width:102rpx;
    height:110rpx;
    position: absolute;
    left: 50%;
    margin-left: -51rpx;//经典水平居中方式
    top:180rpx;
    margin-top: 20rpx;
    opacity:0.6;//透明度
}


来源:春哥技术博客,欢迎分享,(春哥微信号:cgnanyin)
上一篇:如何解决小程序server请求微信服务器      下一篇:还不会微信小程序登录鉴权的,教程看这