第9章 微信小程序的组件-【千锋教育】微信小程序开发与实战（微课版）

第9章 微信小程序的组件 小程序组件介绍 视图容器组件 基础组件 表单组件 媒体组件 地图组件 01 02 04 05 03 06 目 录 CATALOUGUE 初心至善 匠心育人 小程序组件介绍 初心至善 匠心育人 小程序组件介绍 组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有UI视图层的展示，就必定要用到组件化。组件是UI视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。 初心至善 匠心育人 小程序组件介绍 视图容器组件 基础组件 表单组件 导航组件 媒体组件 地图组件 小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，包括： 初心至善 匠心育人 视图容器组件 初心至善 匠心育人 视图容器组件 视图容器组件主要用于控制页面的内容，与HTML中的<div>标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在该容器组件中。 初心至善 匠心育人 视图容器组件 view视图容器，这是在开发中最常用的一种容器组件； scroll-view可滚动视图容器； swiper轮播组件； movable-view可移动容器； cover-view覆盖在原生组件之上的文本视图。 视图容器组件包括： 初心至善 匠心育人 基础组件 初心至善 匠心育人 基础组件 text 文本组件 rich-text 富文本组件 progress 进度条组件 icon 图标组件 小程序提供的基础组件主要用于表示页面上的基础元素，一共有四种基础组件，包括： 初心至善 匠心育人 基础组件 text文本组件提供了三个属性 属性 类型 默认值 说明 user-select boolean false 文本是否可选 space string - 显示连续空格 decode boolean false 是否解码 初心至善 匠心育人 基础组件 progress进度条组件的属性 属性 类型 默认值 说明 percent number - 百分比0~100 show-info boolean false 在进度条右侧显示百分比 border-radius number/string 0 圆角大小 font-size number/string 16 右侧百分比字体大小 stroke-width number/string 6 进度条线的宽度 color string #09BB07 进度条颜色 activeColor string #09BB07 已选择的进度条的颜色 backgroundColor string #EBEBEB 未选择的进度条的颜色 active boolean false 进度条从左往右的动画 active-mode string backwards backwards: 动画从头播；forwards：动画从上次结束点接着播 duration number 30 进度增加1%所需毫秒数 初心至善 匠心育人 基础组件 小程序基础组件的icon图标组件是用法最为简单的一个组件，用于在页面中展示具有微信风格的一系列图标。在icon图标组件上可以通过type属性来设置图标的类型，type的值可以设置为： success，成功，用于表示操作顺利完成； info，提示，用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息； warn，警告，用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果； waiting，等待，用于表示等待，告知用户结果需等待 cancel，停止或关闭，用于在表单中，表示关闭或停止 download，下载，用于表示可下载； search，搜索，用于搜索控件中，表示可搜索； clear，关闭，用法与cancel类似。 初心至善 匠心育人 表单组件 初心至善 匠心育人 表单组件 button 按钮组件 input 输入框组件 radio 单选按钮组件 checkbox 复选框组件 switch 开关组件 form 表单组件 小程序提供的表单组件主要包括 初心至善 匠心育人 表单组件 // index.wxml <view class="form-body"> <view class="form-title">个人资料</view> <form catchsubmit="formSubmit" catchreset="formReset"> <view class="form-item"> <view class="form-item-title">姓名：</view> <input name="