小程序踩坑日记

全局重置样式表

// * 号通配符 小程序wxss没有*通配符 要自己写初始化样式
 * {
	margin: 0;
	padding: 0;
}

/* 可导入外部wxss样式文件 */
@import "./styles/iconfont.wxss";
/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

标签

image

// 小程序组件 button 有自带的宽320px 高240px
// html
// widthFix 常用的属性
<image mode="widthFix"></image>
// wxss
image {
	width: 200rpx;
	height: 100rpx;
}

button 宽度修改

 // wxml
 <button>按钮</button>
 // wxss
 button{
	width: 200rpx;
	height: 100rpx;
}

• 解决： 在button标签中直接写style || 加上 width: 200rpx !important 两者皆可

// html
<button style:"width: 200rpx">按钮</button>
// wxss 1
button{
	width: 200rpx !important;
	height: 100rpx;
}