小程序模板网

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

发布时间: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.   backgroundurl(../../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-index999;  
  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 点击咨询
QQ在线咨询