微信小程式開發-簡訊註冊功能
阿新 • • 發佈:2019-01-05
微信小程式開發,實現手機號註冊的功能模組,去除了網路請求,網路請求的地方可以使用wx提供的網路請求的API完成。
[效果展示]
[目錄結構]
[貼程式碼]
register.wxml
<view class="container" style="height: {{windowHeight}}px"> <!--第一步--> <view wx:if="{{step == 1}}" id="firstStep_Pad" class="container" style="height:auto;"> <text class="grayLineHeng" style="margin-top:55rpx" /> <view style="width:{{windowWidth}}px;" class="container-hang"> <text style="color:#c9c9c9;margin:33rpx 0 33rpx 0; width:460rpx;text-align:center;">國家/地區</text> <text class="grayLineShu" style="height:auto"></text> <text style="color:#000;width:100%;text-align: center;margin-top:33rpx">{{location}}</text> </view> <text class="grayLineHeng" /> <view class="container-hang" style="width:{{windowWidth}}px;"> <image src="{{icon_phone}}" style="width:49rpx; height: 49rpx; margin:28rpx"/> <input id="input_phoneNum" bindchange="input_phoneNum" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="請輸入電話號碼" type="number"/> </view> <text class="grayLineHeng" /> </view> <!--第二步--> <view wx:if="{{step==2}}" id="secondStep_Pad" class="container" style="height:auto;align-items:flex-start;"> <text style="margin:44rpx; font-size:30rpx">驗證碼已經發送到您的手機\n如長時間沒有收到,請點選“重新獲取”</text> <text class="grayLineHeng" /> <view class="container-hang" style="width:{{windowWidth}}px;"> <image src="{{input_icon}}" style="width:49rpx; height: 49rpx; margin:28rpx"/> <input bindchange="input_identifyCode" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="請輸入驗證碼" type="number"/> </view> <text class="grayLineHeng" /> <button bindtap="reSendPhoneNum" size="mini" style="margin-top:23rpx;margin-right:23rpx">重新獲取({{time}}s)</button> </view> <!--第三步--> <view wx:if="{{step==3}}" id="thirdStep_Pad" class="container" style="height:auto;margin-top:23rpx"> <text class="grayLineHeng" /> <view class="container-hang" style="width:{{windowWidth}}px;"> <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/> <input bindchange="input_password" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="請輸入密碼" password/> </view> <text class="grayLineHeng" /> <view class="container-hang" style="width:{{windowWidth}}px;"> <image src="{{icon_password}}" style="width:49rpx; height: 49rpx; margin:28rpx"/> <input bindchange="input_rePassword" style="margin:24rpx 32rpx 0 0;height:49rpx;" placeholder="請再次輸入密碼" password/> </view> <text class="grayLineHeng" /> </view> <button style="width:{{nextButtonWidth}}px;margin-top:35rpx" type="primary" size="default" bindtap="nextStep">下一步</button> </view>
register.wxss
.container-hang {
display: flex;
flex-direction: row;
background-color: #fff;
}
register.js
var app = getApp() // var step = 1 // 當前操作的step var maxTime = 60 var currentTime = maxTime //倒計時的事件(單位:s) var interval = null var hintMsg = null // 提示 var check = require("../../utils/check.js") var webUtils = require("../../utils/registerWebUtil.js") var step_g = 1 var phoneNum = null, identifyCode = null, password = null, rePassword = null; 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_g = 1 var that = this wx.getSystemInfo({ success: function(res) { that.setData({ windowWidth : res.windowWidth, windowHeight : res.windowHeight, nextButtonWidth: res.windowWidth - 20 }) } }) }, onUnload: function(){ currentTime = maxTime if(interval != null){ clearInterval(interval) } }, nextStep :function(){ var that = this if(step_g == 1){ if(firstStep()){ step_g = 2 interval = setInterval(function(){ currentTime--; that.setData({ time : currentTime }) if(currentTime <= 0){ clearInterval(interval) currentTime = -1 } }, 1000) } }else if(step_g == 2){ if(secondStep()){ step_g = 3 clearInterval(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){ phoneNum = e.detail.value }, input_identifyCode: function(e){ identifyCode = e.detail.value }, input_password: function(e){ password = e.detail.value }, input_rePassword: function(e){ rePassword = e.detail.value }, reSendPhoneNum: function(){ if(currentTime < 0){ var that = this currentTime = maxTime interval = setInterval(function(){ currentTime-- that.setData({ time : currentTime }) if(currentTime <= 0){ currentTime = -1 clearInterval(interval) } }, 1000) }else{ wx.showToast({ title: '簡訊已發到您的手機,請稍後重試!', icon : 'loading', duration : 700 }) } } }) function firstStep(){ // 提交電話號碼,獲取[驗證碼] if(!check.checkPhoneNum(phoneNum)){ hintMsg = "請輸入正確的電話號碼!" return false } if(webUtils.submitPhoneNum(phoneNum)){ hintMsg = null return true } hintMsg = "提交錯誤,請稍後重試!" return false } function secondStep(){ // 提交[驗證碼] if(!check.checkIsNotNull(identifyCode)){ hintMsg = "請輸入驗證碼!" return false } if(webUtils.submitIdentifyCode(identifyCode)){ hintMsg = null return true } hintMsg = "提交錯誤,請稍後重試!" return false } function thirdStep(){ // 提交[密碼]和[重新密碼] console.log(password + "===" + rePassword) if(!check.isContentEqual(password, rePassword)){ hintMsg = "兩次密碼不一致!" return false } if(webUtils.submitPassword(password)){ hintMsg = "註冊成功" return true } hintMsg = "提交錯誤,請稍後重試!" return false }
register.json
{
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "填寫手機號碼",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white"
}
check.js
// 檢測是否有輸入 function checkIsNotNull(content){ return (content && content!=null) } // 檢測輸入內容 function checkPhoneNum(phoneNum){ console.log(phoneNum) if(!checkIsNotNull(phoneNum)){ return false } return true } // 比較兩個內容是否相等 function isContentEqual(content_1, content_2){ if(!checkIsNotNull(content_1)){ return false } if(content_1 === content_2){ return true } return false } module.exports = { checkIsNotNull : checkIsNotNull, checkPhoneNum : checkPhoneNum, isContentEqual : isContentEqual }
registerWebUtil.js
// 提交[電話號碼]
function submitPhoneNum(phoneNum){
// 此處呼叫wx中的網路請求的API,完成電話號碼的提交
return true
}
//提交[驗證碼]
function submitIdentifyCode(identifyCode){
// 此處呼叫wx中的網路請求的API,完成簡訊驗證碼的提交
return true
}
// 提交[密碼],前一步保證兩次密碼輸入相同
function submitPassword(password){
//此處呼叫wx中的網路請求的API,完成密碼的提交
return true
}
module.exports = {
submitPhoneNum : submitPhoneNum,
submitIdentifyCode : submitIdentifyCode,
submitPassword : submitPassword
}