首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序的样式机制

微信小程序的样式机制

作者头像
一斤代码
发布2018-08-21 10:33:29
5930
发布2018-08-21 10:33:29
举报
文章被收录于专栏:大前端开发大前端开发

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS(层叠样式表)几乎相同的一种机制,称作WXSS。

WXSS用于描述WXML的组件样式,用于决定WXML的组件应该如何显示。为了适应广大的前端开发者,它被设计为支持CSS中大部分的特性(但是注意是大部分,还是有一些特性是不支持的),并且有一些自己的扩展和修改。比如引入了一种新的尺寸单位rpx,还有@import这种外联样式的导入机制(话说这个功能不是CSS里也有的么...)

关于CSS,我就不在这里介绍它的用法了,这个内容实在有点多,还没学习过CSS的朋友可以自己找一下资料学习,我在这里主要想讲解一下WXSS和CSS之间的不同之处。

样式的设置

在WXML文件中,我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在,我们就可以动态的设置style和class的属性值了。比如:

<view style="color:{{color}};padding:{{padding}};">Hello</view>
<view class="message-{{type}}">{{message}}</view>

不过,我们要尽量避免使用style来设置组件的样式,最好将样式定义成样式规则放到样式文件中(.wxss),然后通过class属性来设置。因为组件通过style接收动态样式,在运行时会进行解析,影响渲染性能。

有限的选择器

和CSS不一样,小程序的WXSS支持的选择器的类型有限,官方文档中明确列出说支持的,目前只有以下几种选择器:

  • .class:类选择器,例如.error-msg,它会选择所有class="error-msg"的组件
  • #id:ID选择器,例如#my-container,它会选择id="my-container"的组件
  • element:元素选择器,例如view,它会选择所有view组件
  • element, element:多选择器,例如view, button,它会选择所有view和button组件
  • ::after:例如view::after,它会在view组件后面插入内容
  • ::before:例如view::after,它会在view组件前面插入内容

其实自己试了一些在CSS中可用,小程序官方没有声明在WXSS里支持的选择器,也是可以生效的。但是有些用了就会把微信web开发者工具给整崩溃掉,所以,还是不要在实际开发中使用这类没说支持的选择器了,虽然在有的场景下麻烦了点,但是以上支持了的选择器还是基本够用了。

全局样式与局部样式

WXSS中有全局样式与局部样式之分。

定义在app.wxss文件中的样式为全局样式,将会对每一个页面起作用。

而定义为page同名的wxss文件,则称为局部样式,只会针对对应的页面起作用,而且样式优先级比全局样式要高,可以覆盖全局样式。

新的尺寸单位

最后来说一下WXSS中新增和扩展的尺寸单位,对于做屏幕的自适应是非常有帮助的。

  • rpx (responsive pixel,响应式px),简单来说,就是不管什么尺寸的设备,总是认为屏幕宽度是750rpx
  • rem (root em,根em),也很简单,就是不管什么尺寸的设备,总是认为屏幕的宽度是20rem。

所以rpx和rem之间的换算,就是:

1rem = (750/20)rpx = 37.5rpx
```

设计师的设计稿一般都是按照px来做单位的,那么在开发阶段,开发人员就需要在px和rpx之间进行换算,具体可以如下来计算:
```
rpx = (屏幕实际宽度/750)px
 px = (750/屏幕实际宽度)rpx
```

因此,如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px),则:
```
1rpx = (375/750)px = 0.5px
 1px = (750/375)rpx = 2rpx
```
是不是很容易理解?

好了,关于微信小程序样式WXSS的关键点内容,就讲解到这里,不对的地方欢迎指正。谢谢啦。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.10.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 样式的设置
  • 有限的选择器
  • 全局样式与局部样式
  • 新的尺寸单位
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档