欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

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

发布：2018-01-25 16:59浏览： 次来源：网络 作者：tianshu

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

效果图：

微信小程序入门（七）登录注册(图1)

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

微信小程序入门（七）登录注册(图2)

wxml源码：

1. 顶部提示错误信息

2. 输入内容长度限制

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

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

 
  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表单背景透明

 
  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. 导航页面跳转传值

 
  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. })  


  1. util.js 源码（封装了一些常用的方法，如果有不懂的内容，可以参考前面几章）
     
    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. }  

    登录页面也是一样的逻辑和代码，这里就不再贴出来，后续会提供源码。





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

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有