与 CSS 相比，WXSS 扩展的特性有：

尺寸单位样式导入

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/ .small-p { padding:5px; } /** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" /> class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 <view class="normal_view" />

选择器

目前支持的选择器有：

选择器样例样例描述.class.intro选择所有拥有 class="intro" 的组件#id#firstname选择拥有 id="firstname" 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

view

基础库 1.0.0 开始支持，低版本需做兼容处理。

视图容器

属性类型默认值必填说明最低版本hover-classstringnone否指定按下去的样式类。当 hover-class="none" 时，没有点击态效果1.0.0hover-stop-propagationbooleanfalse否指定是否阻止本节点的祖先节点出现点击态1.5.0hover-start-timenumber50否按住后多久出现点击态，单位毫秒1.0.0hover-stay-timenumber400否手指松开后点击态保留时间，单位毫秒1.0.0

Bug & Tip

tip: 如果需要使用滚动视图，请使用 scroll-view

image

基础库 1.0.0 开始支持，低版本需做兼容处理。

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性类型默认值必填说明最低版本srcstring 否图片资源地址1.0.0modestringscaleToFill否图片裁剪、缩放的模式1.0.0webpbooleanfalse否默认不解析 webP 格式，只支持网络资源2.9.0lazy-loadbooleanfalse否图片懒加载，在即将进入一定范围（上下三屏）时才开始加载1.5.0show-menu-by-longpressbooleanfalse否开启长按图片显示识别小程序码菜单2.7.0binderroreventhandle 否当错误发生时触发，event.detail = {errMsg}1.0.0bindloadeventhandle 否当图片载入完毕时触发，event.detail = {height, width}1.0.0

mode 的合法值

值说明最低版本scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变2.10.3top裁剪模式，不缩放图片，只显示图片的顶部区域 bottom裁剪模式，不缩放图片，只显示图片的底部区域 center裁剪模式，不缩放图片，只显示图片的中间区域 left裁剪模式，不缩放图片，只显示图片的左边区域 right裁剪模式，不缩放图片，只显示图片的右边区域 top left裁剪模式，不缩放图片，只显示图片的左上边区域 top right裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right裁剪模式，不缩放图片，只显示图片的右下边区域 

Bug & Tip

tip：image组件默认宽度300px、高度240pxtip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

 

image 图片标签

    1. src指定要加载的图片的路径 （默认宽高 320px * 240px）

    2. mode 决定 图片内容 如何 和 图片标签 宽高 做适配

    --1.scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

    2.aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

    3.aspectFill    缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，

    图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。  少用

    4.widthFix  缩放模式，宽度不变，高度自动变化，保持原图宽高比不变  常用

    5.bottom left （top left）...  类似以前的backgound-position

    --

    3.小程序当中的图片 直接就支持 懒加载 lazy-load

    图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

轮播图外层容器 swiper

    2.每一个轮播图  swiper-item

    3.swiper标签  存在默认样式

    -- 1.width 100% 

        2.heigth 150px   image 存在默认宽度和高度  320*240px

        3.swiper 高度 无法实现由内容撑开

        4.先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度

        原图的宽度 和 高度 为 1125 * 352px

        swiper 宽度 /swiper 高度 = 原图的宽度 / 原图的高度

        swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

        height: 100vw * 352 / 1125

        5.autoplay 是否自动切换

        6.interval 自动切换时间间隔

        7.circular 是否采用衔接滑动

        8.indicator-dots 是否显示面板指示点

        9.indicator-color 指示点颜色

        10.indicator-active-color 当前选中的指示点颜色

<swiper autoplay="{{true}}"interval="3000"circular indicator-dots="{{true}}" indicator-color="#0094ff" indicator-active-color="#0075aa"> <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /></swiper-item> <swiper-item ><image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/63/O1CN01xhHtuX1CKtYnCPBsv_!!63-0-lubanu.jpg" /></swiper-item> <swiper-item ><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" /></swiper-item> </swiper>

 

导航组件 navigator

    0.块级元素 默认换行 可以直接加宽度和高度

    1.url 要跳转的路径  （可以放绝对路径 相对路径）

    2.target 要跳转到当前的小程序 还是其他的小程序的页面

        --Self 默认值 自己  miniProgram 其他小程序

    3.open-type 跳转的方式

        1--navigate  默认值  保留当前页面，跳转到应用内的某个页面，但是不允许跳到tabbar页面

        2--redirect  关闭当前页面，跳转到应用内的某个页面，但是不允许跳到tabbar页面

        3--switchTab 跳转到 tabBar 页面，并关闭其他所有的非 tabBar 页面

        4--reLaunch  关闭所有页面，打开到应用内的某个页面

        5--navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

        6--exit 退出小程序，target="miniProgram"时生效

<navigator url="/pages/demo02/demo02">轮播图页面</navigator> <navigator url="/pages/index/index">直接跳转到 tabbar页面</navigator> <navigator open-type="redirect" url="/pages/demo02/demo02">redirect 跳到轮播图页面</navigator> <navigator open-type="switchTab"url="/pages/index/index">switchTab</navigator> <navigator open-type="reLaunch"url="/pages/like/like">reLaunch</navigator> <navigator target="miniProgram" exit>退出其他小程序</navigator>

rich-text

基础库 1.4.0 开始支持，低版本需做兼容处理。

富文本。

属性类型默认值必填说明最低版本nodesarray/string[]否节点列表/HTML String1.4.0spacestring 否显示连续空格2.4.1

space 的合法值

值说明最低版本ensp中文字符空格一半大小 emsp中文字符空格大小 nbsp根据字体设置的空格大小 

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性，遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致

文本节点：type = text*

属性说明类型必填备注text文本string是支持entities

 

Bug & Tip

tip: nodes 不推荐使用 String 类型，性能会有所下降。tip: rich-text 组件内屏蔽所有节点的事件。tip: attrs 属性不支持 id ，支持 class 。tip: name 属性大小写不敏感。tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。tip: img 标签仅支持网络图片。tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生

button 

button  标签

    1.外观的属性

        --1. size 控制按钮的大小

                1。default 默认大小

                2。 mini 小尺寸

                3. 

        --2. type 用来控制按钮的颜色

                1.default 灰色

                2.primary 绿色

                3.warn 红色

        --3. plain 按钮是否镂空，背景色透明

        --4.loading 名称前是否带 loading 图标

        --5.disabled 是否禁用

<button >默认按钮</button> <button size="mini">mini按钮</button> <button size="mini" type="primary">小的primary标签</button> <button size="mini" type="warn" plain="{{true}}">plain的warn标签</button> <button loading="{{true}}">loading按钮</button> <button disabled="{{true}}">disabled禁用</button> <button open-type="contact">contact 打开客服会话</button> <button open-type="feedback">feedback 打开“意见反馈”页面</button> <button open-type="getPhoneNumber">getPhoneNumber 获取用户手机号</button> <button open-type="getUserInfo">getUserInfot 获取用户信息</button> <button open-type="launchApp">launchApp 打开APP</button> <button open-type="openSetting">openSetting 打开授权设置页</button> <button open-type="share">share 触发用户转发</button>

open-type 的合法值

值说明最低版本contact打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明1.1.0share触发用户转发，使用前建议先阅读使用指引1.2.0getPhoneNumber获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明1.2.0getUserInfo获取用户信息，可以从bindgetuserinfo回调中获取到用户信息1.3.0launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明1.9.5openSetting打开授权设置页2.0.7feedback打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0

 

Bug & Tip

tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}tip: bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。tip: 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效。

icon

基础库 1.0.0 开始支持，低版本需做兼容处理。

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性类型默认值必填说明最低版本typestring 是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0sizenumber/string23否icon的大小1.0.0colorstring 否icon的颜色，同css的color1.0.0 <icon class="icon-small" type="info_circle" size="23"></icon> <icon class="" type="success" size="23" color=""> <icon type="success_no_circle" size="46" color="" /> </icon>