微信小程序常用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语法。

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

微信小程序常用CSS总结相关推荐

vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
【小程序】微信小程序常用api的使用，附案例（建议收藏）
1- 前言这是微信小程序常用的几个API,特地总结一下: 学会使用微信官方文档 · 小程序 2- 界面 2.1 wx.setNavigationBarTitle() 标题栏文本 wx.setNav ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
微信小程序常用api总结
内容待写... ≧◔◡◔≦ 滑到底啦~ // 1.0 小程序接收传递过来的参数onLoad: function (options) {var str= options.str; //接收到的参数 st ...
微信小程序常用组件
欢迎体验个人小程序表情小作坊轻松定制表情包三连图文字转图片吃什么都行解决广大用户吃饭选择恐惧症的问题微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...

微信小程序常用CSS总结

微信小程序常用CSS总结相关推荐

最新文章

热门文章