介绍 & lt; !——页面/注册/register.wxml祝辞
& lt; scroll-view>
,& lt; image src=https://www.yisu.com/zixun//图片/register.png”模式=皐idthFix”class=" topImage ">
<视图类=' top输入'>
<输入id=" telphone“最大长度=' 11 '类型=拔谋尽闭嘉环?扒胧淙胧只拧眀indinput=" inputPhoneNum "/>
<文本wx:如果=" {{!发送}}“bindtap=皊endMsg”class=" sendMsg ">获取验证码
<文本wx:如果="{{发送}}”类=皊endMsg”bindtap=" sendMsg ">{{第二+“s”}}
<视图类=" input-buttom ">
<输入id="验证码" type="数量"最大长度=?”占位符=扒胧淙?位验证码”bindinput=" inputCode "/>
<按钮类=" btn“敞开式=癵etUserInfo bindgetuserinfo=皁nGotUserInfo lang=" zh_CN ">立即用? 点击立即用伞即表示同意
<文本类="协议">《共享雨伞租赁服务协议》
页面{
,背景:# f0eff4;
}
.topImage {
,宽度:100%;
高度:大敌;汽车;
}
.input-top, .input-buttom {
,字体大小:30 rpx;
,padding-left: 30 rpx;
,保证金:0 rpx 20 rpx;
,背景颜色:白色;
,身高:70 rpx;
}
.input-top {
,flex-direction:行;
,显示:flex;
,justify-content:之间的空间;
,margin-bottom: 1 px;
,margin-top: 20 rpx;
}
# telphone,, # captcha {
,身高:70 rpx;
}
.sendMsg {
,行高:70 rpx;
,margin-right: 30 rpx;
,颜色:# f9b400;
}
.btn {
,保证金:0 rpx 20 rpx;
,背景颜色:# f9b400;
,颜色:白色;
,margin-top: 20 rpx;
,字体大小:30 rpx;
透明度:0.8
}/*,下方协议开始,*/.protocol {
,text-align:中心;
}
.protocol-left {
,颜色:# 333;
,字体大小:25 rpx;
}
.protocol-right {
,字体大小:23 rpx;
,颜色:# f9b400;
}/*,下方协议结束,*/ 页面({
,//页面的初始数据
,数据:{
,发送:假的,,//是否已经发送验证码
,第二:120,,//验证码有效时间
,phoneNum: & # 39; & # 39;,,//用户输入的电话号码
,代码:& # 39;& # 39;,,//用户输入的验证码
},
,//当输入手机号码后,把数据存到数据中
,inputPhoneNum:函数(e), {
,let phoneNum =, e.detail.value;
,this.setData ({
,,phoneNum: phoneNum,
,})
},
,//前台校验手机号
,checkPhoneNum:函数(phoneNum), {
,let str =,/^ (1 (3 | 5 | 8) {1} \ d {9}) $/;
,if (str.test (phoneNum)), {
return 才能;真实;
,}else {//才能提示手机号码格式不正确
wx.showToast({才能
,,标题:& # 39;手机号格式不正确& # 39;,
,,图片:& # 39;/图片/warn.png& # 39;
})才能
return 才能;假;
,}
},
,//调用发送验证码接口
sendMsg:大敌;函数(),{
,var phoneNum =, this.data.phoneNum;
,if (this.checkPhoneNum (phoneNum)), {
wx.request({才能
,,url: & # 39;写自己的后台请求发送验证码访问网址,,
方法:才能,& # 39;文章# 39;
,,数据:{
,,,telphone: phoneNum,
,,},
头才能:{
,才能“Content-Type":,“应用程序/x-www-form-urlencoded"
,,},
,,成功:(res),=祝辞,{
,,if (获取验证码成功),{
,,//开始倒计时
,,this.setData ({
,,,发送:,真的,
,,})
,,this.timer ();
,,},{else
,,//提示获取验证码失败
,,wx.showToast ({
,,,标题:,& # 39;获取验证码失败& # 39;,
,,,图片:,& # 39;/图片/warn.png& # 39;
,,})
,,}
,,},
})才能
,}
},
,//一个计时器
计时器:大敌;函数(),{
,let promise =, new 承诺((解决,,拒绝),=祝辞,{
let 才能;setTimer =, setInterval (
(),才能=祝辞,{
,,this.setData ({
,,第二:this.data.second 作用;1
,,})
,,if (this.data.second & lt;=, 0), {
,,this.setData ({
第二:,,,,,
,,,发送:,假的,
,,})
,才能解决(凝固时间)
,,}
,,},1000)
,})
,promise.then((凝固时间),=祝辞,{
clearInterval才能(凝固时间)
,})
},
,//当输完验证码,把数据存到数据中
,inputCode:函数(e), {
,this.setData ({
代码:才能e.detail.value
,})
},
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关微信小程序中注册页面包含倒计时验证码,获取用户信息的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> 1页面展示
<强> 2,wxml代码
3, wxs代码
<强> 4,js代码
