小程序入門之註冊頁面
阿新 • • 發佈：2019-03-23
lencod over 提示信息 效果 view spa bmi relative for
註冊頁面：基本內容有賬號，密碼，確認密碼
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 })
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 }
小程序入門之註冊頁面