微信小程序开发3-用户登录.注册模块

上次我们说了关于跳转页面与显示数据的一些事
这次我们来聊一聊用户登录与注册的一些事
闲话少说先上代码
登录页：

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>[b]xxx.js[/b]

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.username var 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" }) }})  


这里注册的头像没有粘出可以根据需要自定义头像，这里就不做太多介绍

[b]这里注意前后台都应该校验一会用户名和密码，前台校验的已经给出，具体后台校验的步骤大家自行发挥.这里插一句本人是写后台的，这里贴出的代码是最近写前台时遇到的问题及解决方法-跑题了，言归正传[/b]
接下来是注册的代码：

[b]xxx_regist.wxml:[/b]
  <view class="login">    <image class="avatar" style="" mode=
cc54
"" 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.username var pwd = that.data.password // console.log("js中收到的用户名："+name+"，密码："+pwd) //发送ajax请求将用户注册信息传递过去进行注册 wx.request({ url: 'https://qichuang.mynatapp.cc/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工程基本相似，希望可以给大家做个参考，谢谢