1.

关注公众号“码农帮派”，查看更多系列技术文章：

2.

微信小程序开发，实现手机号注册的功能模块，去除了网络请求，网络请求的地方可以使用wx提供的网络请求的API完成。

3.

［效果展示］

4.

［目录结构］

5.

［贴代码］

6.

register.wxml

viewclass"container"style"height:{{windowHeight}}px"!--第一步--viewwx:if"{{step1}}"id"firstStep_Pad"class"container"style"height:auto;"textclass"grayLineHeng"style"margin-top:55rpx"/viewstyle"width:{{windowWidth}}px;"class"container-hang"textstyle"color:#c9c9c9;margin:33rpx033rpx0;width:460rpx;text-align:center;"国家/地区/texttextclass"grayLineShu"style"height:auto"/texttextstyle"color:#000;width:100%;text-align:center;margin-top:33rpx"{{location}}/text/viewtextclass"grayLineHeng"/viewclass"container-hang"style"width:{{windowWidth}}px;"imagesrc"{{icon_phone}}"style"width:49rpx;height:49rpx;margin:28rpx"/inputid"input_phoneNum"bindchange"input_phoneNum"style"margin:24rpx32rpx00;height:49rpx;"placeholder"请输入电话号码"type"number"//viewtextclass"grayLineHeng"//view!--第二步--viewwx:if"{{step2}}"id"secondStep_Pad"class"container"style"height:auto;align-items:flex-start;"textstyle"margin:44rpx;font-size:30rpx"验证码已经发送到您的手机如长时间没有收到，请点击“重新获取”/texttextclass"grayLineHeng"/viewclass"container-hang"style"width:{{windowWidth}}px;"imagesrc"{{input_icon}}"style"width:49rpx;height:49rpx;margin:28rpx"/inputbindchange"input_identifyCode"style"margin:24rpx32rpx00;height:49rpx;"placeholder"请输入验证码"type"number"//viewtextclass"grayLineHeng"/buttonbindtap"reSendPhoneNum"size"mini"style"margin-top:23rpx;margin-right:23rpx"重新获取({{time}}s)/button/view!--第三步--viewwx:if"{{step3}}"id"thirdStep_Pad"class"container"style"height:auto;margin-top:23rpx"textclass"grayLineHeng"/viewclass"container-hang"style"width:{{windowWidth}}px;"imagesrc"{{icon_password}}"style"width:49rpx;height:49rpx;margin:28rpx"/inputbindchange"input_password"style"margin:24rpx32rpx00;height:49rpx;"placeholder"请输入密码"password//viewtextclass"grayLineHeng"/viewclass"container-hang"style"width:{{windowWidth}}px;"imagesrc"{{icon_password}}"style"width:49rpx;height:49rpx;margin:28rpx"/inputbindchange"input_rePassword"style"margin:24rpx32rpx00;height:49rpx;"placeholder"请再次输入密码"password//viewtextclass"grayLineHeng"//viewbuttonstyle"width:{{nextButtonWidth}}px;margin-top:35rpx"type"primary"size"default"bindtap"nextStep"下一步/button/view7.

register.wxss

.container-hang{display:flex;flex-direction:row;background-color:#fff;}8.

register.js

varappgetApp()//varstep1//当前操作的stepvarmaxTime60varcurrentTimemaxTime//倒计时的事件（单位：s）varintervalnullvarhintMsgnull//提示varcheckrequire("../../utils/check.js")varwebUtilsrequire("../../utils/registerWebUtil.js")varstep_g1varphoneNumnull,identifyCodenull,passwordnull,rePasswordnull;Page({data:{windowWidth:0,windoeHeight:0,icon_phone:"../../img/icon_phone.png",input_icon:"../../img/input_icon.png",icon_password:"../../img/icon_password.png",location:"中国",nextButtonWidth:0,step:step_g,time:currentTime},onLoad:function(){step_g1varthatthiswx.getSystemInfo({success:function(res){that.setData({windowWidth:res.windowWidth,windowHeight:res.windowHeight,nextButtonWidth:res.windowWidth-20})}})},onUnload:function(){currentTimemaxTimeif(interval!null){clearInterval(interval)}},nextStep:function(){varthatthisif(step_g1){if(firstStep()){step_g2intervalsetInterval(function(){currentTime--;that.setData({time:currentTime})if(currentTime0){clearInterval(interval)currentTime-1}},1000)}}elseif(step_g2){if(secondStep()){step_g3clearInterval(interval)}}else{if(thirdStep()){//完成注册wx.navigateTo({url:'../home/home'})}}if(hintMsg!null){wx.showToast({title:hintMsg,icon:'loading',duration:700})}this.setData({step:step_g})},input_phoneNum:function(e){phoneNume.detail.value},input_identifyCode:function(e){identifyCodee.detail.value},input_password:function(e){passworde.detail.value},input_rePassword:function(e){rePassworde.detail.value},reSendPhoneNum:function(){if(currentTime0){varthatthiscurrentTimemaxTimeintervalsetInterval(function(){currentTime--that.setData({time:currentTime})if(currentTime0){currentTime-1clearInterval(interval)}},1000)}else{wx.showToast({title:'短信已发到您的手机，请稍后重试!',icon:'loading',duration:700})}}})functionfirstStep(){//提交电话号码，获取［验证码］if(!check.checkPhoneNum(phoneNum)){hintMsg"请输入正确的电话号码!"returnfalse}if(webUtils.submitPhoneNum(phoneNum)){hintMsgnullreturntrue}hintMsg"提交错误，请稍后重试!"returnfalse}functionsecondStep(){//提交［验证码］if(!check.checkIsNotNull(identifyCode)){hintMsg"请输入验证码!"returnfalse}if(webUtils.submitIdentifyCode(identifyCode)){hintMsgnullreturntrue}hintMsg"提交错误，请稍后重试!"returnfalse}functionthirdStep(){//提交［密码］和［重新密码］console.log(password+""+rePassword)if(!check.isContentEqual(password,rePassword)){hintMsg"两次密码不一致！"returnfalse}if(webUtils.submitPassword(password)){hintMsg"注册成功"returntrue}hintMsg"提交错误，请稍后重试!"returnfalse}9.

register.json

{"navigationBarBackgroundColor":"#000","navigationBarTitleText":"填写手机号码","enablePullDownRefresh":false,"navigationBarTextStyle":"white"}10.

check.js

//检测是否有输入functioncheckIsNotNull(content){return(contentcontent!null)}//检测输入内容functioncheckPhoneNum(phoneNum){console.log(phoneNum)if(!checkIsNotNull(phoneNum)){returnfalse}returntrue}//比较两个内容是否相等functionisContentEqual(content_1,content_2){if(!checkIsNotNull(content_1)){returnfalse}if(content_1content_2){returntrue}returnfalse}module.exports{checkIsNotNull:checkIsNotNull,checkPhoneNum:checkPhoneNum,isContentEqual:isContentEqual}11.

registerWebUtil.js

//提交［电话号码］functionsubmitPhoneNum(phoneNum){//此处调用wx中的网络请求的API，完成电话号码的提交returntrue}//提交［验证码］functionsubmitIdentifyCode(identifyCode){//此处调用wx中的网络请求的API，完成短信验证码的提交returntrue}//提交［密码］,前一步保证两次密码输入相同functionsubmitPassword(password){//此处调用wx中的网络请求的API，完成密码的提交returntrue}module.exports{submitPhoneNum:submitPhoneNum,submitIdentifyCode:submitIdentifyCode,submitPassword:submitPassword}