微信小程序入門《五》登錄注冊
發(fā)布時間：2017-12-08 17:40 所屬欄目：小程序開發(fā)教程
上一章介紹了 微信小程序入門六本地緩存和搜索 ，這章介紹小程序的登錄注冊頁面。主要有表單的驗(yàn)證，錯誤信息的提示，form表單的取值，get / post 請求 ，反饋交互提示框，頁面跳轉(zhuǎn) ...
這章介紹小程序的登錄注冊頁面。主要有表單的驗(yàn)證，錯誤信息的提示，form表單的取值，get / post 請求 ，反饋交互提示框，頁面跳轉(zhuǎn) 以及 頁面UI。
效果圖：
注冊頁面：基本內(nèi)容有賬號，密碼，確認(rèn)密碼，也可以添加 是否同意條款
wxml源碼：
1. 頂部提示錯誤信息
2. 輸入內(nèi)容長度限制
3. 點(diǎn)擊注冊進(jìn)行表單驗(yàn)證
4. 存在問題：輸入框focus 無效果
- <!--
- 變量說明：
- showTopTips ： 是否顯示提示信息
- errorMsg ： 錯誤信息
- windowHeight ：設(shè)備的窗口的高度
- windowWidth ： 設(shè)備的窗口的寬度
- account ： 賬號
- password ：密碼
- subPassword ：確認(rèn)密碼
- -->
- <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">確認(rèn)密碼</view>
- </view>
- <view class="weui-cell__bd">
- <input class="weui-input" placeholder="請輸入確認(rèn)密碼" 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. 導(dǎo)航頁面跳轉(zhuǎn)傳值
- 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("賬號已經(jīng)被注冊過", 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);
- }
- // 驗(yàn)證都通過了執(zhí)行注冊方法
- app.ajax.req('/itdragon/register', {
- "account": account,
- "password": password
- }, function (res) {
- if (true == res) {
- // 顯示模態(tài)彈窗
- wx.showModal({
- title: '注冊狀態(tài)',
- content: '注冊成功，請點(diǎn)擊確定登錄吧',
- success: function (res) {
- if (res.confirm) {
- // 點(diǎn)擊確定后跳轉(zhuǎn)登錄頁面并關(guān)閉當(dāng)前頁面
- wx.redirectTo({
- url: '../login/login?account=' + account + '&password?=' + password + ''
- })
- }
- }
- })
- } else {
- // 顯示消息提示框
- wx.showToast({
- title: '注冊失敗',
- icon: 'error',
- duration: 2000
- })
- }
- });
- }
- })
util.js 源碼（封裝了一些常用的方法，如果有不懂的內(nèi)容，可以參考前面幾章）
- 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
- }
登錄頁面也是一樣的邏輯和代碼，這里就不再貼出來，后續(xù)會提供源碼（文中的請求地址可能已經(jīng)失效，僅供參考）。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://m.chqfk.com/wxmini/doc/course/18089.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
