微信小程序常用CSS总结

前言

本人之前自学并发版了一个微信小程序（TXT音乐播放器），趁着还没忘，把常用的一些CSS样式总结在下方。微信小程序使用的css文件后缀为wcss，总的来说，与html中的css语法大致相同，但还是有一些特别的地方（有一些特有的语法与一些不太支持的语法）。

 

正文

1.新建一个微信小程序页面时，可以在最外层写一个view标签（类似div标签），然后设置它的css(wcss)样式为：

.mainView{
  width: 100%;
  height: 100%;
  
  /*生成绝对定位的元素，相对于浏览器窗口进行定位*/
  position: fixed;
  top: 0;
  left: 0;
  
  /*弹性布局*/
  display: flex;
  /*让内部元素垂直排列，row为水平排列*/
  flex-direction: column;
  /*让内部元素水平排列，如果不设置column，默认即是水平排列*/
  /*flex-direction: row;*/
  /*内部元素水平居中*/
  justify-content: center; 
  /*内部元素垂直居中*/
  align-items: center;

  /*文字水平居中*/
  text-align: center;
}

这样，这个view就能占据全部页面，之后在内部嵌套其它元素时进行布局设置就更容易了。

 

2.之后在这个view标签中嵌套其余view标签，由于最外层是column属性，因此同级的view默认为垂直排列；通常可以嵌套3个同级的view标签，分成上中下三层，例如（这个写在wxml中）：

<view class="mainView">
 <view class="headView"></view>
 <view class="bodyView"></view>
 <view class="footView"></view>
</view>

其中，可以设置head、body、foot的width为100%，height分别为20%、60%、20%。（当然也可以设置为其它值、其它单位，不过个人认为最好写成百分比的形式，便于适配不同屏幕大小的手机。column排列下，内部元素的width最好设置为100%，height自定。）

3.接着可以继续再view标签中嵌套其它标签了，一般继续使用view标签确定好布局样式，最后在view标签中嵌套image、text、input标签等就可以了。如果某个view标签不再想使用column属性，可以这样写：

.bodyView{
  /*弹性布局*/
  display: flex;
  /*让内部元素水平排列*/
  flex-direction: row;
  /*内部元素水平居中*/
  justify-content: center; 
  /*内部元素垂直居中*/
  align-items: center;

  /*内部文字水平居中*/
  text-align: center;
}

这样，bodyView内部的元素就恢复为row排列了；如果不想让内部元素居中，可以去掉相应的语句。row排列下，最好将每个元素的width设置好，height设置为统一的值。

 

4.使用上述view标签、flex、column、row属性，基本可以设置好大体布局有几行几列，每个嵌套标签中有几行几列。（也许有更简单的方法，不过本人也是初学，还没有找到）

 

5.关于margin与padding的用法，与html中的相同，分别对应标签外间距与内间距。

 

6.position: absolute; 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

虽然叫绝对定位，但还是相对父元素的。

 

7.position: fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

这个才算真正的绝对定位，可以设置 left、top、right、bottom都为50%来使之居中（可根据实际情况设置，不过一般居中运用最多）

 

8.border-radius: 3%; 这个可以设置标签的边框弧度，设置圆角边框时常用。（弧度根据实际情况自行调整）

 

9.border-top: 1px solid gray; 这个设置了标签的上边框线条粗细为1px，实线，灰色。对应的也有bottom、left、right可设置。(设置为0px则不显示边框，默认即为0px)

 

10.关于z-index属性，在开发工具中测试时，可以使用z-index设置不同标签高度实现遮罩层，但是在真机上测试时则无效（点击操作会穿过遮罩层），需要注意；本人使用"wx:if"参数（true时显示、false不显示）替换了遮罩层方法，当然也失去了遮罩层效果。

官方推荐cover-view标签，然而有嵌套限制，不太好用。

 

总结

以上为本人在开发微信小程序过程中用到的一些比较典型的wcss代码，还有一些与html中的css类似的、较为简单的语法就没有总结了，大家可以通过百度与官方API获取详细wcss语法。

再次感谢大家阅读本文，谢谢！