《微信小程序开发案例教程》教案 第10课 表单组件与其他组件（二）.docx

PAGE6

PAGE6

PAGE7

PAGE7

PAGE

PAGE6

PAGE

PAGE7

PAGE

PAGE1

课题

表单组件与其他组件（二）

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解video、map及navigator组件的功能

（2）熟悉自定义组件的创建和使用方法

素质目标：

不断提高动手能力，达到学以致用的目的

教学重难点

教学重点：常用组件基础属性的设置方法

教学难点：使用video组件播放视频、使用map组件在地图上标记位置并绘制路线、使用navigator组件实现页面跳转

教学方法

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

教学用具

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

教学设计

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

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

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

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

请大家了解video、map、navigator组件的使用，以及自定义组件的方法。

【学生】完成课前任务

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

考勤

（2min）

【教师】使用APP进行签到

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

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

问题导入

（5min）

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

组件你可以理解为传统页面开发时候的各种标签，例如divspan等等，我这里只说一些常用的，这样就能能搭建出一个基本的页面了，但是如果想要更加美观以及拥有更好的体验，就需要XSS和别的一些强大的组件了，如果同学们想了解相关知识，可以去官方文档查阅一下。

（1）关于view标签，还有哪些额外的属性？

（2）image是一个什么样的组件，他的常用属性是什么？

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

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

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

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解video、map、navigator和自定义组件等知识

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

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

一、video

video组件用于播放视频，在页面显示为一个视频播放器。

属性

类型

默认值

说明

src

string

—

视频的资源地址，是组件唯一一个必填属性

controls

boolean

true

是否显示默认播放控件（播放/暂停按钮、播放进度、时间等）

enable-danmu

boolean

false

是否显示弹幕，只在初始化时有效，不能动态改变

danmu-btn

boolean

false

是否显示弹幕按钮，只在初始化时有效，不能动态改变

danmu-list

object[]

—

弹幕列表，包含text（弹幕文本）、color（弹幕文本颜色）和time（弹幕出现时间，单位为秒）3个属性

autoplay

boolean

false

是否自动播放

loop

boolean

false

是否循环播放

muted

boolean

false

是否静音播放

direction

number

—

全屏时视频的方向，不指定则根据宽高比自动判断，可选值有0（正常竖向）、90（屏幕逆时针旋转90°）、?90（屏幕顺时针旋转90°）

show-fullscreen-btn

boolean

true

是否显示全屏按钮

show-play-btn

boolean

true

是否显示视频底部控制栏的播放按钮

show-center-play-btn

boolean

true

是否显示视频中间的播放按钮

bindplay

eventhandle

—

开始或继续播放时触发的事件

bindpause

eventhandle

—

暂停播放时触发的事件

user-select

boolean

false

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

space

string

—

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

decode

boolean

false

是否解码

video组件的常用属性

?【教师】带领学生分析例5-8，并以小组为单位编写代码

编写代码，通过video组件实现播放