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

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

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

［效果展示］

［目录结构］

［贴代码］

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

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

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 = 1var 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 = 1var that = thiswx.getSystemInfo({success: function(res) {that.setData({windowWidth : res.windowWidth,windowHeight : res.windowHeight,nextButtonWidth: res.windowWidth - 20})}})},onUnload: function(){currentTime = maxTimeif(interval != null){clearInterval(interval)}},nextStep :function(){var that = thisif(step_g == 1){if(firstStep()){step_g = 2interval = setInterval(function(){currentTime--;that.setData({time : currentTime})if(currentTime <= 0){clearInterval(interval)currentTime = -1}}, 1000)}}else if(step_g == 2){if(secondStep()){step_g = 3clearInterval(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 = thiscurrentTime = maxTimeinterval = setInterval(function(){currentTime--that.setData({time : currentTime})if(currentTime <= 0){currentTime = -1clearInterval(interval)}}, 1000)}else{wx.showToast({title: '短信已发到您的手机，请稍后重试!',icon : 'loading',duration : 700})}}
})function firstStep(){ // 提交电话号码，获取［验证码］if(!check.checkPhoneNum(phoneNum)){hintMsg = "请输入正确的电话号码!"return false}if(webUtils.submitPhoneNum(phoneNum)){hintMsg = nullreturn true}hintMsg = "提交错误，请稍后重试!"return false
}function secondStep(){ // 提交［验证码］if(!check.checkIsNotNull(identifyCode)){hintMsg = "请输入验证码!"return false}if(webUtils.submitIdentifyCode(identifyCode)){hintMsg = nullreturn 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
}

{"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
}

微信小程序开发－短信注册功能相关推荐

微信小程序实现短信认证功能
一.前言如果你在你自己的小程序中,需要用到一些短信服务功能,那么同样的,也可以使用榛子云短信认证服务. 二.前期准备需要注册.登录.充值榛子云短信平台,可以详细查看我的文章spring boot集 ...
微信小程序之短信验证码
目录 1.前提 2.开通静态 2.1.点击云开发中更多->静态网站 2.2.点击开通,使用管理员验证即可 3.短信发送规则 3.1.短信内容 3.2.短信规则 3.3.短信内容长度计算规则 3. ...
h5跳转微信小程序，短信外链外部跳转微信打开任意第三方网址url，抖音跳转微信添加好友直接方法？
weixin://dl/business/?t= *TICKET* iOS系统支持识别URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序. Android系统不支持直接识别URL ...
微信小程序开发类似微博回复功能自带云开发数据库（无限回复）
注意事项:本文放置了关键代码和全部该页的全部代码,按需自取.html中存在少许图片,大家加上自己喜欢的即可.数据库结构内容也会展示给大家. 效果: 第一条回复的是帖子,第二条回复的是第三条,第三条回复 ...
微信小程序实现短信登录-云开发
思路: 先写wxml页面,有两个输入,分别为phone和code:有两个按钮,分别为获取验证码和验证登录.对用户输入的phone进行验证,格式正确则调用云函数发送验证码给手机号:用户输入code和te ...
配置微信小程序开发分享朋友圈功能
在微信开发者平台上,可以按照以下步骤正确配置分享相关的参数: 登录微信开发者平台在浏览器中访问微信开发者平台(https://mp.weixin.qq.com/),使用微信公众号的管理员账号登录. ...
小程序获取短信验证码功能实现
实现功能验证手机号的合法性请求获取验证码发送短信验证码60S倒计时判断验证码是否正确在Page文件设置data // 获取验证码phone: '',//手机号code: '',//验证码is ...
微信小程序---发送短信验证码时间限制次数
1.wxml页面 <view class="container"><view class="title">登录</view> ...
微信小程序开发教程：项目一微信小程序入门课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简述微信开发者工具中调试器功能. 2.请简述微信小 ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...

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

微信小程序开发－短信注册功能相关推荐

最新文章

热门文章