《微信小程序开发案例教程》教案 第8课 视图容器组件与基础内容组件（二）.docx

PAGE6

PAGE6

PAGE3

PAGE3

PAGE

PAGE6

PAGE

PAGE3

PAGE

PAGE1

课题

视图容器组件与基础内容组件（二）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解text、image、rich-text、icon、progress等常用基础内容组件的功能

（2）掌握常用组件基础属性的设置方法

素质目标：

锻炼灵活运用理论知识实现不同效果的能力

锻炼观察事物、敢于创新的能力

教学重难点

教学重点：text、image、rich-text、icon、progress等常用基础内容组件的功能

教学难点：能够使用视图容器组件和基础内容组件制作微信小程序页面

教学方法

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

教学用具

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

教学设计

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

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

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

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

请大家从如何使用基础内容组件中的text、image、rich-text、icon和progress组件的相关知识点制作“家电商城”微信小程序首页的商品列表进行了解。

【学生】完成课前任务

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

考勤

（2min）

【教师】使用APP进行签到

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

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

问题导入

（5min）

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

微信?程序为?程序开发者提供了?系列?程序基础组件，开发者可以通过组合这些?程序基础组件进?微信?程序的快速开发。

（1）微信?程序组件是什么？

（2）微信?程序组件怎么?？

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

【教师】总结学生的回答引入要讲的知识，板书“基础内容组件”

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

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解text、image、rich-text、icon、progress等常用基础内容组件的功能等知识

?【教师】组织学生扫码观看“基础内容组件”微课（详见教材），并进行讲解

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

一、text

text是文本组件，也是最常见的基础内容组件，用于在页面显示文本内容。

属性

类型

默认值

说明

user-select

boolean

false

文本是否可选。若设置为true，长按页面中的文字，就可以将其选中

space

string

—

显示连续空格，可选值有ensp（每个空格占中文字符大小的一半）、emsp（每个空格和中文字符大小一样）和nbsp（根据字体设置空格大小）

decode

boolean

false

是否解码

text组件的属性

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

常用的转义字符都有哪些？

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

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

二、image

image是图片组件，用于在页面显示图片，支持JPG、PNG、SVG、WEBP、GIF等格式，从基础库2.3.0版本起支持云文件ID。

属性

类型

默认值

说明

src

string

—

图片资源地址

mode

string

scaleToFill

图片缩放或裁剪模式

lazy-load

boolean

false

图片懒加载，在图片即将进入显示区域才开始加载图片内容

image组件的常用属性

使用image组件时都会为其指定大小，这样就需要通过mode属性对图片进行缩放或裁剪。

模式类型

取值

说明

缩放模式

scaleToFill

不保持宽高比缩放图片，使图片的宽和高完全拉伸至填满image组件

aspectFit

保持宽高比缩放图片，使图片的长边能完全显示出来，即完整地显示图片

aspectFill

保持宽高比缩放图片，只保证图片的短边能完全显示出来，即图片通常只在水平或垂直方向是完整的，另一个方向将显示不完整

widthFix

保持宽高比缩放图片，宽度为image组件宽度，高度自动变化

heightFix

保持宽高比缩放图片，高度为image组件高度，宽度自动变化

裁剪模式

top/bottom/center/left/right

不缩放图片，只显示图片的顶部/底部/中间/左边/右边区域

topleft/topright/bottomleft