微信小程序开发 教案 3.19 教案-WXSS微信样式表

1、第3章 微信小程序概述任务3.19 WXSS微信样式表课时内容WXSS微信样式表课时1教学目标掌握尺寸单位、全局样式和局部样式的概念掌握样式导入、常用属性、内联样式、选择器的使用方法教学重点尺寸单位、全局样式和局部样式的概念样式导入、常用属性、内联样式、选择器的使用方法教学难点样式导入、常用属性、内联样式、选择器的使用方法教学设计.教学思路：通过PPT讲解尺寸单位、全局样式和局部样式的概念，通过代码讲解让 学生掌握样式导入、常用属性、内联样式、选择器的使用方法.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容WXSS文件的全称是WeiXin Style Sheets （微信样式表）

2、，这是一种样式语言，用于描述WXML的组 件样式（例如尺寸、颜色、边框效果等）。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS自 主的特性有：尺寸单位和样式导入。一.尺寸单位小程序规定了全新的尺寸单位rpx （responsive pixel）,可以根据屏幕宽度进行自适应。其原理 是无视设备原先的尺寸大小，统一规定屏幕宽度为750rpx。rpx不是固定值，屏幕越大，lrpx对应的像素就越大。例如在iPhone6上，屏幕宽度为375px, 共有750个物理像素，则750rpx = 375px=750

3、物理像素，lrpx = 0.5px = 1物理像素。由于iPhone6 换算较为方便，建议开发者可以用该设备作为视觉稿的标准。如表3.10所示。表3.10 px和rpx之间的换算设备rpx换算px （屏幕宽度/750）px换算rpx （750/屏幕宽度）iPhone5lrpx = 0.42pxlpx = 2.34rpxiPhone6lrpx = 0.5pxlpx = 2rpxiPhone6 Pluslrpx = 0.552pxlpx = 1.81rpx二.样式导入小程序在WXSS样式表中使用import语句导入外联样式表，import后跟需要导入的外联样式 表的相对路径，用;表示语句结束。如，

4、有个公共样式表common.wxss代码如下：.redcolor:red;然后可以在其他任意样式表中使用import语句对其进行引用。例如a. wxss代码如下：import common.wxss;.blue color:blue;J三、常用属性wxss所支持的样式属性与css属性类似，为方便理解示例代码，表列出了部分常用样式属性和 参考值。如表3.11所示。表3.11部分常用样式属性和参考值其中颜色可以用以下几种方式来表示：样式属性含义参考值background-color背景色颜色名，例如red表示红色color前景色同上font-size字体大小例如16px表75 16像素大小的字体b

5、order边框例如3px solid blue表示宽度为3像素 的蓝色实线width宽度例如20px表示20像素的宽度height高度例如100px表示100像素的高度RBG颜色：用RGB红绿蓝三通道色彩表示法，例如rgb(255,0表示红色；RGBA颜色：在RGB的基础上加上颜色透明度，例如rgba(255QO0.5)表示半透明红色；16进制颜色：又称为HexColor,用#加上6位数字表示，例如#FFOOOO表示红色；预定义颜色：使用颜色英文单词的形式表示，例如red表示红色。小程序目前共预设了 148种 颜色名称。四、内联样式小程序允许使用style和class属性来控制组件的样式。l.

6、stylestyle属性又称为行内样式，可直接将样式代码写到组件的首标签中。例如：!i上述代码表示当前这个组件中的文本将变为红色、背景将变为黄色。同时，style也支持动态样式效果，例如：测试上述代码表示组件中的文本颜色将由页面JS文件的data.color属性规定。官方建议开发者尽量避免将静态的样式写进style中，以免影响渲染速度。如果是静态的样式 可以统一写到class中。2.class小程序使用class属性指定样式规则，其属性值是一个或多个自定义样式类名组成，多个样式类之间用空格分隔。.styleOlcolor: red; 文字为红色),styleO2font-size: 20px;

7、 字体大小为20像素 font-weight: bold; 字体加粗测试五.选择器小程序目前在WXSS样式表中支持的选择器如表3.12所示。表3.12小程序在wxss样式表中支持的选择器例如，在WXSS样式表中规定:选择器样例样例描述.class.demo选择所有拥有class=demo属性的组件#id#test选择拥有idlest“属性的组件elementview选择所有view组件element, elementview, text选择所有文档的view组件和所有的text组件:afterview:after在view组件后边插入内容:beforeview:before在view组件前边插入内容view width:100rpx;上述代码表示将当前页面所有的view组件宽度都更新为100rpxo六、全局样式和局部样式小程序wxss样式表中规定的样式根据其作用范围分为两类：全局样式：在app.wx