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

PAGE6

PAGE6

PAGE7

PAGE7

PAGE

PAGE6

PAGE

PAGE7

PAGE

PAGE1

课题

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

课时

2课时（90min）

教学目标

知识技能目标：

（1）了解button、checkbox和checkbox-group、radio和radio-group、picker、switch、input、textarea、label、form等常用表单组件的功能

（2）掌握form组件的应用

素质目标：

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

教学重难点

教学重点：常用表单组件的功能

教学难点：能够使用表单组件制作表单页面

教学方法

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

教学用具

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

教学设计

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

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

教学过程

主要教学内容及步骤

设计意图

第一节课

课前任务

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

请大家提前熟悉表单组建中常用的button、checkbox和checkbox-group、radio和radio-group、picker、switch、input、textarea、label和form等组件，并对制作微信小程的建议反馈页面有个初步了解。

【学生】完成课前任务

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

考勤

（2min）

【教师】使用APP进行签到

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

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

问题导入

（5min）

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

我们在开发微信小程序时，当点击form表单中form-type为submits的button组件时会将表单组建中的value进行提交，学要在表单组建中加上name来作为key。

（1）如何一次性获取所有表单控件的值并且提交到服务器上去呢？

（2）怎样使用form把所有子元素包含进去？

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

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

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

传授新知

（38min）

【教师】通过学生的发言，引入新的知识，讲解常用表单组件的功能

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

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

一、button

属性

类型

默认值

说明

size

string

default

按钮大小，可选值有default（默认大小）和mini（小尺寸）

type

string

default

按钮类型，可选值有primary（基本类型）、default（默认类型）和warn（警告类型）

plain

boolean

false

是否镂空（背景色透明）

disabled

boolean

false

是否禁用

loading

boolean

false

按钮名称前是否显示加载动画图标

form-type

string

—

可选值有submit（提交表单）和reset（重置表单），单击按钮会触发form组件的submit事件或reset事件

open-type

string

—

微信开放能力

hover-class

string

button-hover

点击时的样式类，none表示没有点击效果

hover-start-time

number

20

按住后多长时间出现点击态，单位为毫秒

hover-stay-time

number

70

松开后点击态保持的时间，单位为毫秒

bindchooseavatar

eventhandle

—

获取用户头像时触发的事件，在open-type=

chooseAvatar时有效

button组件的常用属性

open-type属性的可选值有contact（打开客服会话）、share（触发用户转发）、getPhoneNumber（手机号快速验证）、getUserInfo（获取用户信息）、launchApp（打开App）、openSetting（打开授权设置页面）、feedback（打开意见反馈页面）、chooseAvatar（获取用户头像）。通过该属性，button组件可以方便地使用微信小程序提供的开放能力。

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

编写代码，在WXML文件中添加5个button组件，并在WXSS文件中为它们设置样式。

……（详见教材）

?