《微信小程序开发案例教程》教案 第4课 微信小程序的视图（二）.docx

PAGE4

PAGE4

PAGE5

PAGE5

PAGE

PAGE4

PAGE

PAGE5

PAGE

PAGE1

课题

微信小程序的视图（二）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解WXSS文件的基础知识

（2）熟悉选择器、盒模型及flex布局的相关知识

（3）了解尺寸单位、样式导入及内联样式的相关知识

素质目标：

?培养实践能力，在实践中学习，在学习中实践

教学重难点

教学重点：WXSS支持的选择器、盒模型及flex布局

教学难点：能够使用WXSS文件设置微信小程序的页面样式

教学方法

案例分析法、问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学设计

第1节课：?课前任务→考勤（2min）→问题导入（5min）→传授新知（38min）

第2节课：问题导入（5min）→任务实施（35min）→课堂小结（3min）→作业布置（2min）

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件完成课前任务

请大家分别从WXSS，学习选择器、尺寸单位、盒模型、flex布局，以及样式导入、内联样式的相关知识点进行初步的了解。

【学生】完成课前任务

通过课前任务，使学生了解所学课程的重要性，增加学生的学习兴趣

考勤

（2min）

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

培养学生的组织纪律性，掌握学生的出勤情况

问题导入

（5min）

【教师】创设情景，并组织学生讨论下列问题：

对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显?出来。界?结构wxmL?较容易理解，主要是由??类基础组件构成、app.wxss是全局样式，作?于每?个页?，?page下的每?个的wxss?件只作?于当前页?，并对全局样式中的相同属性会覆盖。

（1）构成wxmL的??类基础组件是什么？

（2）对于微信?程序wxss样式的使?来说他的样式属性是什么样的？

【学生】聆听、思考、讨论、小组代表上台回答问题

【教师】总结学生的回答引入要讲的知识，板书“WXSS文件——小程序的样式”

通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解WXSS的基本概念、选择器的分类、尺寸单位、盒模型、flex布局等知识

一、认识WXSS

WXSS（WeiXinstylesheets）是微信小程序的样式语言，用于描述WXML文件中组件的样式，如字体、颜色、布局等。

WXSS的基本语法格式如下。

selector{

property:value;

}

二、选择器

选择器

示例

示例说明

类选择器（.class）

.intro

选择所有具有class=intro属性的组件

ID选择器（#id）

#firstname

选择具有id=firstname属性的组件

元素选择器（element）

view,text

选择所有view组件和所有text组件

伪元素选择器（::after）

view::after

在view组件后插入内容

伪元素选择器（::before）

view::before

在view组件前插入内容

WXSS支持的选择器

?【教师】组织学生扫码观看“选择器和盒模型”微课（详见教材），并进行讲解

?【学生】观看、聆听、思考

（1）类选择器

类选择器在实际开发中应用比较广泛。在使用类选择器前，首先需要在WXML文件中为组件添加class属性，然后在相应的WXSS文件中通过class属性值选择组件，方法是在class属性值前添加符号“.”。

类选择器示例运行效果

?【教师】随机邀请学生回答以下问题：

class属性值的第一个字符为什么不能使用数字？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

（2）ID选择器

ID选择器可以为具有id属性（组件的唯一标识，在整个页面是唯一的）的组件设置样式，方法是在id属性值前添加符号“#”。

ID选择器示例运行效果

三、尺寸单位

为页面设置样式时，有时需要指定页面中组件的宽度、高度等，此时会用到尺寸单位。由于不同型号手机的屏幕宽度和设备像素比不同，如果使用像素（pixel，简称px）作为尺寸单位，则很难在不同型号手机上实现相同的样式效果。

手机型号

屏幕宽度（px）

rpx转换为px（屏幕宽度/750）

px转换为rpx（750/屏幕宽度）

iPhone5

320

1rpx≈0.43px

1px