微信小程序开发项目教程慕课版教案 1032页.docx
《微信小程序开发项目教程慕课版教案 1032页.docx》由会员分享，可在线阅读，更多相关《微信小程序开发项目教程慕课版教案 1032页.docx（60页珍藏版）》请在冰点文库上搜索。
微信小程序开发项目教程慕课版教案1032页
第6章莫凡商城的注册、登录功能
课时内容
微信小程序表单组件
课时
2
教学目标
掌握微信小程序表单组件的使用
掌握注册功能的实现
教学重点
微信小程序表单组件
教学难点
微信小程序表单组件
教学设计
1.教学思路：
通过多媒体演示和实机操作讲解微信小程序各类表单组件的使用；通过实战实现注册功能。
2.教学手段：
多媒体+计算机
3.教学资料：
教材、多媒体课件
教学内容
6.1微信小程序表单组件
微信小程序提供了丰富的表单组件，包括button按钮组件、checkbox多选项目组件、radio单选项目组件、form表单组件、input单行输入框组件、textarea多行输入框组件、label改进表单可用性组件、picker从底部弹起的滚动选择器组件、switch开关选择器组件、slider滑动选择器组件。
6.1.1button按钮组件
button按钮组件提供了3种类型的按钮：
基本类型按钮、默认类型按钮及警告类型按钮，按钮的大小有默认和迷你两种，如图所示。
按钮的类型和大小
button按钮组件有很多属性，每个属性有不同的作用，如表所示。
button按钮组件的属性
属性
类型
默认值
说明
size
string
default
按钮的大小，有效值为default、mini
type
string
default
按钮的样式类型，有效值：
基本类型为primary，默认类型为default，警告类型为warn
续表
属性
类型
默认值
说明
plain
boolean
false
按钮是否镂空，背景色透明
disabled
boolean
false
是否禁用
loading
boolean
false
名称前是否带loading图标
form-type
string
无
有效值为submit、reset，用于
组件，单击分别会触发submit、reset事件
open-type
string
否
微信开放能力，详见表后关于open-type合法值的介绍
hover-class
string
button-hover
指定按钮按下去的样式类。
当hover-class="none"时，没有单击态效果
hover-stop-propagation
boolean
false
指定是否阻止本节点的祖先节点出现单击态
hover-start-time
number
20
按住后多久出现单击态，单位为毫秒
hover-stay-time
number
70
手指松开后单击态的保留时间，单位为毫秒
lang
string
en
指定返回用户信息的语言，zh_CN为简体中文，zh_TW为繁体中文，en为英文
session-from
string
会话来源，open-type="contact"时有效
send-message-title
string
当前标题
会话内消息卡片标题，open-type="contact"时有效
send-message-path
string
当前分享路径
会话内消息卡片单击跳转小程序路径，open-type="contact"时有效
send-message-img
string
截图
会话内消息卡片图片，open-type="contact"时有效
app-parameter
string
打开App时，向App传递的参数，open-type=launchApp时有效
show-message-card
boolean
false
是否显示会话内消息卡片，设置此参数为true，用户进入客服会话会在右下角显示“可能要发送的小程序”提示，用户单击后可以快速发送小程序消息，open-type="contact"时有效
bindgetuserinfo
eventhandle
用户单击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
bindcontact
eventhandle
客服消息回调，open-type="contact"时有效
bindgetphonenumber
eventhandle
获取用户手机号回调，open-type=getPhonenumber时有效
binderror
eventhandle
当使用开放能力时，发生错误的回调，open-type=launchApp时有效
bindopensetting
eventhandle
在打开授权设置页后回调，open-type=openSetting时有效
bindlaunchapp
eventhandle
打开App成功的回调，open-type=launchApp时有效
open-type的合法值详解如下。
（1）contact：
打开客服会话，如果用户在会话中单击消息卡片后返回小程序，则可以从bindcontact回调中获得具体信息。
（2）share：
触发用户转发，使用前建议先阅读使用指引。
（3）getPhonenumber：
获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息。
（4）getUserInfo：
获取用户信息，可以从bindgetuserinfo回调中获取到用户信息。
（5）launchApp：
打开App，可以通过app-parameter属性设定向App传递参数。
（6）openSetting：
打开授权设置页。
（7）feedback：
打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。
从按钮属性中可以看出，按钮可以设置不同大小、不同类型、是否镂空、是否禁用、按钮名称前是否带loading图标等，针对form表单组件，按钮组件提供了提交表单和重置表单两个功能，具体代码如下。
disabled="{{disabled}}"bindtap="default"style="margin:
10px">default
disabled="{{disabled}}"bindtap="primary"style="margin:
10px">primary
disabled="{{disabled}}"bindtap="warn"style="margin:
10px">warn
10px">单击设置以上按钮disabled属性
10px">单击设置以上按钮plain属性
10px">单击设置以上按钮loading属性
vartypes=['default','primary','warn']
varpageObject={
data:
{
defaultSize:
'default',
primarySize:
'default',
warnSize:
'default',
disabled:
false,
plain:
false,
loading:
false
},
setDisabled:
function（e）{
this.setData（{
disabled:
!
this.data.disabled
}）
},
setPlain:
function（e）{
this.setData（{
plain:
!
this.data.plain
}）
},
setLoading:
function（e）{
this.setData（{
loading:
!
this.data.loading
}）
}
}
for（vari=0;i（function（type）{
pageObject[type]=function（e）{
varkey=type+'Size'
varchangedData={}
changedData[key]=
this.data[key]==='default'?
'mini':
'default'
this.setData（changedData）
}
}）（types[i]）
}
Page（pageObject）
界面效果如图所示。
按钮效果
6.1.2checkbox多选项目组件
checkbox多选项目组件，也叫多项选择器，同时也是我们常说的复选框，常用来进行多项选择，它的属性如表所示。
checkbox多选项目组件的属性
属性
类型
默认值
说明
value
string
标识，选中时触发的change事件，并携带的value
disabled
boolean
false
是否禁用
checked
boolean
false
当前是否选中，可用来设置默认选中
color
Color
checkbox的颜色，同CSS的color
checkbox-group是用来容纳多个checkbox的多项选择器容器，它有一个绑定事件bindchange，中的选中项发生变化时会触发change事件，detail={value：
[选中的checkbox的value的数组]}。
下面演示一下checkbox多选项目组件的使用，以及获取选中的value值的方法。
（1）在WXML文件里使用checkbox进行界面布局，具体代码如下。
center;margin:
10px;">
篮球
足球
排球
橄榄球
（2）在JS文件里，添加checkboxChange事件函数，获取复选框选中的值，将其打印出来，具体代码如下。
Page（{
checkboxChange:
function（e）{
console.log（e.detail.value）
}
}）
界面效果如图所示。
多选项目value值
从图中可以看出，被禁用的多选项目是不能使用的，通过绑定bindchange事件，选项改变时会将多选项目的值以数组的形式存在detail里，通过e.detail.value就可以获取到多选项目的值。
多选项目的样式是可以重新定义的，可以不使用默认的效果，下面自定义多选项目的样式，添加WXSS样式代码。
/*checkbox整体大小*/
checkbox{
width:
200rpx;
height:
80rpx;
}
/*checkbox选项框大小*/
checkbox.wx-checkbox-input{
width:
50rpx;
height:
50rpx;
}
/*checkbox选中后样式*/
checkbox.wx-checkbox-input.wx-checkbox-input-checked{
background:
#f50410;
}
/*checkbox选中后图标样式*/
checkbox.wx-checkbox-input.wx-checkbox-input-checked:
:
before{
width:
28rpx;
height:
28rpx;
line-height:
28rpx;
text-align:
center;
font-size:
22rpx;
color:
#fff;
background:
transparent;
transform:
translate（-50%,-50%）scale
（1）;
-webkit-transform:
translate（-50%,-50%）scale
（1）;
}
效果如图所示。
修改多选项目样式
6.1.3radio单选项目组件
radio单选项目组件，也叫单项选择器，是很常用的表单组件，每次只能选中一个选项，选项间是互斥关系，如用来选择性别，“男”或“女”选项只能选其一，它的属性如表所示。
radio单选项目组件的属性
属性
类型
默认值
说明
value
string
标识。
当该被选中时，的change事件会携带的value
disabled
boolean
false
是否禁用
checked
boolean
false
当前是否选中，可用来设置默认选中
color
Color
radio的颜色，同CSS的color
radio-group是用来容纳多个radio单选项目组件的单项选择器容器，它有一个绑定事件bindchange，中的选中项发生变化时会触发bindchange事件，event.detail={value：
选中项radio的value}。
下面演示一下radio单选项目组件的使用。
（1）在WXML文件里使用radio单选项目进行界面布局，具体代码如下。
center;margin:
10px;">
男
女
未知
（2）在JS里，添加radioChange事件函数，获取单选项目选中的值，将其打印出来，具体代码如下。
Page（{
radioChange:
function（e）{
console.log（'radio发生change事件,携带value值为:
',e.detail.value）
}
}）
界面效果如图所示。
单选项目value值
从图6.5中可以看出，被禁用的单选项目是不能使用的，在radio-group上绑定bindchange事件，每次勾选时，只能使一个选项呈现为选中状态，同时会把相应的值存在detail里。
6.1.4input输入框组件
input输入框组件是用来输入单行文本内容的，它的属性如所示。
input输入框组件的属性
属性
类型
默认值
说明
value
string
输入框的初始内容
type
string
text
表示input的类型，有效值为text（文本输入键盘）、number（数字输入键盘）、idcard（身份证输入键盘）、digit（带小数点的数字键盘）
password
boolean
false
是否是密码类型
placeholder
string
输入框为空时的占位符
placeholder-style
string
指定placeholder的样式
placeholder-class
string
input-placeholder
指定placeholder的样式类
disabled
boolean
false
是否禁用
maxlength
number
140
最大输入长度，设置为-1时不限制最大长度
cursor-spacing
number
0
指定光标与键盘的距离，取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
auto-focus
boolean
false
自动聚焦，拉起键盘（即将废弃，可直接使用focus）
focus
boolean
false
获取焦点
confirm-type
string
done
设置键盘右下角按钮的文字，仅在type='text'时生效，有效值为send（发送）、search（搜索）、next（下一个）、go（前往）、done（完成）
confirm-hold
boolean
false
单击键盘右下角的按钮时是否保持键盘不收起
cursor
number
指定focus时的光标位置
selection-start
number
-1
光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end
number
-1
光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position
boolean
true
键盘弹起时，是否自动上推页面
hold-keyboard
boolean
false
focus时，单击页面时不收起键盘
bindinput
eventHandle
当用键盘输入时，触发input事件，event.detail={value:
value}，处理函数可以直接return一个字符串，将替换输入框的内容
bindfocus
eventHandle
输入框聚焦时触发，event.detail={value:
value}
bindblur
eventHandle
输入框失去焦点时触发，event.detail={value:
value}
bindconfirm
eventHandle
单击“完成”按钮时触发，event.detail={value:
value}
bindkeyboardheightchange
eventhandle
键盘高度发生变化时触发此事件，event.detail={height:
height,duration:
duration}
从表6.4中可以看出以下几点。
（1）可以设置input输入框的类型，有text文本输入键盘、number数字输入键盘、idcard身份证输入键盘、digit带小数点的数字键盘，可根据不同的场景使用不同的输入类型。
（2）可以设置输入框是否为密码类型，如果是密码类型，则会用点号代替具体值显示，这也是密码输入框的常用处理方式。
（3）通过placeholder来给输入框添加友好的提示信息，如“请输入手机号/用户名/邮箱”，用placeholder-style设置提示信息的样式，用placeholder-class设置提示信息的class，然后再针对这个class添加样式。
（4）可以设置input输入框禁用和最大长度，并获取焦点。
（5）input输入框有3个常用的事件：
键盘输入时（bindinput）事件、输入框聚焦时（bindfocus）事件、失去焦点时（bindblur）事件。
示例代码如下。
（1）在WXML中利用input输入框进行布局，具体代码如下。
10px">
使得输入框获取焦点
你输入的是:
{{inputValue}}
red"placeholder="占位符字体是红色的"/>
（2）在JS文件中给
升级会员 