微信小程序开发 教案 5.3 教案-表单组件.docx

《微信小程序开发 教案 5.3 教案-表单组件.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 5.3 教案-表单组件.docx（3页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第5章小程序组件任务5.3表单组件课时内容表单组件课时24教学目标了解什么是表单组件及其作用；掌握表单组件分类；掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单 行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、 switch开关选择器组件、textarea多行输入框组件的属性与应用方法。教学重难点掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单 行输入框组件、la

2、bel改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、 switch开关选择器组件、textarea多行输入框组件的属性与应用方法教学设计L教学思路：介绍什么是表单组件及其作用，通过多媒体演示和实机操作讲解微信 小程序button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input 单行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动

3、选择器组件、 switch开关选择器组件、textarea多行输入框组件的属性与应用方法与实现；通过小 程序实战巩固基础知识。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序表单组件button按钮组件、radio单项选择器组件、checkbox多项选择 器组件、input单行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选 择器组件、textarea多行输入框组件的属性与应用。本节的学习

4、目标：(1) 了解什么是表单组件及其作用；(2)掌握表单组件分类；(3)掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选择器组件、textarea多行输入框组件的属性与应用方法。二、导入新知1.表单组件分类微信小程序提供了丰富的表单组件：button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单行输入框组件、lab

5、el改进表单可用性组件、form表单组件10种表单组件、 picker滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开 关选择器组件、textarea多行输入框组件。2、button按钮组件3、radio单项选择器组件4 checkbox多项选择器组件5、input单行输入框组件6、label改进表单可用性组件7、form表单组件10种表单组件8、picker滚动选择器组件9、picker-viewer嵌入页面的滚动选择器组件10 slider滑动选择器组件11 switch开关选择器组件12 textarea多行输入框组件。三、实

6、现效果（1）使用表单组件button设置3组效果，包括迷你按钮、普通按钮的不同状态、单击按钮获得用户 信息。（2）使用表单组件radio,能成功识别选项的名称和选中状态，一旦选了新的选项，原先的选项将自 动取消选中状态，即为单选按钮。同时，当选项被改变时，在控制台会自动输出被选中的值。（3）使用表单组件checkbox,在checkbox.js的data中设置了一个数组checkboxitems,用于记录多 选选项的名称（name）、值（value）以及初始的选中状态（checked）。由图（a）可页面初始显示效果能成 功识别选项的名称和选中状态（默认“橙子”选项为选中效果）；允许手动进行多选

7、；当选项被改变 时在console控制台会自动输出所有被选中的值。（4）使用表单组件input实现5组效果，即密码输入框、最大字符长度限制为1。、禁用输入框、自 定义placeholder样式以及输入框事件监听。（5）使用表单组件label实现两组效果，包括使用for属性绑定id、直接将控件放到Ebel组件的内部。（6）使用表单组件form为其绑定监听事件bindsubmit二bnSubmit和bindreset=onRese,分别用于监 听表单的提交和重置动作。（7）使用表单组件picker,实现普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器 五种不同显示效果的选择器，通过改变

8、picker组件的mode属性值和bandchange属性值实现不同 选择器效果。（8）使用表单组件picker-view,用于模拟点餐，其内部包含了列,分别用于 显示西餐菜单中的汤、主食和甜点。（9）使用表单组件slider,实现4种滑动条的情况，即滑动条右侧显示当前取值、自定义滑动条颜 色和滑块样式、禁用滑动条（无法改变当前数值）、滑动条事件监听。（10）使用表单组件switch,实现使用switch标签配合checked属性实现默认选中的状态，并绑定 自定义单击事件switchChangeo（11）使用表单组件textarea,定义3组,分别用于测试，即自动变高、自定义占位符颜 色、被禁用状态。四、任务实现略，详见教材代码。练习