微信小程式入門七登入註冊
阿新 • • 發佈：2019-02-17
這章介紹小程式的登入註冊頁面。主要有表單的驗證，錯誤資訊的提示，form表單的取值，get / post 請求 ，反饋互動提示框，頁面跳轉 以及 頁面UI。
效果圖：
註冊頁面：基本內容有賬號，密碼，確認密碼，也可以新增 是否同意條款
wxml原始碼：
1. 頂部提示錯誤資訊
2. 輸入內容長度限制
3. 點選註冊進行表單驗證
4. 存在問題：輸入框focus 無效果
<!-- 變數說明： showTopTips ： 是否顯示提示資訊 errorMsg ： 錯誤資訊 windowHeight ：裝置的視窗的高度 windowWidth ： 裝置的視窗的寬度 account ： 賬號 password ：密碼 subPassword ：確認密碼 --> <view class="page__bd"> <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{errorMsg}}</view> <view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" class="back_img"> </view> <view style="position:absolute;top:{{windowHeight * 0.06}}px;"> <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> </view> <form bindsubmit="formSubmit" bindreset="formReset"> <view class="login_info" style="top:{{windowHeight * 0.35}}px;width: {{windowWidth * 0.92}}px;"> <view class="weui-cells weui-cells_after-title login_form"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">賬號</view> </view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="請輸入賬號" type="text" maxlength="20" value="{{account}}" focus="true" name="account"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">密碼</view> </view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="請輸入密碼" type="password" maxlength="10" value="{{password}}" name="password"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">確認密碼</view> </view> <view class="weui-cell__bd"> <input class="weui-input" placeholder="請輸入確認密碼" type="password" maxlength="10" value="{{subPassword}}" name="subPassword"/> </view> </view> <view class="weui-btn-area"> <button class="weui-btn" type="primary" formType="submit">註冊</button> </view> </view> </view> </form> </view>
wxss原始碼：
1. 背景圖片以毛玻璃的形式展示
2. form表單背景透明
.back_img{ background: url(../../images/meBack.jpg) no-repeat; background-size:cover; -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); z-index:0; position:relative; } .login_info{ z-index: 999; position:absolute; } .login_form{ border-radius:5px; margin-left:8%; background-color: rgba(255,255,255,0.2); }
js原始碼：
1. form表單獲取值
2. request請求
3. 互動反饋彈出框
4. 導航頁面跳轉傳值
var util = require('../../utils/util.js'); var app = getApp(); Page({ data: { showTopTips: false, errorMsg: "" }, onLoad: function () { var that = this; wx.getSystemInfo({ success: function (res) { that.setData({ windowHeight: res.windowHeight, windowWidth: res.windowWidth }) } }); }, formSubmit: function (e) { // form 表單取值，格式 e.detail.value.name(name為input中自定義name值) ；使用條件：需通過<form bindsubmit="formSubmit">與<button formType="submit">一起使用 var account = e.detail.value.account; var password = e.detail.value.password; var subPassword = e.detail.value.subPassword; var that = this; // 判斷賬號是否為空和判斷該賬號名是否被註冊 if ("" == util.trim(account)) { util.isError("賬號不能為空", that); return; } else { util.clearError(that); app.ajax.req('/register/checkLoginName', { "loginName": account }, function (res) { if (!res) { util.isError("賬號已經被註冊過", that); return; } }); } // 判斷密碼是否為空 if ("" == util.trim(password)) { util.isError("密碼不能為空", that); return; } else { util.clearError(that); } // 兩個密碼必須一致 if (subPassword != password) { util.isError("輸入密碼不一致", that); return; } else { util.clearError(that); } // 驗證都通過了執行註冊方法 app.ajax.req('/itdragon/register', { "account": account, "password": password }, function (res) { if (true == res) { // 顯示模態彈窗 wx.showModal({ title: '註冊狀態', content: '註冊成功，請點選確定登入吧', success: function (res) { if (res.confirm) { // 點選確定後跳轉登入頁面並關閉當前頁面 wx.redirectTo({ url: '../login/login?account=' + account + '&password?=' + password + '' }) } } }) } else { // 顯示訊息提示框 wx.showToast({ title: '註冊失敗', icon: 'error', duration: 2000 }) } }); } })
util.js 原始碼（封裝了一些常用的方法，如果有不懂的內容，可以參考前面幾章）
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
var rootDocment = 'https://www.itit123.cn';
function req(url,data,cb){
wx.request({
url: rootDocment + url,
data: data,
method: 'post',
header: {'Content-Type':'application/x-www-form-urlencoded'},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
}
function getReq(url,data,cb){
wx.request({
url: rootDocment + url,
data: data,
method: 'get',
header: {'Content-Type':'application/x-www-form-urlencoded'},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
}
// 去前後空格
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
// 提示錯誤資訊
function isError(msg, that) {
that.setData({
showTopTips: true,
errorMsg: msg
})
}
// 清空錯誤資訊
function clearError(that) {
that.setData({
showTopTips: false,
errorMsg: ""
})
}
module.exports = {
formatTime: formatTime,
req: req,
trim: trim,
isError: isError,
clearError: clearError,
getReq: getReq
}登入頁面也是一樣的邏輯和程式碼，這裡就不再貼出來，後續會提供原始碼（文中的請求地址可能已經失效，僅供參考）。