碼上快樂

相關內容    簡體    繁體

微信小程序入門七登錄注冊

本文轉載自   查看原文   2018-01-22 19:37   1802    小程序
 

上一章介紹了 微信小程序入門六本地緩存和搜索 ，這章介紹小程序的登錄注冊頁面。主要有表單的驗證，錯誤信息的提示，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. }  

登錄頁面也是一樣的邏輯和代碼，這里就不再貼出來，后續會提供源碼（文中的請求地址可能已經失效，僅供參考）。

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 微信小程序注冊、登錄小功能都在這 微信小程序入門 微信小程序入門（一） 微信小程序~頁面注冊page 從微信小程序到鴻蒙js開發【08】——表單組件&注冊登錄模塊 微信小程序：登錄-python處理 對於微信小程序登錄的理解圖 微信小程序登錄與支付 微信小程序 --- 登錄頁面 微信小程序 - Code 授權登錄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM