欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 教程

微信小程序开发－短信注册功能

发布：2017-11-28 17:30浏览： 次来源：网络 作者：tianshu

微信小程序开发，实现手机号注册的功能模块，去除了网络请求，网络请求的地方可以使用wx提供的网络请求的API完成。［效果展示］［目录结构］［贴代码］register.wxmlview class="contai ...

 
 
 

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

［效果展示］

微信小程序开发－短信注册功能(图1)

 

［目录结构］

微信小程序开发－短信注册功能(图2)

 

［贴代码］

register.wxml

 

[html] view plain copy
 
  1. <view class="container" style="height: {{windowHeight}}px">  
  2.     <!--第一步-->  
  3.     <view wx:if="{{step == 1}}" id="firstStep_Pad" class="container" style="height:auto;">  
  4.         <text class="grayLineHeng" style="margin-top:55rpx" />  
  5.         <view style="width:{{windowWidth}}px;" class="container-hang">  
  6.             <text style="color:#c9c9c9;margin:33rpx 0 33rpx 0; width:460rpx;text-align:center;">国家/地区</text>  
  7.             <text class="grayLineShu" style="height:auto"></text>  
  8.             <text style="color:#000;width:100%;text-align: center;margin-top:33rpx">{{location}}</text>  
  9.         </view>  
  10.         <text class="grayLineHeng" />  
  11.         <view class="container-hang" style="width:{{windowWidth}}px;">  
  12.             <image src="{{icon_phone}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>  
  13.             <input id="input_phoneNum" bindchange="input_phoneNum" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入电话号码" type="number"/>  
  14.         </view>  
  15.         <text class="grayLineHeng" />  
  16.     </view>  
  17.       
  18.     <!--第二步-->  
  19.     <view wx:if="{{step==2}}" id="secondStep_Pad" class="container" style="height:auto;align-items:flex-start;">  
  20.         <text style="margin:44rpx; font-size:30rpx">验证码已经发送到您的手机\n如长时间没有收到，请点击“重新获取”</text>  
  21.         <text class="grayLineHeng" />  
  22.         <view class="container-hang" style="width:{{windowWidth}}px;">  
  23.             <image src="{{input_icon}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>  
  24.             <input bindchange="input_identifyCode" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入验证码" type="number"/>  
  25.         </view>  
  26.         <text class="grayLineHeng" />  
  27.   
  28.         <button bindtap="reSendPhoneNum" size="mini" style="margin-top:23rpx;margin-right:23rpx">重新获取({{time}}s)</button>  
  29.     </view>  
  30.   
  31.     <!--第三步-->  
  32.     <view wx:if="{{step==3}}" id="thirdStep_Pad" class="container" style="height:auto;margin-top:23rpx">  
  33.         <text class="grayLineHeng" />  
  34.         <view class="container-hang" style="width:{{windowWidth}}px;">  
  35.             <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>  
  36.             <input bindchange="input_password" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请输入密码" password/>  
  37.         </view>  
  38.         <text class="grayLineHeng" />  
  39.         <view class="container-hang" style="width:{{windowWidth}}px;">  
  40.             <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/>  
  41.             <input bindchange="input_rePassword" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="请再次输入密码" password/>  
  42.         </view>  
  43.         <text class="grayLineHeng" />  
  44.     </view>  
  45.   
  46.     <button style="width:{{nextButtonWidth}}px;margin-top:35rpx"   
  47.     type="primary" size="default" bindtap="nextStep">下一步</button>  
  48. </view>  

 

 

register.wxss

 

[css] view plain copy
 
  1. .container-hang {  
  2.     display: flex;  
  3.     flex-direction: row;  
  4.     background-color: #fff;   
  5. }  

 

 

register.js

 

[javascript] view plain copy
 
  1. var app = getApp()  
  2. // var step = 1 // 当前操作的step  
  3. var maxTime = 60  
  4. var currentTime = maxTime //倒计时的事件（单位：s）  
  5. var interval = null  
  6. var hintMsg = null // 提示  
  7.   
  8. var check = require("../../utils/check.js")  
  9. var webUtils = require("../../utils/registerWebUtil.js")  
  10. var step_g = 1  
  11.   
  12. var phoneNum = null, identifyCode = null, password = null, rePassword = null;  
  13.   
  14. Page({  
  15.     data: {  
  16.         windowWidth : 0,  
  17.         windoeHeight : 0,  
  18.         icon_phone: "../../img/icon_phone.png",  
  19.         input_icon: "../../img/input_icon.png",  
  20.         icon_password : "../../img/icon_password.png",  
  21.         location : "中国",  
  22.         nextButtonWidth: 0,  
  23.         step: step_g,  
  24.         time: currentTime  
  25.     },  
  26.     onLoad: function(){  
  27.         step_g = 1  
  28.         var that = this  
  29.         wx.getSystemInfo({  
  30.           success: function(res) {  
  31.             that.setData({  
  32.                 windowWidth : res.windowWidth,  
  33.                 windowHeight : res.windowHeight,  
  34.                 nextButtonWidth: res.windowWidth - 20  
  35.             })  
  36.           }  
  37.         })  
  38.     },  
  39.     onUnload: function(){  
  40.         currentTime = maxTime  
  41.         if(interval != null){  
  42.             clearInterval(interval)  
  43.         }  
  44.     },  
  45.     nextStep :function(){  
  46.         var that = this  
  47.         if(step_g == 1){  
  48.             if(firstStep()){  
  49.                 step_g = 2  
  50.                 interval = setInterval(function(){  
  51.                     currentTime--;  
  52.                     that.setData({  
  53.                         time : currentTime  
  54.                     })  
  55.   
  56.                     if(currentTime <= 0){  
  57.                         clearInterval(interval)  
  58.                         currentTime = -1  
  59.                     }  
  60.                 }, 1000)  
  61.             }  
  62.         }else if(step_g == 2){  
  63.             if(secondStep()){  
  64.                 step_g = 3  
  65.                 clearInterval(interval)  
  66.             }  
  67.         }else{  
  68.             if(thirdStep()){  
  69.                 // 完成注册  
  70.                 wx.navigateTo({  
  71.                   url: '../home/home'  
  72.                 })  
  73.             }  
  74.         }  
  75.   
  76.         if(hintMsg != null){  
  77.             wx.showToast({  
  78.                   title: hintMsg,  
  79.                   icon: 'loading',  
  80.                   duration: 700  
  81.             })  
  82.         }  
  83.   
  84.         this.setData({  
  85.             step: step_g  
  86.         })  
  87.     },  
  88.     input_phoneNum: function(e){  
  89.         phoneNum = e.detail.value  
  90.     },  
  91.     input_identifyCode: function(e){  
  92.         identifyCode = e.detail.value  
  93.     },  
  94.     input_password: function(e){  
  95.         password = e.detail.value  
  96.     },  
  97.     input_rePassword: function(e){  
  98.         rePassword = e.detail.value  
  99.     },  
  100.     reSendPhoneNum: function(){  
  101.         if(currentTime < 0){  
  102.             var that = this  
  103.             currentTime = maxTime  
  104.             interval = setInterval(function(){  
  105.                 currentTime--  
  106.                 that.setData({  
  107.                     time : currentTime  
  108.                 })  
  109.   
  110.                 if(currentTime <= 0){  
  111.                     currentTime = -1  
  112.                     clearInterval(interval)  
  113.                 }  
  114.             }, 1000)  
  115.         }else{  
  116.             wx.showToast({  
  117.                 title: '短信已发到您的手机，请稍后重试!',  
  118.                 icon : 'loading',  
  119.                 duration : 700  
  120.             })  
  121.         }  
  122.     }  
  123. })  
  124.   
  125. function firstStep(){ // 提交电话号码，获取［验证码］  
  126.     if(!check.checkPhoneNum(phoneNum)){  
  127.         hintMsg = "请输入正确的电话号码!"  
  128.         return false  
  129.     }  
  130.   
  131.     if(webUtils.submitPhoneNum(phoneNum)){  
  132.         hintMsg = null  
  133.         return true  
  134.     }  
  135.     hintMsg = "提交错误，请稍后重试!"  
  136.     return false  
  137. }  
  138.   
  139. function secondStep(){ // 提交［验证码］  
  140.     if(!check.checkIsNotNull(identifyCode)){  
  141.         hintMsg = "请输入验证码!"  
  142.         return false  
  143.     }  
  144.   
  145.     if(webUtils.submitIdentifyCode(identifyCode)){  
  146.         hintMsg = null  
  147.         return true  
  148.     }  
  149.     hintMsg = "提交错误，请稍后重试!"  
  150.     return false  
  151. }  
  152.   
  153. function thirdStep(){ // 提交［密码］和［重新密码］  
  154.   
  155.     console.log(password + "===" + rePassword)  
  156.   
  157.     if(!check.isContentEqual(password, rePassword)){  
  158.         hintMsg = "两次密码不一致！"  
  159.         return false  
  160.     }  
  161.   
  162.     if(webUtils.submitPassword(password)){  
  163.         hintMsg = "注册成功"  
  164.         return true  
  165.     }  
  166.     hintMsg = "提交错误，请稍后重试!"  
  167.     return false  
  168. }  

 

 

register.json

 

[plain] view plain copy
 
  1. {  
  2.     "navigationBarBackgroundColor": "#000",  
  3.     "navigationBarTitleText": "填写手机号码",  
  4.     "enablePullDownRefresh": false,  
  5.     "navigationBarTextStyle": "white"  
  6. }  

 

 

check.js

 

[javascript] view plain copy
 
  1. // 检测是否有输入  
  2. function checkIsNotNull(content){  
  3.     return (content && content!=null)  
  4. }  
  5.   
  6. // 检测输入内容  
  7. function checkPhoneNum(phoneNum){  
  8.     console.log(phoneNum)  
  9.     if(!checkIsNotNull(phoneNum)){  
  10.         return false  
  11.     }  
  12.   
  13.     return true  
  14. }  
  15.   
  16. // 比较两个内容是否相等  
  17. function isContentEqual(content_1, content_2){  
  18.     if(!checkIsNotNull(content_1)){  
  19.         return false  
  20.     }  
  21.   
  22.     if(content_1 === content_2){  
  23.         return true  
  24.     }  
  25.   
  26.     return false  
  27. }  
  28.   
  29. module.exports = {  
  30.   checkIsNotNull : checkIsNotNull,  
  31.   checkPhoneNum : checkPhoneNum,  
  32.   isContentEqual : isContentEqual  
  33. }  

 

 

registerWebUtil.js

 

[javascript] view plain copy
 
  1. // 提交［电话号码］  
  2. function submitPhoneNum(phoneNum){  
  3.     // 此处调用wx中的网络请求的API，完成电话号码的提交  
  4.     return true  
  5. }  
  6.   
  7. //提交［验证码］  
  8. function submitIdentifyCode(identifyCode){  
  9.     // 此处调用wx中的网络请求的API，完成短信验证码的提交  
  10.     return true  
  11. }  
  12.   
  13. // 提交［密码］,前一步保证两次密码输入相同  
  14. function submitPassword(password){  
  15.     //此处调用wx中的网络请求的API，完成密码的提交  
  16.     return true  
  17. }  
  18.   
  19. module.exports = {  
  20.     submitPhoneNum : submitPhoneNum,  
  21.     submitIdentifyCode : submitIdentifyCode,  
  22.     submitPassword : submitPassword  
  23. }  





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有