微信小程序开发 教案 第5章 小程序组件

1、第5章小程序组件任务5.1视图容器组件课时内容视图容器组件课时12教学目标了解什么是小程序的组件与组件的作用；掌握组件分类；掌握view视图容器、scroll-view可滚动视图区域、swiper滑块视图容器、movableview 可移动视图容器、cover-view覆盖原生组件的属性与应用方法教学重难点掌握view视图容器、scroll-view可滚动视图区域、swiper滑块视图容器、movableview 可移动视图容器、cover-view覆盖原生组件的属性与应用方法教学设计L教学思路：介绍什么是小程序的组件与组件的作用，通过多媒体演示和实机操作 讲解微信小程序view视图容器、sc

2、roll-view可滚动视图区域、swiper滑块视图容 器、movable-view可移动视图容器、cover-view覆盖原生组件的属性与应用方法 的分类、属性与实现；通过小程序实战巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序视图容器组件共有5种:view视图容器、scroll-view可滚动视图区域、 swiper滑块视图容器、movable-view可移动视图容器、cover-view覆盖原生组件的视图容器的属性 与应用。本节的学习目标：(1)熟悉什么是小程序的组件与组件的作用；(2)掌握组件分类；(3)掌握view视图容

3、器、scroll-view可滚动视图区域、swiper滑块视图容器、movable-view可移动视图容器、cover-view覆盖原生组件的属性与应用方法以下来分别介绍文件上传和文件下载两种功能的程序编写。二、导入新知.组件介绍小程序组件是视图层的基本组成单元，它自带微信风格UI样式和特定功能效果。例如，我们在 小程序页面上所看到的图片、文本、按钮等都属于小程序组件。小程序为开发者提供了一系列基础 组件，通过组合这些组件可以进行更高效地开发。.组件分类基础组件按照功能主要分类如下：视图容器(View Container)：主要用于规划布局页面内容；基础内容(Basic Content)：用于

4、显示图标、文字等常用基础内容；表单组件(Form)：用丁制作表单；导航组件(Navigation)：用于跳转指定页面；媒体组件(Media)：用于显示图片、音频、视频等多媒体内容；地图组件(Map)：用于显示地图效果；视野。在map.wxml中声明了一个map组件用于显示地图，并在map.wxss中定义其样式为宽100%、 高600rpx。在map.js的data中设置了经纬度坐标和标记点信息(标记点id、图标、标签文本内容)。十四、任务实现略，详见教材代码。练习第5章小程序组件任务5.7画布组件课时内容画布组件课时4教学目标了解什么是画布组件及其作用；掌握画布组件常用的属性与应用方法。教学重

5、难点掌握画布组件常用的属性与应用方法。教学设计L教学思路：介绍什么是画布组件及其作用，通过多媒体演示和实机操作讲解微信 小程序了解什么是画布组件及其作用；掌握画布组件常用的属性与应用方法；通过 小程序实战巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述canvas画布组件用来绘制正方形、圆形或者 些其他的形状。本任务要求使用国图组件canvas, 使用画布绘制简笔画。本节的学习目标：(1) 了解什么是画布组件及其作用；(2)掌握画布组件常用的属性与应用方法。二、导入新知canvas组件常用属性十五、实现效果在canvas.wxml中声明了一个canvas

6、组件用于绘制图画，并在map.wxss中定义其样式为宽 100%高600rpx。在canvas.js的data中创建画布、设置填充颜色、设置填充区域为矩形、画图。十六、任务实现略，详见教材代码。练习画布组件(Canvas)：用于绘制图画内容。3.视图容器组件分类视图容器组件主要包含5种。4. view视图容器、scroll-view可滚动视图区域、swiper滑块视图容器、movable.view可移动视 图容器、cover-view覆盖原生组件的属性。三、实现效果(1)在view.wxml中使用了两组父子view容器的嵌套效果，并在view.wxss文件中分别定义它们的 class 属性值为

7、 view_parent 和 view_sono(2)在scroll-view.wxml中设置了两组scroll-view组件，分别使用属性scroll-y和scroll-x定义众向和横向滚动。在每组vscroll-view内部均包含3 jview用于标识第几页。(3)在swiper.wxml中设置了一个可以自动播放的swiper组件，每隔6秒翻页且翻页动画效果持续3秒完成。(4)包含了 3 组效果，即 movable-view的尺寸在v movable-area范围内、 movable-view的尺寸大于v movable-area的范围、vmovable-vlew的尺寸可缩放。(5)在co

8、ver-view.wxml中放置了一个map组件用于显示默认地图画面，并在其内部放置了一个 cover-view用于覆盖在地图上方。四、任务实现略，详见教材代码。练习第5章小程序组件任务5.2基础内容组件课时内容基础内容组件课时12教学目标了解什么是基础内容组件及其作用；掌握基础内容组件分类；掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属 性与应用方法教学重难点掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属 性与应用方法的属性与应用方法教学设计.教学思路：介绍什么是基础内容组件及其作用，

9、通过多媒体演示和实机操作讲解 微信小程序icon图标组件、text文本组件、rich-text富文本组件、progress进度条组 件的属性与应用方法与实现；通过小程序实战巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序基础内容组件共有4种:icon图标组件、text文本组件、rich-text富文本组 件、progress进度条组件的属性与应用。本节的学习目标：(1) 了解什么是基础内容组件及其作用；(2)掌握基础内容组件分类；(3)掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属

10、性与应用方 法二、导入新知1 .基础内容组件分类基础内容组件包括icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件。2 icon图标组件属性3、text文本组件属性4、rich-text富文本组件属性5、progress进度条组件属性五、实现效果(1)在icon.wxml中使用bk)ck标签配合wx:for循环实现批量生成多个组件的效果，图标的类型、颜色和大小均可以自由变化。(2)使用text组件在text.wxml中放置3组案例，包括文本可选、空格显示形式和文本解码。(3)使用rich-text组件在rich-text.wxml中放置3组案例，包括元

11、素节点(使用style样式)、元素节点（使用class样式）和文本节点，均用于实现同一种元素样式（div元素、行高60像素、红色加粗字体）。（4）列举4种进度条的情况，包括进度条右侧显示百分比、线条宽度为20Px的进度条、自定义颜 色的进度条、带有动画效果的进度条。六、任务实现略，详见教材代码。练习第5章小程序组件任务5.3表单组件课时内容表单组件课时24教学目标了解什么是表单组件及其作用；掌握表单组件分类；掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单 行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker

12、滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、 switch开关选择器组件、textarea多行输入框组件的属性与应用方法。教学重难点掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单 行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、 switch开关选择器组件、textarea多行输入框组件的属性与应用方法教学设计.教学思路：介绍什么是表单组件及其作用，通过多媒

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

14、 器组件、input单行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker 滚动选择器组件、picker-viewer嵌入页面的滚动选择器组件、slider滑动选择器组件、switch开关选 择器组件、textarea多行输入框组件的属性与应用。本节的学习目标：(1) 了解什么是表单组件及其作用；(2)掌握表单组件分类；(3)掌握button按钮组件、radio单项选择器组件、checkbox多项选择器组件、input单行输入框组件、label改进表单可用性组件、form表单组件10种表单组件、picker滚动选择器组件、picker-viewer嵌入页面的

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

16、择器组件5、input单行输入框组件6 label改进表单可用性组件7、form表单组件10种表单组件8、picker滚动选择器组件9、picker-viewer嵌入页面的滚动选择器组件10、slider滑动选择器组件11、switch开关选择器组件12 textarea多行输入框组件。七 实现效果(1)使用表单组件button设置3组效果，包括迷你按钮、普通按钮的不同状态、单击按钮获得用户 信息。(2)使用表单组件radio,能成功识别选项的名称和选中状态，一旦选了新的选项，原先的选项将自 动取消选中状态，即为单选按钮。同时、当选项被改变时，在控制台会自动输出被选中的值。(3)使用表单组件c

17、heckbox,在checkbox.js的data中设置了一个数组checkboxitems,用于记录多 选选项的名称(name)、值(value)以及初始的选中状态(checked)。由图(a)可页面初始显示效果能成 功识别选项的名称和选中状态(默认“橙子”选项为选中效果)；允许手动进行多选；当选项被改变 时在console控制台会自动输出所有被选中的值。（4）使用表单组件input实现5组效果，即密码输入框、最大字符长度限制为1。、禁用输入框、自 定义placeholder样式以及输入框事件监听。（5）使用表单组件label实现两组效果，包括使用for属性绑定id、直接将控件放到label

18、组件的内部。（6）使用表单组件form为其绑定监听事件bindsubmi匚bnSubmitKll bindreset=onRese,分别用于监 听表单的提交和重置动作。（7）使用表单组件picker,实现普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器 五种不同显示效果的选择器，通过改变picker组件的mode属性值和bandchange属性值实现不同 选择器效果。（8）使用表单组件picker-view,用于模拟点餐，其内部包含了列picker-view-column,分别用于 显示西餐菜单中的汤、主食和甜点。（9）使用表单组件slider,实现4种滑动条的情况，即滑动条右侧显

19、示当前取值、自定义滑动条颜 色和滑块样式、禁用滑动条（无法改变当前数值）、滑动条事件监听。（10）使用表单组件switch,实现使用switch标签配合checked属性实现默认选中的状态，并绑定 自定义单击事件switchChangeo（11）使用表单组件textarea,定义3组textarea,分别用于测试，即自动变高、自定义占位符颜 色、被禁用状态。八、任务实现略，详见教材代码。练习第5章小程序组件任务5.4导航组件课时内容导航组件课时4教学目标了解什么是导航组件及其作用；掌握导航组件navigator的属性与应用方法。教学重难点掌握导航组件navigator的属性与应用方法。教学设计

20、L教学思路：介绍什么是导航组件及其作用，通过多媒体演示和实机操作讲解微信 小程序了解什么是导航组件及其作用；掌握导航组件navigator的属性与应用方 法。；通过小程序实战巩固基础知识。教学设计.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述微信小程序可以在页面中设置导航，可以使用navigator页面链接组件，也可以在js文件里设置导 航进行页面跳转，同时可以设置导航条标题和显示动画效果。本任务要求使用导航组件navigator,在navigator.wxml初始页面使用两个navigator组件分别用于打开new.wxml和redirect.wxmlo本节的学习

21、目标：(1) 了解什么是导航组件及其作用； 掌握导航组件 n a v i g a tor 的属性与应用方法。二、导入新知.导航组件导航组件navigator,用于点击跳转页面链接。.导航组件的属性包括 Navigate、 redirect、 switchTab、 reLaunch、 navigateBack 的属性。九、实现效果使用导航组件navigator,在navigator.wxml初始页面使用两个navigator组件分别用于打开 new.wxml 和 redirect.wxmL十、任务实现略，详见教材代码。练习第5章 小程序组件任务5.5媒体组件课时内容媒体组件课时4教学目标了解什么

22、是媒体组件及其作用；掌握audio音频组件、image图片组件、video视频组件、camera相机组件的属性 与应用方法。教学重难点掌握audio音频组件、image图片组件、video视频组件、camera相机组件的属性 与应用方法。教学设计.教学思路：介绍什么是媒体组件及其作用，通过多媒体演示和实机操作讲解微信 小程序了解什么是媒体组件及其作用；掌握audio音频组件、image图片组件、video 视频组件、camera相机组件的属性与应用方法。；通过小程序实战巩固基础知识。.教学手段：多媒体+计算机.教学资料：教材、多媒体课件教学内容一、任务描述媒体组件有audio音频组件、image图片组件、video视频组件、camera相机组件。audio音频组 件用来播放音乐，Image图片组件用来显示图片，video视频组件用来播放视频，camera相机组件 用于开启相机功能。本任务要求使用媒体组件audio组件和butt