WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
与 CSS 相比,WXSS 扩展的特性有:单位尺寸和样式导入
一、书写位置
1.1内联样式
<text style="background-color: aqua;font-size: 20px;">内联样式</text>
1.2页内样式
写在.wxss文件中
.wxsstest01{
height: 30px;
width: 200px;
background-color: rgba(146, 146, 236, 0.692);
font-size: 30px;
}
1.3全局样式
全局样式写在app.wxss中,这其中的样式在全局的页面中都是可以直接使用的,而对于组件来说是应用不了的
1.4优先级
内联>页内>全局;
可以通过!important来提升优先级
1.5wxss的导入
使用@import可以导入其他wxss样式文件
二、wxss的尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
三、选择器
四、flex布局
wxss中的flex布局与css的flex布局相同,可以往前翻看CSS中的flex布局来进行学习
五、样式基础库
样式基础库
在使用样式基础库时,需要将页面结构、页面样式(style中)、页面逻辑都复制过来
应用组件要在.json文件中声明组件路径.
六、组件
在微信的官方文件中可以看到更加详细的组件内容
6.1view组件
view组件是个块级元素,默认效果是纵向排布的
view组件的一些属性
hover-stop-propagation需要用双大括号来写true和false
<view hover-class="tap" hover-start-time="0" hover-stay-time="0" hover-stop-propagation="{{true}}">111</view>
6.2text组件
text组件内部只能嵌套text组件,不独占一行也不能自由修改尺寸,但是可以通过display属性来进行修改
text的一些属性
decode和空格转义符相结合
<text space="emsp" selectable="{{true}}">1 1 1</text>
<text space="ensp">1 1 1</text>
<text space="nbsp">1 1 1</text>
<text decode="{{true}}">1 1</text>
蓝色部分被选中
6.3image组件
mode的合法值
直接使用src来导入本地图片
6.4icon组件
type的有效值只能为:
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
通过color可以直接更换图标的颜色
6.5button组件
button组件一般用于接收用户点击来执行不同逻辑
button的属性:
①size属性值为default默认大小和mini小尺寸大小
②type属性为按钮的样式,属性值为default白色,primary绿色,warn红色三种颜色3
③plain属性表示镂空效果,下图中下面为镂空效果
④loading属性会在按钮前出现加载样式的图标
⑤from-type用于from组件,点击分别会触发form组件的 submit(提交表单)/reset(重置表单) 事件
6.6swiper+swiper-item
swiper是指滑块试图容器,其中只可放置swiper-item组件,否则会导致未定义的行为,常用于轮播图当中。
swiper不单独使用,只有在swiper标签中嵌套swiper-item标签后才会显示内容。