《微信小程序开发 教案 5.2 教案-基础内容组件.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 5.2 教案-基础内容组件.docx（2页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第5章小程序组件任务5.2基础内容组件课时内容基础内容组件课时12教学目标了解什么是基础内容组件及其作用；掌握基础内容组件分类；掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属 性与应用方法教学重难点掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属 性与应用方法的属性与应用方法教学设计1 .教学思路：介绍什么是基础内容组件及其作用，通过多媒体演示和实机操作讲解 微信小程序icon图标组件、text文本组件、rich-text富文本组件、progress进度条组 件的属性与应用方法与实现；通过
2、小程序实战巩固基础知识。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述本任务主要介绍小程序基础内容组件共有4种:icon图标组件、text文本组件、rich-text富文本组 件、progress进度条组件的属性与应用。本节的学习目标：(1) 了解什么是基础内容组件及其作用；(2)掌握基础内容组件分类；(3)掌握icon图标组件、text文本组件、rich-text富文本组件、progress进度条组件的属性与应用方 法二、导入新知1 .基础内容组件分类基础内容组件包括icon图标组件、text文本组件、rich-text富文本组件、progress进度条组
3、件。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组案例，包括元素节点(使用style样式)、元素节点（使用class样式）和文本节点，均用于实现同一种元素样式（div元素、行高60像素、红色加粗字体）。（4）列举4种进度条的情况，包括进度条右侧显示百分比、线条宽度为20Px的进度条、自定义颜 色的进度条、带有动画效果的进度条。四、任务实现略，详见教材代码。练习