网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序開發－短信注冊功能

發布時間：2017-11-28 17:30 所屬欄目：小程序開發教程

微信小程序開發，實現手機號注冊的功能模塊，去除了網絡請求，網絡請求的地方可以使用wx提供的網絡請求的API完成。［效果展示］［目錄結構］［貼代碼］register.wxmlview class="contai ...

 
 
 

微信小程序開發，實現手機號注冊的功能模塊，去除了網絡請求，網絡請求的地方可以使用wx提供的網絡請求的API完成。 
 

［效果展示］

 

［目錄結構］

 

［貼代碼］

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. }  


易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/17979.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×