《微信小程序开发零基础入门-第2版》教案(含习题) 第04章教案_小程序组件.doc

《微信小程序开发零基础入门-第2版》教案 第4章 小程序组件 一、教学目标： 理解什么是小程序组件； 掌握小程序视图容器组件的用法； 掌握小程序基础内容组件的用法； 掌握小程序表单组件的用法； 掌握小程序导航组件的用法； 掌握小程序媒体组件的用法； 掌握小程序地图组件的用法； 掌握小程序画布组件的用法。 二、教学重点和难点： 重点：掌握小程序基础内容组件和表单组件的用法； 难点：掌握小程序媒体、地图和画布组件的用法。 三、教学方法与手段： 采取互动式教学方法，理论教学使用多媒体投影教室。 四、课程简介： 本章主要内容是小程序组件，小程序提供了丰富的组件供开发者使用，利用这些组件可以进行快速开发。小程序组件按照其功能特点目前可分为视图容器、基础内容、表单、导航、媒体、地图和画布共七类组件。 五、教学基本内容： 小程序组件 组件介绍 小程序组件是视图层的基本组成单元，它自带微信风格UI样式和特定功能效果。例如，我们在小程序页面上所看到的图片、文本、按钮等都属于小程序组件。小程序为开发者提供了一系列基础组件，通过组合这些组件可以进行更高效地开发。 一个组件通常包括开始标签和/结束标签，在开始标签中可以追加属性来修饰组件，在首尾标签之内可以嵌套内容。 其语法格式如下： 标签名称 属性=值 内容 /标签名称 例如： text id=demo这是一段文本内容。/text 上述代码表示一个文本组件text，用于显示纯文字内容。该组件在本页面具有唯一id编号demo，其首尾标签之间是想要呈现出来的具体文本内容。需要注意的是，所有组件和属性都使用小写字母。 其中id属性是一个通用属性，可以被所有组件使用。小程序目前提供七类通用属性，如表4-1所示。 表4- SEQ 表4- \* ARABIC 1 小程序组件通用属性一览表 属性名称 类型 解释 备注 id String 组件的唯一标示 在同一个页面中用id值标示唯一组件，因此同一页不能有多个id值相同 class String 组件的样式类 该属性值在WXSS中进行定义和样式内容的设置 style String 组件的内联样式 可以动态设置内联样式 hidden Boolean 组件显示/隐藏 组件均默认是显示状态 data-* Any 自定义属性 当组件触发事件时，会附带将该属性和值发送给对应的事件处理函数 bind*/catch* EventHandler 组件的事件 绑定/捕获组件事件 注： 除上述7种通用属性外，绝大部分组件还带有自定义的特殊属性用于对组件的功能和样式进行修饰，这些属性将在各类组件中详细介绍。 组件分类 基础组件按照功能主要分类如下： 视图容器（View Container）：主要用于规划布局页面内容； 基础内容（Basic Content）：用于显示图标、文字等常用基础内容； 表单组件（Form）：用于制作表单； 导航组件（Navigation）：用于跳转指定页面； 媒体组件（Media）：用于显示图片、音频、视频等多媒体内容； 地图组件（Map）：用于显示地图效果； 画布组件（Canvas）：用于绘制图画内容。 视图容器 视图容器组件主要包含5种，如表4-2所示。 表4- SEQ 表4- \* ARABIC 2 视图容器组件一览表 组件名称 解释 view 视图容器 scroll-view 可滚动视图容器 swiper 滑块视图容器 movable-view 可移动视图容器 cover-view 可覆盖在原生组件之上的文本视图容器 基础视图view view是静态的视图容器，通常用view和/view首尾标签来表示一个容器区域。需要注意的是，view容器本身没有大小和颜色，需由开发者自行进行样式设置。 对应的属性如表4-3所示。 表4- SEQ 表4- \* ARABIC 3 view容器属性一览表 属性名 类型 默认值 说明 hover-class String none 指定按下去的样式类。如果是默认值none，则没有点击状态 hover-stop-propagation Boolean false 指定是否阻止本容器的祖先节点出现点击状态（1.5.0以上版本有效） hover-start-time Number 50 按住本容器后多久出现点击状态（单位：毫秒） hover-stay-time Number 400 手指松开后点击状态保留时长（单位：毫秒） 【例4- SEQ 例4- \* ARABIC 1】视图容器view的简单应用 本示例在view.wxml中使用了两组父子view容器嵌套效果，并在view.wxss文件中分别定义它们的class属性值为view_parent和view_son。默认样式效果相同，父容器均为浅蓝色背景、宽100%、高300