小程序登录注册实例

• 更多分享：www.catbro.cn

涉及知识点：

页面切换：

• 1、登录调注册带返回的页面切换
• 2、注册wx.navigateBack()回退到登录
• 3、登录成功直接redirectTo至带tab的主页面

消息弹窗：

• 1、操作工程中的toash提示
• 2、带确认按钮的强交互提示

网络请求：

• 1、引入async-await异步请求能力
• 2、对网络请求的简易封装

相关知识点链接：

• 网络请求封装相关详情请看微信小程序开发网络请求的简易封装支持async-await异步操作
• 页面跳转相关知识点请看小程序之页面跳转那点事

登录页面

• 登录页面wxml代码

    <!--pages/login/login.wxml-->
    <view class='container page'>
      <form bindsubmit="login" name="loginForm">
        <view class="login-content">
          <view class="item pb-10">
            <view class="title">账号</view>
            <input placeholder="用户名" name="userName" placeholder-style="color:#999999;" />
          </view>
          <view class="hr"></view>
          <view class="item mt-20">
            <view class="title pb-10">密码</view>
            <input name="password" type='password' placeholder="请输入密码" password placeholder-style="color:#999999;" />
  
          </view>
          <view class="hr"></view>
  
          <button class="weui-btn stretch" form-type="submit" type="primary">登录</button>
  
          <view class='register-view'>
            <text class='register-button' bindtap='gotoRegisterPage'>点击注册</text>
          </view>
        </view>
        <view>{{msg}}</view>
      </form>
    </view>
  

• css

    /* pages/login/login.wxss */
    @import '../../styles/weui.wxss';
  
    .login-content {
      margin-top: 80px;
      /* border: 1px #999 solid; */
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding-left: 20px;
      padding-right: 20px;
    }
  
    .item {
      display: flex;
      flex-direction: row;
      justify-content: stretch;
      align-items: center;
    }
  
    .register-view {
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
  
    .register-button {
      align-self: flex-end;
      color: red;
    }
  

• js

    // pages/login/login.js
    const util = require('../../utils/util.js')
    const api = require('../../utils/api.js')
    const regeneratorRuntime = require('../../utils/regenerator-runtime/runtime.js')
    Page({
  
      /**
       * 页面的初始数据
       */
      data: {
        userName: "",
        password: "",
        msg: ""
      },
      async login(e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
        let loginData = e.detail.value
        if (util.isNullOrEmpty(loginData.userName)) {
          wx.showToast({
            title: "用户名不能为空"
          })
          return
        }
  
        if (util.isNullOrEmpty(loginData.password)) {
          wx.showToast({
            title: "密码不能为空"
          })
  
          return
        }
        let result = await api._post('/api/user/login', loginData)
        console.log(result)
        if (result.code == -1) {
          wx.showModal({
            title: '温馨提示',
            content: result.msg,
            showCancel: false
          })
          return
        }
  
        //登录成功，存储用户信息
        wx.setStorageSync('user', result.data)
        wx.redirectTo({
          url: '../index/index',
        })
        wx.showToast({
          title: '登录成功'
        })
      },
      gotoRegisterPage(e) {
        console.log("跳转到注册界面")
        wx.navigateTo({
          url: '../register/register'
        })
      },
    })
  

• 

注册页面

• xml源码

    <!--pages/register/register.wxml-->
    <view class='container page'>
      <form bindsubmit="register" name="registerForm">
        <view class="register-content">
          <view class="item pb-10">
            <view class="title">登录账号</view>
            <input placeholder="用户名" name="userName" placeholder-style="color:#999999;" />
          </view>
          <view class="hr"></view>
          <view class="item mt-20">
            <view class="title pb-10">设置密码</view>
            <input name="password" type='password' placeholder="请输入密码" password placeholder-style="color:#999999;" />
          </view>
          <view class="hr"></view>
  
          <view class="item mt-20">
            <view class="title pb-10">确认密码</view>
            <input name="rePassword" type='password' placeholder="请再次输入密码" password placeholder-style="color:#999999;" />
  
          </view>
          <view class="hr"></view>
  
          <button class="weui-btn stretch" form-type="submit" type="primary">注册</button>
  
        </view>
        <view>{{msg}}</view>
      </form>
    </view>
  

• css

    /* pages/register/register.wxss */
    @import '../../styles/weui.wxss';
  
    .register-content {
      margin-top: 80px;
      /* border: 1px #999 solid; */
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding-left: 20px;
      padding-right: 20px;
    }
  
    .item {
      display: flex;
      flex-direction: row;
      justify-content: stretch;
      align-items: center;
    }
  

• js

    // pages/register/register.js
    const util = require('../../utils/util.js')
    const api = require('../../utils/api.js')
    const regeneratorRuntime = require('../../utils/regenerator-runtime/runtime.js')
    Page({
  
      /**
       * 页面的初始数据
       */
      data: {
        userName: "",
        password: "",
        msg: ""
      },
      async register(e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
        let loginData = e.detail.value
        if (util.isNullOrEmpty(loginData.userName)) {
          wx.showToast({ title: "用户名不能为空" })
          return
        }
  
        if (util.isNullOrEmpty(loginData.password)) {
          wx.showToast({ title: "密码不能为空" })
          return
        }
        if (util.isNullOrEmpty(loginData.rePassword)) {
          wx.showToast({ title: "确认密码不能为空" })
          return
        }
  
        if (loginData.password !== loginData.rePassword) {
          wx.showToast({ title: "两次密码不一致" })
          return
        }
  
        let result = await api._post('/api/user/register', loginData)
        console.log(result)
        if (result.code == -1) {
          wx.showModal({
            title: '温馨提示',
            content: result.msg,
            showCancel: false
          })
          return
        }
  
        //登录成功，存储用户信息
        wx.setStorageSync('user', result.data)
        wx.navigateBack()
        wx.showToast({
          title: '注册成功'
        })
      },
    })
  

• 

• app.css

    /**app.wxss**/
    @import 'styles/weui.wxss';
    .container {
      display: flex;
      height: 100%;
      flex-direction: column;
      align-items: stretch;
      justify-content:flex-start;
      box-sizing: border-box;
    } 
  
    page{
        background-color: #F8F8F8;
        font-size: 16px;
        font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    }
    .page__hd {
        padding: 40px;
    }
    .page__bd {
        padding-bottom: 40px;
    }
    .page__bd_spacing {
        padding-left: 15px;
        padding-right: 15px;
    }
    .mt-10{
      margin-top: 10px;
    }
    .pt-10{
      padding-top: 10px;
    }
    .pb-20{
      padding-bottom: 20px;
    }
    .pb-10{
      padding-bottom: 10px;
    }
    .mt-20{
      margin-top: 20px;
    }
    .mb-10{
      margin-bottom: 10px;
    }
    .page__ft{
        padding-bottom: 10px;
        text-align: center;
    }
  
    .page__title {
        text-align: left;
        font-size: 20px;
        font-weight: 400;
    }
  
    .page__desc {
        margin-top: 5px;
        color: #888888;
        text-align: left;
        font-size: 14px;
    }
    .stretch {
      width: 100%;
    }
    .hr {
      border: 1px solid #ccc;
      opacity: 0.2;
      width: 100%;
      margin: 0 auto;
    }
    .title {
      margin-right: 30px;
      font-weight: bold;
    }