样式

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

选择器

特别需要注意的是小程序不支持通配符 * 因此以下代码无效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

组件

内置组件

image

默认大小320*240
mode 有效值：

mode 有 13 种模式，默认拉伸，其中 4 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

<image src="./img/apple1.jpg"></image>

swiper 轮播图 默认宽度 100% 高度 150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	s是否循环轮播

<swiper>
<swiper-item><image src="./img/apricot1.jpg"></image></swiper-item>
<swiper-item><image src="./img/banana1.jpg"></image></swiper-item>
<swiper-item><image src="./img/blueberry1.jpg"></image></swiper-item>
<swiper-item><image src="./img/09b1f78741c8e463100734a5481f4de.jpg"></image></swiper-item>
<swiper-item><image src="./img/ctd.jpg"></image></swiper-item>
</swiper>

navigator 导航组件类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
open-type	String	navigate	跳转方式

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

<navigator url="../index2/index2" open-type="switchTab">跳转到第二页</navigator>

button 属性 | 类型 | 默认值 | 必填 | 说明 | | --------- | ------- | ------- | -- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | size | string | default | 否 | 按钮的大小 | | type | string | default | 否 | 按钮的样式类型 | | plain | boolean | false | 否 | 按钮是否镂空，背景色透明 | | disabled | boolean | false | 否 | 是否禁用 | | loading | boolean | false | 否 | 名称前是否带 loading 图标 | | form-type | string | | 否 | 用于 ](https://developers.weixin.qq.com/miniprogram/dev/component/form.html) 组件，点击分别会触发 [ 组件的 submit/reset 事件 | | open-type | string | | 否 | 微信开放能力 |

size 的合法值

值	说明
default	默认大小
mini	小尺寸

type 的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type 的合法值

值	说明
submit	提交表单
reset	重置表单

open-type 的合法值

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

rich-text 可以将字符串解析成对应标签，类似 vue中 v-html功能

  <rich-text user-select="true" nodes="{{msg}}"></rich-text>

nodes属性

nodes属性支持 字符串 和 标签节点数组

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

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

小程序基础（二）样式&内置组件

样式

尺寸单位

选择器

组件

内置组件

nodes属性