- 1、本文档共47页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
《微信小程序开发零基础入门-第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
您可能关注的文档
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第03章教案_小程序框架.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第01章教案_微信小程序入门.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第02章教案_第一个微信小程序.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第05章教案_网络API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第06章教案_媒体API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第07章教案_文件API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第08章教案_数据缓存API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第09章教案_位置API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第10章教案_设备API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第11章教案_界面API.doc
文档评论(0)