微信小程序使用全局的样式管理，主题，公用样式等，可以将多个页面使用到的样式放到全局中，以减少代码量和好维护
微信的全局样式文件为app.wxss
可以自己新建样式文件，或是直接就在app.wxss里写代码
自己新建样式文件就要在app.wxss加引用,如路径为static/css/weui.wxss的样式文件
@import './static/css/weui.wxss';
个人一些公用代码（可做参考）app.wxss
1.样式文件引用
/**app.wxss**/
@import './static/css/weui.wxss';
@import './static/css/iconfont.wxss';
2.页面的字体和背景色
page {
background-color: #F6f6f6;
font-size: 32rpx;
}
3.主题
/* 主题色 */
.theme{
background-color: #c50c1e;
color: #fff;
}
.font-color{
color: #999;
}
block {
margin: 0;
padding: 0;
border: none;
}
4.文字过长显示…
.ell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ell-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical !important;
}
.ell-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-box-orient: vertical !important;
}
.ell-5 {
display: -webkit-box;
-webkit-line-clamp: 5;
overflow: hidden;
-webkit-box-orient: vertical !important;
}
5.常用结构
/* 左图右字结构 */
.card_right_cell{
display: flex;
align-items: center;
padding: 20rpx;
}
.card_right{
padding-left: 20rpx;
width: 100%;
min-width: 300rpx;
}
.card_image{
vertical-align: middle;
flex-shrink: 0;
}
/* 左字右图 */
.card_left_cell{
display: flex;
align-items: center;
padding: 20rpx;
}
.card_right{
padding-left: 20rpx;
width: 100%;
min-width: 300rpx;
position: relative;
}
6.字体图标
/* 字体图标 */
i{
padding: 0 10rpx;
flex-shrink: 0;
padding-top: 4rpx;
}
- 其他
/* 时间 */
.time{
color: rgb(143, 138, 138);
font-size: 24rpx;
}
/* 渐变字体 */
.wear{
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
/* box盒子 */
.box{
padding: 20rpx;
margin: 20rpx;
box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
border-radius: 10rpx;
background-color: #fff;
}
/* 滑动 */
.scroll{
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
padding: 0 10rpx;
scroll: no;
}
/* 字段超出换行 */
.p_content{
word-break: break-all;
/* overflow: hidden;
text-overflow: ellipsis; */
}
/* 网络链接 */
.p_content>navigator{
color: rgb(155, 196, 6);
display: inline-block;
/* background-color: #f6f6f6; */
}
/* 长按图片 */
.image_tip{
position: fixed;
top: 50rpx;
left: 50rpx;
z-index: 9999;
color: #fff;
}