上次我们说了关于跳转页面与显示数据的一些事
这次我们来聊一聊用户登录与注册的一些事
闲话少说先上代码
登录页：
xxx.wxml
< view class = "login"> < image class = "avatar" style = "" mode = "" src = "../../images/3.png" binderror = "" bindload = ""></ image > < view class = "doc-title zan-hairline--bottom"></ view > < view class = "username"> < text > 用户名 </ text > < input placeholder = "用户名" type = "text" bindinput = "usernameinput" / ></ view > < view class = "password"> < text > 密码 </ text > < input placeholder = "密码" type = "password" bindinput = "passwordinput" / > </ view >
< view class = "signin"> < button type = "submit" catchtap = "signin"> 登录 </ button > < button type = "submit" catchtap = "register"> 注册 </ button > </ view > </ view >
xxx.js
Page({data: {username: "" , password: "" , }, usernameinput: function (e) {this .setData({username: e.detail.value }) }, passwordinput: function (e) {this .setData({password: e.detail.value }) },//点击登陆的时候触发的事件 signin: function () {var that = this ;//登陆的时候要传过来的参数var name = that.data.usernamevar pwd = that.data.password if (that.data.username == "" ) {wx.showModal({title: "信息提示" , content: "用户名不能为空!" }) } else if (that.data.password == "" ) {wx.showModal({title: "信息提示" , content: "请输入密码!" }) } console.log( "用户名：" + name + "密码：" + pwd)//发送ajax请求到服务器-登录 wx.request({url: 'http://localhost:8080/Weixinapp/user/login.do' ,data: {name: name, pwd: pwd, }, header: {'content-type' : 'application/x-www-form-urlencoded' // 默认值 }, method: 'POST' , dataType: 'json' , success: function (res) {// console.log("成功")// console.log("返回的结果"+JSON.stringify(res.data.msg))// console.log("返回的结果" + JSON.stringify(res.data.status))var status = JSON.stringify(res.data.status)var msg = JSON.stringify(res.data.msg)//弹出提示 wx.showModal({title: "信息提示" , content: msg })if (status == 0 ){// console.log(status)//跳转到index页面 wx.switchTab({url: '../index/index' ,}) } }, fail: function (res) {wx.showToast({
title: '服务器网络错误,请稍后重试' ,
icon: 'loading' ,
duration: 1500
}) }, complete: function (res) {
}, }) },//点击注册的时候触发的事件 register: function () {wx.navigateTo({url: "register/register" }) } })
这里注册的头像没有粘出可以根据需要自定义头像，这里就不做太多介绍
这里注意前后台都应该校验一会用户名和密码，前台校验的已经给出，具体后台校验的步骤大家自行发挥.这里插一句本人是写后台的，这里贴出的代码是最近写前台时遇到的问题及解决方法-跑题了，言归正传
接下来是注册的代码：
xxx_regist.wxml:
< view class = "login"> < image class = "avatar" style = "" mode = "" src = "../../../images/3.png" binderror = "" bindload = ""></ image > < view class = "doc-title zan-hairline--bottom"></ view > < view class = "username"> < text > 用户名 </ text > < input placeholder = "用户名" type = "text" bindinput = "usernameinput" / ></ view > < view class = "password"> < text > 密码 </ text > < input placeholder = "密码" type = "password" bindinput = "passwordinput" / > </ view >
< view class = "passwordconfirm"> < text > 密码确认 </ text > < input placeholder = "密码确认" value = "" type = "password" bindinput = "passwordconfirminput" / > </ view > < view class = "signin"> < button type = "submit" catchtap = "signin"> 注册 </ button > </ view > </ view >
xxx_regist.js:Page({data: {username: "" , password: "" , passwordconfirm: ""
}, usernameinput: function (e) {this .setData({username: e.detail.value }) }, passwordinput: function (e) {this .setData({password: e.detail.value }) }, passwordconfirminput: function (e) {this .setData({passwordconfirm: e.detail.value }) }, signin: function () {var that = this ;//请求的时候需要提交的参数var name = that.data.usernamevar pwd = that.data.password// console.log("js中收到的用户名："+name+"，密码："+pwd)//发送ajax请求将用户注册信息传递过去进行注册 wx.request({url: '/Weixinapp/user/regist.do' ,data: {name: name, pwd: pwd }, header: {'content-type' : 'application/x-www-form-urlencoded' // 默认值 }, method: "POST" , dataType: "json" , success: function (res) {// console.log("成功") console.log( "响应的数据" +res.data)// if (res.name == username) {// wx.showModal({// title: "信息提示",// content: "该用户名已被注册"// })// } else {// wx.showModal({// title: "信息提示",// content: "注册成功，请等待审核通过"// }),// wx.switchTab({// url: "../../myself/myself"// })// } }, fail: function (res){wx:wx.showToast({title: '服务器网络错误,请稍后重试' ,
icon: 'loading' , duration: 1500 , }) }, complete: function (res){
} })
if (that.data.username == "" ) {wx.showModal({title: "信息提示" , content: "用户名不能为空!" }) } else if (that.data.password == "" ) {wx.showModal({title: "信息提示" , content: "请输入密码!" }) } else if (that.data.passwordconfirm == "" ) {wx.showModal({title: "信息提示" , content: "请确认密码!" }) } else if (that.data.passwordconfirm != that.data.password) {wx.showModal({title: "信息提示" , content: "两次密码输入不一致!" }) } } })
要注意的是无论登录还是注册用的请求都是ajax请求的方式，微信小程序中的请求
基本都是ajax实现的这里要注意
基本实现方式与Web工程基本相似，希望可以给大家做个参考，谢谢
如果觉得《微信小程序开发3-用户登录.注册模块》对你有帮助，请点赞、收藏，并留下你的观点哦！
