微信小程序

2024-07-02 06:11| 来源: 网络整理| 查看: 265

效果图如下：

登录页面布局wxml代码：

代码语言：javascript复制 {{loginBtnTxt}} 忘记密码？注册账号

针对此页面中定义了4个动态属性，

代码语言：javascript复制data:{ loginBtnTxt:”登录”,//登录按钮上的文字 loginBtnBgBgColor:”#ff9900″,//初始时背景颜色，点击后变为灰色 btnLoading:false,//控制登录按钮点击后是否显示loading效果 disabled:false//登录中，按钮不能点击 },

主要代码片段：

代码语言：javascript复制setLoginData1:function(){ this.setData({ loginBtnTxt:"登录中", disabled: !this.data.disabled, loginBtnBgBgColor:"#999", btnLoading:!this.data.btnLoading }); },

点击登录时，动态设置data属性值，改变登录按钮文本，背景色，显示loading动画，不可点击

代码语言：javascript复制setLoginData2:function(){ this.setData({ loginBtnTxt:"登录", disabled: !this.data.disabled, loginBtnBgBgColor:"#ff9900", btnLoading:!this.data.btnLoading }); },

登录成功后，重置登录按钮效果

代码语言：javascript复制checkUserName:function(param){ var email = util.regexConfig().email; var phone = util.regexConfig().phone; var inputUserName = param.username.trim(); if(email.test(inputUserName)||phone.test(inputUserName)){ return true; }else{ wx.showModal({ title: '提示', showCancel:false, content: '请输入正确的邮箱或者手机号码' }); return false; } }, checkPassword:function(param){ var userName = param.username.trim(); var password = param.password.trim(); if(password.length

主要代码片段：

代码语言：javascript复制setregistData1:function(){ this.setData({ registBtnTxt:"注册中", registDisabled: !this.data.registDisabled, registBtnBgBgColor:"#999", btnLoading:!this.data.btnLoading }); },

点击注册时，动态设置data属性值，改变注册按钮文本，背景色，显示loading动画，设置不可点击

代码语言：javascript复制setregistData2:function(){ this.setData({ registBtnTxt:"注册", registDisabled: !this.data.registDisabled, registBtnBgBgColor:"#ff9900", btnLoading:!this.data.btnLoading }); },

注册成功后，重置注册按钮效果

代码语言：javascript复制checkUserName:function(param){ var phone = util.regexConfig().phone; var inputUserName = param.trim(); if(phone.test(inputUserName)){ return true; }else{ wx.showModal({ title: '提示', showCancel:false, content: '请输入正确的手机号码' }); return false; } }, checkPassword:function(param){ var userName = param.username.trim(); var password = param.password.trim(); if(password.length 0){ count--; that.setData({ getSmsCodeBtnTxt:count+' s', getSmsCodeBtnColor:"#999", smsCodeDisabled: true }); }else{ that.setData({ getSmsCodeBtnTxt:"获取验证码", getSmsCodeBtnColor:"#ff9900", smsCodeDisabled: false }); count = 60; clearInterval(si); } },1000); } },

倒计时获取手机短信验证码效果，注意在setInterval()中要重新定义this指向，使用var that = this，代替指向当前页面的page对象；

代码语言：javascript复制checkSmsCode:function(param){ var smsCode = param.smsCode.trim(); var tempSmsCode = '000000';//演示效果临时变量，正式开发需要通过wx.request获取 if(smsCode!=tempSmsCode){ wx.showModal({ title: '提示', showCancel:false, content: '请输入正确的短信验证码' }); return false; }else{ return true; } },

校验手机短信验证码是否正确，这里正式开发同样需要调取后台验证接口，这里只是写死在代码中作为效果演示；

代码语言：javascript复制getPhoneNum:function(e){ var value = e.detail.value; this.setData({ phoneNum: value }); },代码语言：javascript复制

细节：因为小程序不能操作dom元素，所以是无法在点击获取验证码按钮后通过document.getElementById(username).value获取手机号码;所以这里需要对手机号码加一个绑定事件bindchange，当输入框内容发生改变时将用户输入内容存放到全局data–>phoneNum里面;

代码语言：javascript复制formSubmit:function(e){ var param = e.detail.value; this.mysubmit(param); }, mysubmit:function (param){ var flag = this.checkUserName(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param) var that = this; if(flag){ this.setregistData1(); setTimeout(function(){ wx.showToast({ title: '成功', icon: 'success', duration: 1500 }); that.setregistData2(); that.redirectTo(param); },2000); } },

最后就是将用户的输入内容提交

找回密码

页面效果：

找回密码原型基本和注册页面差不多，所以直接贴上所有代码：

代码语言：javascript复制var util = require("../../utils/util.js"); Page({ data:{ registBtnTxt:"提交", registBtnBgBgColor:"#ff9900", getSmsCodeBtnTxt:"获取验证码", getSmsCodeBtnColor:"#ff9900", // getSmsCodeBtnTime:60, btnLoading:false, registDisabled:false, smsCodeDisabled:false, phoneNum: '', }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }, getPhoneNum:function(e){ var value = e.detail.value; this.setData({ phoneNum: value }); }, formSubmit:function(e){ var param = e.detail.value; this.mysubmit(param); }, mysubmit:function (param){ var num = param.username.trim(); var flag = this.checkUserName(num)&&this.checkPhoneIsRegist(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param) var that = this; if(flag){ this.setregistData1(); setTimeout(function(){ wx.showToast({ title: '成功', icon: 'success', duration: 1500 }); that.setregistData2(); that.redirectTo(param); },2000); } }, setregistData1:function(){ this.setData({ registBtnTxt:"提交中", registDisabled: !this.data.registDisabled, registBtnBgBgColor:"#999", btnLoading:!this.data.btnLoading }); }, setregistData2:function(){ this.setData({ registBtnTxt:"提交", registDisabled: !this.data.registDisabled, registBtnBgBgColor:"#ff9900", btnLoading:!this.data.btnLoading }); }, checkUserName:function(num){ var phone = util.regexConfig().phone; // var inputUserName = param.username.trim(); if(phone.test(num)){ return true; }else{ wx.showModal({ title: '提示', showCancel:false, content: '请输入正确的手机号码' }); return false; } }, checkPhoneIsRegist:function(phoneNum){ var tempPhoneNum = "13211112222";//测试未注册手机号码 if(phoneNum==tempPhoneNum){ wx.showModal({ title: '提示', showCancel:false, content: '该手机尚未注册！' }); return false; }else{ return true; } }, checkPassword:function(param){ var userName = param.username.trim(); var password = param.password.trim(); if(password.length 0){ count--; that.setData({ getSmsCodeBtnTxt:count+' s', getSmsCodeBtnColor:"#999", smsCodeDisabled: true }); }else{ that.setData({ getSmsCodeBtnTxt:"获取验证码", getSmsCodeBtnColor:"#ff9900", smsCodeDisabled: false }); count = 60; clearInterval(si); } },1000); } }, checkSmsCode:function(param){ var smsCode = param.smsCode.trim(); var tempSmsCode = '000000';//演示效果临时变量，正式开发需要通过wx.request获取 if(smsCode!=tempSmsCode){ wx.showModal({ title: '提示', showCancel:false, content: '请输入正确的短信验证码' }); return false; }else{ return true; } }, redirectTo:function(param){ //需要将param转换为字符串 param = JSON.stringify(param); wx.redirectTo({ url: '../main/index?param='+ param//参数只能是字符串形式，不能为json对象 }) } })

细节：找回密码多了一个处理流程，需要检验当前手机号码是否注册过；

代码语言：javascript复制checkPhoneIsRegist:function(phoneNum){ var tempPhoneNum = "13211112222";//测试未注册手机号码 if(phoneNum==tempPhoneNum){ wx.showModal({ title: '提示', showCancel:false, content: '该手机尚未注册！' }); return false; }else{ return true; } },

【本文地址】

公司简介

联系我们