小程序组件

1.知识点

（1）利用正则表达式验证邮箱的方法。

（2）模态对话框API函数wx.showModal(Object object)的使用方法。

（3）页面跳转API函数wx.navigateTo(Object object)的使用方法。

（4）form、input、button等组件的使用方法。

2.相关知识总结

2.1正则表达式

2.1.1正则表达式由一些普通字符和一些元字符组成。普通字符包括大小写字母和数字，而元字符则具有特殊含义。正则表达式常用元字符含义如表2.1所示。

                                              表 2.1 正则表达式常用元字符含义

元字符	描述
\	转义字符标识符
^	匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置
$	匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置
*	匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。等价于{0，}
+	匹配前面的子表达式一次或多次（大于等于1次）
？	匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”。等价于{0，1}
{n}	n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o
{n,m}	m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次
[a-z]	字符范围。匹配指定范围内的任意字符。例如，[a-z]可以匹配“a”到“z”范围内的任意小写字母字符。注意：只有连字符在字符组内部时，并且出现在两个字符之间时，才能表示字符的范围；如果出现在字符组的开头，则只能表示连字符本身
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，【^a-z】可以匹配任何不在“a”到“z”范围内的任意字符
\d	匹配一个数字字符。等价于[0-9]。grep要加上-P，perl正则支持
\D	匹配一个非数字字符。等价于【^0-9】。grep要加上-P，perl正则支持
\s	匹配任何不可见字符，包括空格、制表符、换页符等。等价于[\f\n\r\t\v]
\S	匹配任何可见字符。等价于【^\f\n\r\t\v】
\w	匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的“单词”字符使用Unicode字符集
\W	匹配任何非单词字符。等价于“【^A-Za-z0-9_】”

2.1.2利用正则表达式验证电子邮箱。如下正则表达式的含义：

/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/

（1）正则表达式以符号/^开始，以符号$/结束。
（2）@之前的表达式[a-zA-Z0-9_.-]+表示字符串必须由1个及1个以上的大小写字母、数字、下划线、点或横杠组成，+号表示前面字符出现次数必须大于或等于1.
（3）@之后的表达式[a-zA-Z0-9-]+表示字符串必须由1个及1个以上的大小的大小写字母、数字或横杠组成。
（4）(\.[a-zA-Z0-9-]+)*表示后面字符串第一个字符必须是点，点后面字符串必须由1个及1个以上的大小写字母、数字或横杠组成。*表示匹配前面的子表达式任意次。
（5）\\.[a-zA-Z0-9]{2,6}表示最后一个表达式由2~6个字母或数字构成。

2.2显示模态对话框的API函数wx.showModal（Object object）

模态对话框与非模态对话框的区别是：模态对话框显示时不能操作该应用程序的其他窗口界面，而非模态对话框显示时可以操作该应用程序的其他窗口界面。显示模态对话框的API函数参数属性表如表2.2所示。

                        表 2.2 API函数wx.showModal（Object object）的参数属性说明

属性	类型	默认值	必填	说明
title	string		是	提示的标题
content	string		是	提示的内容
showCancel	boolean	TRUE	否	是否显示“取消”按钮
cancelText	string	'取消'	否	“取消”按钮的文字，最多4个字符
cancelColor	string	#000000	否	“取消”按钮的文字颜色，必须是十六进制格式的颜色字符串
confireText	string	'确定'	否	“确定”按钮的文字，最多4个字符
confirmColor	string	#576B95	否	“确定”按钮的文字颜色，必须是十六进制格式的颜色字符串
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success(Object res)回调函数的参数Object res的属性如下表2.3所示。

                             表 2.3 object.success回调函数参数object res的属性

属性	类型	说明
confirm	boolean	为TRUE时，表示用户点击了“确定”按钮
cancel	boolean	为TRUE时，表示用户点击了“取消”按钮（用于Android系统区分点击蒙层关闭还是点击“取消”按钮关闭）

2.3页面跳转API函数wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabBar页面。使用wx.navigateBack可以返回到原页面。小程序中页面最多10层。参数Object object的属性出success、fail和complete三个回调函数外，还有一个string类型的必填属性url，表示需要跳转的应用内非tabBar的页面的路径，路径后可以带参数。

2.4form表单

form表单组件用于将用户在其内部组件switch、input、checkbox、silder、picker内输入的内容提交。当点击form表单的form-type为submit的button组件时，会将表单组件中的value值进行提交，需要在表单内各组件中加上name来区分不同组件的value。form组件常用属性说明如下表2.4所示。

                                              表 2.4 form组件常用属性说明

属性	类型	必填	说明
bindsubmit	eventhandle	否	携带form中的数据触发submit事件，event.detail={value:{'name':'value'},formId:''}
bindreset	eventhandle	否	表单重置时会触发reset事件

2.5picker选择器组件

2.5.1picker组件是从屏幕底部弹起的滚动选择器，现支持5中类型的选择器，通过mode来区分，分别是：普通选择器、多列选择器、时间选择器、日期选择器、省市选择器，默认的是普通选择器。各种类型picker组件的属性说明如下表2.5~2.9所示。

                                 表 2.5 普通选择器(mode=selector)的属性说明

属性	类型	默认值	说明
range	array/object array	[]	mode为selector或multiSelector时，range有效
range-key	string		当range是一个object array时，通过range-key来指定Object中key的值作为选择器显示内容
value	number	0	value的值表示选择了range中的第几个（下标从0开始）
bindchange	eventHandle		value改变时触发change事件，event.detail={value:value}

                             表 2.6 多列选择器(mode=multiSelector)的属性说明

属性	类型	默认值	说明
range	二维array/二维object array	[]	mode为selector或multiSelector时，range有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"],["c","d"]]
range-key	string		当range是一个object array时，通过二维range-key来指定Object中key的值作为选择器显示内容
value	array	[]	value每一项的值表示选择了range中的第几个（下标从0开始）
bindchange	eventhandle		value改变时触发change事件，event.detail={value:value}
bindcolumnchange	eventhandle		某一列的值改变时触发，columnchange事件，event.detail={column:column,value:value}，column的值表示改变了第几列（下标从0开始），value的值表示变更值的下标

                                        表 2.7 时间选择器(mode=time)的属性说明

属性	类型	默认值	说明
value	string		表示选中的时间，格式为"hh:mm"
start	string		表示有效时间范围的开始，字符串格式为"hh:mm"
end	string		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	eventhandle		value改变时触发change事件，event.detail={value:value}

                                       表 2.8 日期选择器(mode=date)的属性说明

属性	类型	默认值	说明
value	string	0	表示选中的日期，格式为"YYYY-MM-DD"
start	string		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	string		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	string	day	有效值year，month，day，表示选择器的粒度
bindchange	eventhandle		value改变时触发change事件，event.detail={value:value}

                                    表 2.9 省市选择器(mode=region)的属性说明

属性	类型	默认值	说明
value	array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	string		可为每一列的顶部添加一个自定义的项
bindchange	eventhandle		value改变时触发change事件，event.detail={value:value,code:code,postcode:postcode}，其中字段code时统计用区划代码，postcode时邮政编码

3.案例分析

3.1案例描述

编写一个考生选择考试场次的小程序，考生首先利用邮箱和密码登录，输入自己的姓名和学号后选择考试场次。考生登陆时需要进行邮箱和密码认证，如果某项输入为空，或者邮箱填写不正确，或者输入的密码和确认密码不一致，将给出错误提示并要求重新填写。

3.2实现效果

根据案例描述可以做出如下图所示的效果。

（1）在没有输入邮箱或密码情况下点击“登录”按钮，则会出现如图01所示的界面，在此时界面下方给出了“邮箱或密码不得为空！”的提示。

（2）输入邮箱地址时，邮箱地址input组件的边框颜色发生变化，如果邮箱格式输入不正确，则在输入完成时会显示“邮箱格式错误”的提示。

（3）输入密码时，如果两次输入的密码不一致，点击“登录”按钮会给出“两次输入密码不一致”的提示，如图02所示。

（4)如果邮箱和密码都正确，点击“登录”将进入"考试时段选择"界面，此时姓名input组建将自动获得焦点，输入完姓名和学号后，当点击“请选择考试时段：”文本时，在屏幕下方弹出三个场次的时间段，如图03所示。

（5）所有信息输入和选择完成后点击“确定”按钮，此时将弹出“确认信息”对话框，如图04所示，如果信息无误点击“确认”按钮，此时出现“信息确认”对话框“如果信息不正确点击”取消“按钮可以重新填写。

3.3案例实现

3.3.1编写index.wxml文件代码

（1）在form组件中利用text组建和input组件实现电子邮件、密码和确认密码的输入提示及输入，后面放置1个button登录按钮实现form组建的提交事件，按钮后main防治了2个view组件用来显示当邮箱或密码与确认密码不一致是的错误提示。

（2）代码中的事件绑定处理函数由2个：form组件提交事件绑定函数formSubmit和input组件输入变化事件绑定函数inputemail，这两个函数都在input.js文件中进行定义。

（3）代码中主要使用了8种样式：page，.hr，.lineLayout，text，input，input：hover，button，.txt。

<!--index.wxml-->
<view class="box">
  <view class="title">考试场次选择</view>
  <view class="hr"></view>
  <form bindsubmit="formSubmit">
    <view class="lineLayout">
      <text>电子邮箱：</text>
      <input type="text" bindchange="inputemail" name="email" value="{{getEmail}}" placeholder="请输入电子邮箱" />
    </view>
    <view class="lineLayout">
      <text>输入密码：</text>
      <input type="password" name="password" value="{{getPwd}}" placeholder="请输入密码" />
    </view>
    <view class="lineLayout">
      <text>确认密码：</text>
      <input type="password" name="confirm" value="{{getPwdConfirm}}" placeholder="请再次输入密码" />
    </view>
    <view>
      <button type="primary" form-type="submit">登录</button>
    </view>
    <view>
      <view class="txt">{{showMsg01}}</view>
      <view class="txt">{{showMsg02}}</view>
    </view>
  </form>
</view>

3.3.2编写index.wxss文件代码

/**index.wxss**/
.lineLayout{
  display: inline-block;
  margin: 10px;
}
.hr{
  height: 2px;
  background-color: greenyellow;
  margin: 10px 0;
}
.text{
  float: left;
}
input{
  width: 180px;
  height: 30px;
  border-bottom: 2px solid silver;
  float: right;
}
input:hover{
  border-bottom: 2px solid chocolate;
}
button{
  width: 150px;
  margin: 20px auto;
}
page{
  height: 100%;
  background: gainsboro;
}
.txt{
  color: red;
  background: yellow;
}

3.3.3编写index.js文件代码

代码主要定义了3个函数：formSubmit，inputemail和checkEmail。

（1）form组件提交事件函数formSubmit。当点击form组件中的提交按钮后引发该事件。函数首先根据从邮箱和密码输入框中获取的字符串长度e.detail.value.email.length和e.detail.value.password.length判断输入的数据是否为空，如果为空给出错误提示，否则再判断密码和确认密码是否一致，如果不一致给出错误提示并清空两个输入框中的内容，如果一致则让页面跳转带detail页面。

（2）邮件输入框输入变化函数inputemail。当输入框中输入的内容发生变化时引发该事件。函数首先获取邮件输入框中输入的值e.detail.value，然后调用自定义对象函数this.checkEmail（）判断输入的字符串是否符合邮箱格式要求。

（3）自定义对象函数checkEmail。首先将正则表达式邮箱验证字符串复制给变量str，然后调用字符串的test函数来验证在邮箱输入框中输入的字符串email是否符合正则表达式的要求，如果符合要求则返回ture，表示通过验证，否则调用信息框给出错误提示，清空邮件输入框内容并返回false，表示没有通过验证。

// index.js
Page({
  data: {
   getEmail:'',
   getPwd:'',
   getPwdConfirm:''
  },
  formSubmit:function(e){                    //提交表单（点击“注册”按钮）事件
    if(e.detail.value.email.length==0||e.detail.value.password.length==0){  //判断邮箱和密码输入框内容是否为空
      this.setData({
        showMsg01:'邮箱或密码不得为空！'
      })
    }else if(e.detail.value.password != e.detail.value.confirm){
      this.setData({
        showMsg02:'两次输入密码不一致！',
        getPwd:'',                         //清空输入框内容
        getPwdConfirm:''
      })
    }else{
      wx.navigateTo({
        url: '../detail/detail',
      })
    }
  },
  inputemail:function(e){
    var email=e.detail.value
    var checkedNum=this.checkEmail(email)
  },
  checkEmail:function(email){
    let str=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
    if(str.test(email)){               //检查邮箱地址是否符合正则表达式要求
      return true
    }else{
      wx.showToast({                  //显示消息提示框
        title: '邮箱格式错误',
        icon:'loading'
      })
      this.setData({
        getEmail:''
      })
      return false
    }
  }
})

3.3.4在pages文件夹中创建detail文件夹，在其中添加4个文件，然后编写detail.wxml文件代码。该页面的主要功能是：用户输入姓名和学号，并选择考试时段。耶main主要利用form组件，input组件和picker组件来实现相应功能。

（1）文件代码绑定的事件处理函数包括：form组件提交事件函数formSubmit和picker组件选择变化事件函数chooseTime。这两个函数在detail.js文件中进行了定义。

（2）文件代码中使用的样式包括：page，.flex，input，input：hover，picker，.btnLayout和button。这些样式在detail.wxss文件中进行定义。

<!--pages/detail/detail.wxml-->
<view class="box">
  <view class="title">考试时段选择</view>
  <form bindsubmit="formSubmit">
    <view class="flex">
      <text>姓名：</text>
      <input type="text" value="{{name}}" name="name" auto-focus />
    </view>
    <view class="flex">
      <text>学号：</text>
      <input type="number" value="{{id}}" name="id" />
    </view>
    <picker bindchange="chooseTime" value="{{index}}" range="{{array}}" name="time">请选择考试时段：{{array[index]}}</picker>
    <view class="btnLayout">
      <button type="primary" form-type="submit">确定</button>
      <button type="primary">取消</button>
    </view>
  </form>
</view>

3.3.5编写detail.wxss文件代码

/* pages/detail/detail.wxss */
page{
  height: 100%;
  background: gainsboro;
}
.flex{
  display: flex;
  margin: 5px 0;
  justify-content: flex-start;
  align-items: center;
}
.btnLayout{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 50px 0;
  width: 100%;
}
input{
  width: 150px;
  height: 30px;
  border: 2px solid silver;
  margin: 5px;
}
input:hover{
  border: 2px solid chocolate;
}
picker{
  margin: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
button{
  width: 80px;
}

3.3.6编写detail.js文件代码

代码主要初始化了picker组件使用的数组array，定义了form组件提交事件函数formSubmit和picker组件选择变化事件函数chooseTime。

（1）array数组初始化。在打他中初始化了array数组。

（2）formSubmit函数。首先获取input组件中输入的姓名、学号以及picker组件的选项序号，然后调用wx.showModal（）模态对话框显示输入和选择的信息并给出正确的提示，如果点击“确定”按钮，则调用wx.showModal（）模态对话框显示确认信息，页面跳转到主页面；如果点击“取消”按钮，则在console中显示取消信息。

（3）chooseTime函数。用于获取选择的考试时间段，利用e.detail.value表达式可以获得选项的序号，在视图层根据序号找到相应的时间段。

// pages/detail/detail.js
Page({
  data: {
    array:[
      '第一场 15:00',
      '第二场 16:20',
      '第三场 17:40'
    ]
  },
  formSubmit:function(e){
    var name=e.detail.value.name;         //获取姓名输入框内容
    var id=e.detail.value.id;             //获取学号输入框内容
    var time=e.detail.value.time;
    wx.showModal({                       //显示模态对话框
      title: '确认信息',
      content:e.detail.value.name+"同学，你的学号是"+e.detail.value.id+"，你选择的场次是："+this.data.array[time]+"，请确认信息！",
      success:function(res){            //wx.shoeModal接口调用成功的回调函数
        if(res.confirm){
          wx.showModal({
            title: '信息确认',
            content:'你的考场信息已经确认！'
          })
          wx.navigateTo({              //页面跳转
            url: '../index/index',
          })
        }else{
          console.log('用户点击取消')
        }
      }
    })
  },
  chooseTime:function(e){
    var index=e.detail.value        //获得picker组件选项下标
    this.setData({
      index:index
    })
  }
})