微信小程序入门七登录注册

 

上一章介绍了 微信小程序入门六本地缓存和搜索 ，这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，form表单的取值，get / post 请求 ，反馈交互提示框，页面跳转 以及 页面UI。

效果图：

注册页面：基本内容有账号，密码，确认密码，也可以添加 是否同意条款 

wxml源码：

1. 顶部提示错误信息

2. 输入内容长度限制

3. 点击注册进行表单验证

4. 存在问题：输入框focus 无效果

 

<!--
变量说明：
showTopTips ： 是否显示提示信息
errorMsg ： 错误信息
windowHeight ：设备的窗口的高度
windowWidth ： 设备的窗口的宽度
account ： 账号
password ：密码
subPassword ：确认密码
-->
<view class="page__bd">
  <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>
  <view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" class="back_img">
  </view>
  <view style="position:absolute;top:{{windowHeight * 0.06}}px;">
    <image src="../../images/meBack.jpg" style="width: {{windowWidth * 0.4}}px;height:{{windowWidth * 0.4}}px; margin-left:{{windowWidth * 0.5 - 80}}px;border-radius:{{windowWidth * 0.2}}px;"></image>
  </view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="login_info" style="top:{{windowHeight * 0.35}}px;width: {{windowWidth * 0.92}}px;">
      <view class="weui-cells weui-cells_after-title login_form">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">账号</view>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" placeholder="请输入账号" type="text" maxlength="20" value="{{account}}" focus="true" name="account"/>
          </view>
        </view>
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">密码</view>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" placeholder="请输入密码" type="password" maxlength="10" value="{{password}}" name="password"/>
          </view>
        </view>
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">确认密码</view>
          </view>
          <view class="weui-cell__bd">
            <input class="weui-input" placeholder="请输入确认密码" type="password" maxlength="10" value="{{subPassword}}" name="subPassword"/>
          </view>
        </view>
        <view class="weui-btn-area">
          <button class="weui-btn" type="primary" formType="submit">注册</button>
        </view>
      </view>
    </view>
  </form>
</view>

wxss源码：

 

1. 背景图片以毛玻璃的形式展示

2. form表单背景透明

 

.back_img{
  background: url(../../images/meBack.jpg) no-repeat;
  background-size:cover;
  -webkit-filter: blur(10px); /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);    
  filter: blur(10px); 
  z-index:0;
  position:relative;
}
.login_info{
  z-index: 999;
  position:absolute;
}
.login_form{
  border-radius:5px;
  margin-left:8%;
  background-color: rgba(255,255,255,0.2);
}

js源码：

 

1. form表单获取值

2. request请求

3. 交互反馈弹出框

4. 导航页面跳转传值

 

var util = require('../../utils/util.js');
var app = getApp();

Page({
  data: {
    showTopTips: false,
    errorMsg: ""
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    });
  },

  formSubmit: function (e) {
    // form 表单取值，格式 e.detail.value.name(name为input中自定义name值) ；使用条件：需通过<form bindsubmit="formSubmit">与<button formType="submit">一起使用
    var account = e.detail.value.account;
    var password = e.detail.value.password;
    var subPassword = e.detail.value.subPassword;
    var that = this;
    // 判断账号是否为空和判断该账号名是否被注册
    if ("" == util.trim(account)) {
      util.isError("账号不能为空", that);
      return;
    } else {
      util.clearError(that);
      app.ajax.req('/register/checkLoginName', {
        "loginName": account
      }, function (res) {
        if (!res) {
          util.isError("账号已经被注册过", that);
          return;
        }
      });
    }
    // 判断密码是否为空
    if ("" == util.trim(password)) {
      util.isError("密码不能为空", that);
      return;
    } else {
      util.clearError(that);
    }
    // 两个密码必须一致
    if (subPassword != password) {
      util.isError("输入密码不一致", that);
      return;
    } else {
      util.clearError(that);
    }
    // 验证都通过了执行注册方法
    app.ajax.req('/itdragon/register', {
      "account": account,
      "password": password
    }, function (res) {
      if (true == res) {
        // 显示模态弹窗
        wx.showModal({
          title: '注册状态',
          content: '注册成功，请点击确定登录吧',
          success: function (res) {
            if (res.confirm) {
              // 点击确定后跳转登录页面并关闭当前页面
              wx.redirectTo({
                url: '../login/login?account=' + account + '&password?=' + password + ''
              })
            }
          }
        })
      } else {
        // 显示消息提示框
        wx.showToast({
          title: '注册失败',
          icon: 'error',
          duration: 2000
        })
      }
    });
  }
})

util.js 源码（封装了一些常用的方法，如果有不懂的内容，可以参考前面几章）

 

 

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

var rootDocment = 'https://www.itit123.cn';
function req(url,data,cb){
    wx.request({
      url: rootDocment + url,
      data: data,
      method: 'post',
      header: {'Content-Type':'application/x-www-form-urlencoded'},
      success: function(res){
        return typeof cb == "function" && cb(res.data)
      },
      fail: function(){
        return typeof cb == "function" && cb(false)
      }
    })
}

function getReq(url,data,cb){
    wx.request({
      url: rootDocment + url,
      data: data,
      method: 'get',
      header: {'Content-Type':'application/x-www-form-urlencoded'},
      success: function(res){
        return typeof cb == "function" && cb(res.data)
      },
      fail: function(){
        return typeof cb == "function" && cb(false)
      }
    })
}

// 去前后空格
function trim(str) {
  return str.replace(/(^\s*)|(\s*$)/g, "");
}

// 提示错误信息
function isError(msg, that) {
  that.setData({
    showTopTips: true,
    errorMsg: msg
  })
}

// 清空错误信息
function clearError(that) {
  that.setData({
    showTopTips: false,
    errorMsg: ""
  })
}

module.exports = {
  formatTime: formatTime,
  req: req,
  trim: trim,
  isError: isError, 
  clearError: clearError,
  getReq: getReq
}

登录页面也是一样的逻辑和代码，这里就不再贴出来，后续会提供源码（文中的请求地址可能已经失效，仅供参考）。