小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序入门《五》登录注册

发布时间：2017-12-08 17:40 所属栏目：小程序开发教程

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

 
 
 

这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，form表单的取值，get / post 请求 ，反馈交互提示框，页面跳转 以及 页面UI。

效果图：

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

wxml源码：

1. 顶部提示错误信息

2. 输入内容长度限制

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

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

 

[html] view plain copy
 
  1. <!--  
  2. 变量说明：  
  3. showTopTips ： 是否显示提示信息  
  4. errorMsg ： 错误信息  
  5. windowHeight ：设备的窗口的高度  
  6. windowWidth ： 设备的窗口的宽度  
  7. account ： 账号  
  8. password ：密码  
  9. subPassword ：确认密码  
  10. -->  
  11. <view class="page__bd">  
  12.   <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view>  
  13.   <view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" class="back_img">  
  14.   </view>  
  15.   <view style="position:absolute;top:{{windowHeight * 0.06}}px;">  
  16.     <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>  
  17.   </view>  
  18.   <form bindsubmit="formSubmit" bindreset="formReset">  
  19.     <view class="login_info" style="top:{{windowHeight * 0.35}}px;width: {{windowWidth * 0.92}}px;">  
  20.       <view class="weui-cells weui-cells_after-title login_form">  
  21.         <view class="weui-cell weui-cell_input">  
  22.           <view class="weui-cell__hd">  
  23.             <view class="weui-label">账号</view>  
  24.           </view>  
  25.           <view class="weui-cell__bd">  
  26.             <input class="weui-input" placeholder="请输入账号" type="text" maxlength="20" value="{{account}}" focus="true" name="account"/>  
  27.           </view>  
  28.         </view>  
  29.         <view class="weui-cell weui-cell_input">  
  30.           <view class="weui-cell__hd">  
  31.             <view class="weui-label">密码</view>  
  32.           </view>  
  33.           <view class="weui-cell__bd">  
  34.             <input class="weui-input" placeholder="请输入密码" type="password" maxlength="10" value="{{password}}" name="password"/>  
  35.           </view>  
  36.         </view>  
  37.         <view class="weui-cell weui-cell_input">  
  38.           <view class="weui-cell__hd">  
  39.             <view class="weui-label">确认密码</view>  
  40.           </view>  
  41.           <view class="weui-cell__bd">  
  42.             <input class="weui-input" placeholder="请输入确认密码" type="password" maxlength="10" value="{{subPassword}}" name="subPassword"/>  
  43.           </view>  
  44.         </view>  
  45.         <view class="weui-btn-area">  
  46.           <button class="weui-btn" type="primary" formType="submit">注册</button>  
  47.         </view>  
  48.       </view>  
  49.     </view>  
  50.   </form>  
  51. </view>  


wxss源码：

 

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

2. form表单背景透明

 

[css] view plain copy
 
  1. .back_img{  
  2.   background: url(../../images/meBack.jpg) no-repeat;  
  3.   background-size:cover;  
  4.   -webkit-filter: blur(10px); /* Chrome, Opera */  
  5.   -moz-filter: blur(10px);  
  6.   -ms-filter: blur(10px);      
  7.   filter: blur(10px);   
  8.   z-index:0;  
  9.   position:relative;  
  10. }  
  11. .login_info{  
  12.   z-index: 999;  
  13.   position:absolute;  
  14. }  
  15. .login_form{  
  16.   border-radius:5px;  
  17.   margin-left:8%;  
  18.   background-color: rgba(255,255,255,0.2);  
  19. }  


js源码：

 

1. form表单获取值

2. request请求

3. 交互反馈弹出框

4. 导航页面跳转传值

 

[javascript] view plain copy
 
  1. var util = require('../../utils/util.js');  
  2. var app = getApp();  
  3.   
  4. Page({  
  5.   data: {  
  6.     showTopTips: false,  
  7.     errorMsg: ""  
  8.   },  
  9.   onLoad: function () {  
  10.     var that = this;  
  11.     wx.getSystemInfo({  
  12.       success: function (res) {  
  13.         that.setData({  
  14.           windowHeight: res.windowHeight,  
  15.           windowWidth: res.windowWidth  
  16.         })  
  17.       }  
  18.     });  
  19.   },  
  20.   
  21.   formSubmit: function (e) {  
  22.     // form 表单取值，格式 e.detail.value.name(name为input中自定义name值) ；使用条件：需通过<form bindsubmit="formSubmit">与<button formType="submit">一起使用  
  23.     var account = e.detail.value.account;  
  24.     var password = e.detail.value.password;  
  25.     var subPassword = e.detail.value.subPassword;  
  26.     var that = this;  
  27.     // 判断账号是否为空和判断该账号名是否被注册  
  28.     if ("" == util.trim(account)) {  
  29.       util.isError("账号不能为空", that);  
  30.       return;  
  31.     } else {  
  32.       util.clearError(that);  
  33.       app.ajax.req('/register/checkLoginName', {  
  34.         "loginName": account  
  35.       }, function (res) {  
  36.         if (!res) {  
  37.           util.isError("账号已经被注册过", that);  
  38.           return;  
  39.         }  
  40.       });  
  41.     }  
  42.     // 判断密码是否为空  
  43.     if ("" == util.trim(password)) {  
  44.       util.isError("密码不能为空", that);  
  45.       return;  
  46.     } else {  
  47.       util.clearError(that);  
  48.     }  
  49.     // 两个密码必须一致  
  50.     if (subPassword != password) {  
  51.       util.isError("输入密码不一致", that);  
  52.       return;  
  53.     } else {  
  54.       util.clearError(that);  
  55.     }  
  56.     // 验证都通过了执行注册方法  
  57.     app.ajax.req('/itdragon/register', {  
  58.       "account": account,  
  59.       "password": password  
  60.     }, function (res) {  
  61.       if (true == res) {  
  62.         // 显示模态弹窗  
  63.         wx.showModal({  
  64.           title: '注册状态',  
  65.           content: '注册成功，请点击确定登录吧',  
  66.           success: function (res) {  
  67.             if (res.confirm) {  
  68.               // 点击确定后跳转登录页面并关闭当前页面  
  69.               wx.redirectTo({  
  70.                 url: '../login/login?account=' + account + '&password?=' + password + ''  
  71.               })  
  72.             }  
  73.           }  
  74.         })  
  75.       } else {  
  76.         // 显示消息提示框  
  77.         wx.showToast({  
  78.           title: '注册失败',  
  79.           icon: 'error',  
  80.           duration: 2000  
  81.         })  
  82.       }  
  83.     });  
  84.   }  
  85. })  


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

 

 

[html] view plain copy
 
  1. function formatTime(date) {  
  2.   var year = date.getFullYear()  
  3.   var month = date.getMonth() + 1  
  4.   var day = date.getDate()  
  5.   
  6.   var hour = date.getHours()  
  7.   var minute = date.getMinutes()  
  8.   var second = date.getSeconds()  
  9.   
  10.   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')  
  11. }  
  12.   
  13. function formatNumber(n) {  
  14.   n = n.toString()  
  15.   return n[1] ? n : '0' + n  
  16. }  
  17.   
  18. var rootDocment = 'https://www.itit123.cn';  
  19. function req(url,data,cb){  
  20.     wx.request({  
  21.       url: rootDocment + url,  
  22.       data: data,  
  23.       method: 'post',  
  24.       header: {'Content-Type':'application/x-www-form-urlencoded'},  
  25.       success: function(res){  
  26.         return typeof cb == "function" && cb(res.data)  
  27.       },  
  28.       fail: function(){  
  29.         return typeof cb == "function" && cb(false)  
  30.       }  
  31.     })  
  32. }  
  33.   
  34. function getReq(url,data,cb){  
  35.     wx.request({  
  36.       url: rootDocment + url,  
  37.       data: data,  
  38.       method: 'get',  
  39.       header: {'Content-Type':'application/x-www-form-urlencoded'},  
  40.       success: function(res){  
  41.         return typeof cb == "function" && cb(res.data)  
  42.       },  
  43.       fail: function(){  
  44.         return typeof cb == "function" && cb(false)  
  45.       }  
  46.     })  
  47. }  
  48.   
  49. // 去前后空格  
  50. function trim(str) {  
  51.   return str.replace(/(^\s*)|(\s*$)/g, "");  
  52. }  
  53.   
  54. // 提示错误信息  
  55. function isError(msg, that) {  
  56.   that.setData({  
  57.     showTopTips: true,  
  58.     errorMsg: msg  
  59.   })  
  60. }  
  61.   
  62. // 清空错误信息  
  63. function clearError(that) {  
  64.   that.setData({  
  65.     showTopTips: false,  
  66.     errorMsg: ""  
  67.   })  
  68. }  
  69.   
  70. module.exports = {  
  71.   formatTime: formatTime,  
  72.   req: req,  
  73.   trim: trim,  
  74.   isError: isError,   
  75.   clearError: clearError,  
  76.   getReq: getReq  
  77. }  


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



易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18089.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询