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

上一章介绍了微信小程序入门六本地缓存和搜索，这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，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() + 1var 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
}

登录页面也是一样的逻辑和代码，这里就不再贴出来，后续会提供源码（文中的请求地址可能已经失效，仅供参考）。

微信小程序入门七登录注册相关推荐

微信小程序如何实现登录注册带源码
前几天没事随手写了个小程序端的登录注册,现在分享给大家一.登录微信前端这是效果图与wxml代码这是wxss代码 input{height: 100rpx; text-align: center; ...
微信小程序版的登录注册
##使用微信小程序进行用户的登陆注册功能使用了weui进行 ####1.登录界面展示: ####2.注册界面展示 ####3.代码列表展示: ####4.核心功能 #####(1)用户名密码错误: ...
微信小程序入门（登录页面）
1.首先前往开发者工具下载安装开发工具: 2.安装后微信扫码,并填写自己的AppID选择自己的项目目录后登录: 登陆后点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预 ...
微信小程序（七）注册
enroll.wxml  <view wx:if="{{!success}}"><vie ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...

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

微信小程序入门七登录注册相关推荐

最新文章

热门文章