微信小程序开发笔记

小程序开发一半时间在跟 WXML/WXSS 较劲。这篇把当时踩过的 CSS 坑攒在一起，都是小点，但每个都实打实卡过我。

rpx单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。要实现4:3的展示则可以

设计稿按 750 宽出图时，用 rpx 最省心：宽 750rpx 即满屏，高等比例换算。例如 4:3 图片：

image{
    width:750rpx;
    height:563rpx;
}

750 * 3/4 ≈ 563。别混用太多 px，除非固定边框一类细节。

使用组件库，写的css样式优先级太低

iView、Vant 等组件自带样式权重不低，自己写的 class 常常被覆盖。

不管三七二十一，加!important

.findButton {
  width:300px !important;
  height:35px !important;
}

能解决问题，但别滥用。更好的做法是看组件是否提供 custom-class、外部样式类，或少包一层原生标签。赶进度时可以 !important，上线前再收拾。

样式各种飘，不居中怎么办?

文字或块级内容水平垂直居中，Flex 最稳：

<view class="nickName">
  <view>{{userInfo.nickName}}</view>
</view>

.nickName {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

小程序里 view 默认块级，不设宽高时「居中」会看起来像没生效，父容器尺寸要先明确。

selectedColor无效

tabBar 配置里，selectedColor 和 list 是同级字段，不要写进 list 的某一项里。

selectedColor 和 list 是同级别的。写在list数组外面就可以了。

改 app.json 后重新编译，模拟器有时要切一下 tab 才刷新颜色。

背景虚化

头像墙、毛玻璃背景常用：

blur中的参数是虚化比例

filter: blur(1px);

数值越大越糊，性能差的机子别对整个大层开很大的 blur。

scroll-view设置scroll-x也不会横向滚动

纵向默认、横向要额外约束子元素不换行：

要给scroll-view加上white-space: nowrap; ，给scroll-view的子元素box加上display:inline-block;

scroll-x="true" 只表示允许横向滚，子项仍按块级竖排就会看起来像「滚不动」。nowrap + 子项 inline-block 排成一行，横向滑动才正常。

以上都是样式层的小技巧，和业务逻辑无关，但每个都能让人多耗半小时。建议自己的小程序里也开一篇「踩坑记」，比反复搜论坛省事。

版权声明: 本文首发于 指尖魔法屋-微信小程序开发笔记（https://blog.thinkmoon.cn/post/209-wechat-miniprogram-notes-wechat-css/） 转载或引用必须申明原指尖魔法屋来源及源地址！