国旅手游网提供好玩的手机游戏和手机必备软件下载,每天推荐精品安卓手游和最新应用软件app,并整理了热门游戏攻略、软件教程、资讯等内容。欢迎收藏
网友时间提问:小程序使用手机号
下面的这篇文章是教大家如何在微信小程序开发的时实现手机号注册功能? 教程简单易学,有需要的小伙伴就赶紧和小编一起来学习吧。
[效果展示]
[目录结构]
[贴代码]
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 = nullvar 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 = 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 = 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
}
register.json
[plain] view plain copy print?在CODE上查看代码片派生到我的代码片{"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
}
以上就是如何在微信小程序开发的时实现手机号注册功能的全部内容了,大家都学会了吗?
关于《如何在微信小程序开发的时实现手机号注册功能?》相关问题的解答易容小编就为大家介绍到这里了。如需了解其他软件使用问题,请持续关注国旅手游网软件教程栏目。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭侵权/违法违规的内容,欢迎发送邮件至【1047436850@qq.com】举报,并提供相关证据及涉嫌侵权链接,一经查实,本站将在14个工作日内删除涉嫌侵权内容。
本文标题:【微信小程序申请使用手机号[微信小程序手机号是什么意思]】
本文链接:http://www.citshb.com/class222673.html