微信小程序开发案例教程-项目五 表单组件与其他组件.pptx

微信小程序开发案例教程主讲人:

全书目录微信小程序开发入门项目一微信小程序的视图项目二微信小程序的配置和逻辑项目三视图容器组件与基础内容组件项目四表单组件与其他组件项目五网络API与文件API项目六数据缓存API与用户信息API项目七媒体API与位置API项目八交互API与设备API项目九微信小程序云开发项目十“私房菜馆”微信小程序项目十一

项目五表单组件与其他组件

项目导读项目四对常用视图容器组件和基础内容组件进行了讲解，本项目将带领大家继续学习组件相关内容，具体包括常用表单组件及video、map、navigator、自定义组件的相关知识和使用方法。

知识目标了解button、checkbox和checkbox-group、radio和radio-group、picker、switch、input、textarea、label、form等常用表单组件的功能。掌握form组件的应用。了解video、map及navigator组件的功能。熟悉自定义组件的创建和使用方法。掌握常用组件基础属性的设置方法。技能目标不断提高动手能力，达到学以致用的目的。学习目标素质目标能够使用表单组件制作表单页面。能够使用video组件播放视频。能够使用map组件在地图上标记位置并绘制路线。能够使用navigator组件实现页面跳转。

2项目目录任务一表单组件任务二其他组件1

任务一表单组件（1）button （2）checkbox和checkbox-group（3）radio和radio-group （4）picker （5）switch （6）input （7）textarea （8）label （9）form

任务描述（1）带领大家学习常用的button、checkbox和checkbox-group、radio和radio-group、picker、switch、input、textarea、label和form等表单组件（2）使用这些组件制作“家电商城”微信小程序的建议反馈页面。

一、buttonbutton组件的常用属性属性类型默认值说明sizestringdefault按钮大小，可选值有default（默认大小）和mini（小尺寸）typestringdefault按钮类型，可选值有primary（基本类型）、default（默认类型）和warn（警告类型）plainbooleanfalse是否镂空（背景色透明）disabledbooleanfalse是否禁用loadingbooleanfalse按钮名称前是否显示加载动画图标form-typestring—可选值有submit（提交表单）和reset（重置表单），单击按钮会触发form组件的submit事件或reset事件open-typestring—微信开放能力hover-classstringbutton-hover点击时的样式类，none表示没有点击效果hover-start-timenumber20按住后多长时间出现点击态，单位为毫秒hover-stay-timenumber70松开后点击态保持的时间，单位为毫秒bindchooseavatareventhandle—获取用户头像时触发的事件，在open-type=chooseAvatar时有效表单组件

一、button通过该属性，button组件可以方便地使用微信小程序提供的开放能力。open-type属性的可选值contact（打开客服会话）share（触发用户转发）getPhoneNumber（手机号快速验证）getUserInfo（获取用户信息）launchApp（打开App）openSetting（打开授权设置页面）feedback（打开意见反馈页面）chooseAvatar（获取用户头像）

一、button【例5-1】在WXML文件中添加5个button组件，并在WXSS文件中为它们设置样式，代码如下。（1）WXML文件中的代码。buttondefault/buttonbuttonloading={{true}}default/buttonbuttontype=primaryprimary/buttonbuttontype=warnwarn/buttonbuttondisabled={{true}}不可点击的按钮/button（2）WXSS文件中的代码。button{margin-top:30rpx;margin-bottom:30rpx;}button组件示例运行效果

二、checkbox和checkbox-group在微信小程序中，checkbox和checkbox-group需要组合使用才能实现复选框功能。checkbox和checkbox-grou