微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序
通过微信小程序中丰富的表单组件来完成登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计。
将会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择组件、navigator页面连接组件等。
Ⅰ、登录设计
登录表单中，需输入账号、密码进行登录，在账号、密码输入框中都有友好的提示信息；登录按钮默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮下面提供手机快速注册、企业用户注册、找回密码链接；界面最下面是微信、QQ第三方登录方式。
一、新建一个名为form的项目：
二、在app.json文件里添加"pages/login/login" "pages/mobile/mobile" "pages/company/company" 3个文件目录，并删除默认的文件目录以及对应的文件夹：
三、在"pages/login/login"文件里，进行账号密码输入框布局设计，并添加相应的样式：
（login.wxml）
<!--pages/login/login.wxml-->
<view class="content">
<view class="account">
<view class="title">账号</view>
<view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
</view>
<view class="hr"></view>
<view class="account">
<view class="title">密码</view>
<view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
<view class="see">
<image src="/images/see.jpg" style="width:42px;height:30px;"></image>
</view>
</view>
<view class="hr"></view>
</view>
（login.wxss）
/* pages/login/login.wxss */
.content{
margin-top: 40px;
}
.account{
display: flex;
flex-direction: row;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 10px;
width: 90%;
}
.title{
margin-right: 30px;
font-weight: bold;
}
.hr{
border: 1px solid #cccccc;
opacity: 0.2;
width: 90%;
margin: 0 auto;
}
.see{
position: absolute;
right: 20px;
}
效果图如下：
四、在"pages/login/login"文件中进行登录按钮、手机快速注册、企业用户注册、找回密码以及第三方登录布局的设计，并添加相应的样式：
（login.wxml）
<!--pages/login/login.wxml-->
<view class="content">
<view class="account">
<view class="title">账号</view>
<view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
</view>
<view class="hr"></view>
<view class="account">
<view class="title">密码</view>
<view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
<view class="see">
<image src="/images/see.gif" style="width:35px;height:30px;"></image>
</view>
</view>
<view class="hr"></view>
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}"bindtap="login">登录</button>
<view class="operate">
<view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
<view><navigator url="../company/company">企业用户注册</navigator></view>
<view>找回密码</view>
</view>
<view class="login">
<view><image src="/images/wxlogin.gif" style="width:60px;height:40px;"></image></view>
<view><image src="/images/qqlogin.gif" style="width:70px;height:50px;"></image></view>
</view>
</view>
（login.wxss）
.account{
display: flex;
flex-direction: row;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 10px;
width: 90%;
}
.title{
margin-right: 30px;
font-weight: bold;
}
.hr{
border: 1px solid #cccccc;
opacity: 0.2;
width: 90%;
margin: 0 auto;
}
.see{
position: absolute;
right: 20px;
}
.btn{
width: 90%;
margin-top: 40px;
color: #999999;
}
.operate{
display: flex;
flex-direction: row;
}
.operate view{
margin: 0 auto;
margin-top: 40px;
font-size: 14px;
color: #333333;
}
.login{
display: flex;
flex-direction: row;
margin-top: 150px;
}
.login view{
margin: 0 auto;
}
效果图如下：
五、在"pages/login/login"文件中的js文件里添加accountInput、pwdBlur事件函数，当账号里输入内容后，登录按钮变为可用状态：
// pages/login/login.js
Page({
data: {
disabled: true,
btnstate: "default",
account:"",
password:""
},
accountInput: function (e){
var content = e.detail.value;
console.log(content);
if(content!=""){
this.setData({disabled:false,btnstate:"primary",account:content});
}
},
pwdBlur: function (e) {
var password = e.detail.value;
if(password!=""){
this.setData({password:password});
}
}
})
效果如下：
Ⅱ、手机号注册设计
在手机号注册中，需要设计输入框用来输入手机号，设计同意注册以及进行下一步按钮。
六、在"pages/mobile/mobile"文件中，进行手机号输入框布局设计，并添加相应样式：
（mobile.wxml）
<!--pages/mobile/mobile.wxml-->
<view class="content">
<view class="hr"></view>
<view class="numbg">
<view>+86</view>
<view><input placeholder="请输入手机号" maxlenge="11" bindblur="mobileblur"/></view>
</view>
</view>
（mobile.wxss）
/* pages/mobile/mobile.wxss */
.content{
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.hr{
padding-top: 20px;
}
.numbg{
border: 1px solid #cccccc;
width: 90%;
margin: 0 auto;
background-color: #ffffff;
border-radius: 5px;
display: flex;
flex-direction: row;
height: 50px;
}
.numbg view{
margin-left: 20px;
margin-top: 14px;
}
效果图如下：
七、在"pages/mobile/mobile"文件中，设计注册协议和下一步按钮操作，并添加相应的样式：
（mobile.wxml）
<!--pages/mobile/mobile.wxml-->
<view class="content">
<view class="hr"></view>
<view class="numbg">
<view>+86</view>
<view><input placeholder="请输入手机号" maxlenge="11" bindblur="mobileblur"/></view>
</view>
<view>
<view class="xieyi">
<icon type="success" color="green" size="18"></icon>
<text class="agree">同意</text>
<text class="opinion">中国用户注册协议</text>
</view>
</view>
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">下一步</button>
</view>
（mobile.wxss）
/* pages/mobile/mobile.wxss */
.content{
width: 100%;
height: 600px;
background-color: #f2f2f2;
}
.hr{
padding-top: 20px;
}
.numbg{
border: 1px solid #cccccc;
width: 90%;
margin: 0 auto;
background-color: #ffffff;
border-radius: 5px;
display: flex;
flex-direction: row;
height: 50px;
}
.numbg view{
margin-left: 20px;
margin-top: 14px;
}
.xieyi{
margin-top: 15px;
margin-left: 15px;
}
.agree{
font-size: 13px;
margin-left: 5px;
color: #666666;
}
.opinion{
font-size: 13px;
color: #000000;
font-weight: bold;
}
.btn{
width: 90%;
margin-top: 30px;
}
效果：
八、在"pages/mobile/mobile"文件中，添加mobileblur事件，如果输入手机号，下一步按钮变为可用状态：
// pages/mobile/mobile.js
Page({
data: {
disabled: true,
btnstate: "default",
mobile:""
},
mobileblur: function (e) {
var content = e.detail.value;
if(content!=""){
this.setData({ disabled: false, btnstate: "primary", account: content });
}
else{
this.setData({disabled:true,btnstate:"default",mobile:""});
}
}
})
效果图：
Ⅲ、企业用户注册设计
在企业用户注册中，有6个表单项：用户名、密码、企业全称、联系人姓名、手机号和短信验证码。还有一个注册按钮和同意注册协议。
九、在"page/company/company"文件中，进行用户名、密码、企业全称、联系人姓名、手机号、短信验证码表单项布局设计，并添加相应的样式：
（company.wxml）
<!--pages/company/company.wxml-->
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="content">
<view class="hr"></view>
<view class="item">
<input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bingblur="accountblur"/>
</view>
<view class="item flex">
<input type="text" password name="password" placeholder="请设置5-20位登录密码" placeholder-class="holder"/>
<switch type="switch" name="switch"/>
</view>
<view class="item">
<input type="text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder"/>
</view>
<view class="item">
<input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder"/>
</view>
<view class="mobileInfo">
<view class="mobile">
<input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder"/>
</view>
<view class="code">发送验证码</view>
</view>
<view class="item">
<input type="text" name="code" placeholder="短信验证码" placeholder-class="holder"/>
</view>
</view>
</form>
（company.wxss）
/* pages/company/company.wxss */
.content{
width: 100%;
height: 700px;
background-color: #f2f2f2;
}
.hr{
padding-top: 40px;
}
.item{
margin: 0 auto;
border: 1px solid #cccccc;
height: 40px;
width: 90%;
border-radius: 3px;
background-color: #ffffff;
margin-bottom: 15px;
}
.item input{
height: 40px;
line-height: 40px;
margin-left: 10px;
}
.holder{
font-size: 14px;
color: #999999;
}
.flex{
display: flex;
flex-direction: row;
}
.flex input{
width: 300px;
}
item switch{
margin-top: 5px;
margin-right: 5px;
}
.mobileInfo{
display: flex;
flex-direction: row;
}
.mobile{
margin: 0 auto;
border: 1px solid #cccccc;
height: 40px;
width: 50%;
border-radius: 3px;
background-color: #ffffff;
margin-bottom: 15px;
display: flex;
flex-direction: row;
margin-left: 5%;
}
.mobile input{
margin-top: 8px;
margin-left: 10px;
}
.code{
border: 1px solid #cccccc;
height: 40px;
width: 35%;
background-color: #edeeec;
border-radius: 3px;
text-align: center;
margin-left: 10px;
line-height: 40px;
color: #999999;
font-size: 15px;
margin-bottom: 15px;
margin-right: 5%;
}
效果图：
十、在"pages/company/company"文件中，设计注册按钮和同意注册协议，并添加相应的样式：
（company.wxml）
<!--pages/company/company.wxml-->
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="content">
<view class="hr"></view>
<view class="item">
<input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bingblur="accountblur"/>
</view>
<view class="item flex">
<input type="text" password name="password" placeholder="请设置5-20位登录密码" placeholder-class="holder"/>
<switch type="switch" name="switch"/>
</view>
<view class="item">
<input type="text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder"/>
</view>
<view class="item">
<input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder"/>
</view>
<view class="mobileInfo">
<view class="mobile">
<input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder"/>
</view>
<view class="code">发送验证码</view>
</view>
<view class="item">
<input type="text" name="code" placeholder="短信验证码" placeholder-class="holder"/>
</view>
<button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button>
<view class="xieyi">
<text class="agree">注册即视为同意</text><text class="opinion">中国用户注册协议</text>
</view>
</view>
</form>
（company.wxss）
/* pages/company/company.wxss */
.content{
width: 100%;
height: 700px;
background-color: #f2f2f2;
}
.hr{
padding-top: 40px;
}
.item{
margin: 0 auto;
border: 1px solid #cccccc;
height: 40px;
width: 90%;
border-radius: 3px;
background-color: #ffffff;
margin-bottom: 15px;
}
.item input{
height: 40px;
line-height: 40px;
margin-left: 10px;
}
.holder{
font-size: 14px;
color: #999999;
}
.flex{
display: flex;
flex-direction: row;
}
.flex input{
width: 300px;
}
item switch{
margin-top: 5px;
margin-right: 5px;
}
.mobileInfo{
display: flex;
flex-direction: row;
}
.mobile{
margin: 0 auto;
border: 1px solid #cccccc;
height: 40px;
width: 50%;
border-radius: 3px;
background-color: #ffffff;
margin-bottom: 15px;
display: flex;
flex-direction: row;
margin-left: 5%;
}
.mobile input{
margin-top: 8px;
margin-left: 10px;
}
.code{
border: 1px solid #cccccc;
height: 40px;
width: 35%;
background-color: #edeeec;
border-radius: 3px;
text-align: center;
margin-left: 10px;
line-height: 40px;
color: #999999;
font-size: 15px;
margin-bottom: 15px;
margin-right: 5%;
}
.btn{
width: 90%;
color: #999999;
margin-top: 40px;
}
.xieyi{
margin-top: 15px;
margin-left: 15px;
font-size: 13px;
}
.agree{
margin-left: 5px;
color: #666666;
}
.opinion{
color: red;
font-weight: bold;
text-decoration: underline;
}
如下是效果图：
十一、当输入用户名后，注册按钮即变为可用状态，同时将表单内容提交到company.js文件后台里，保存到缓存界面：
// pages/company/company.js
Page({
data: {
disabled: true,
btnstate: "default"
},
accountblur: function (e) {
var content = e.detail.value;
if(content!=""){
this.setData({disabled:false,btnstate:"primary"});
}
else{
this.setData({disabled:true,btnstate:"default"});
}
},
formSubmit: function (e) {
console.log(e);
var user = new Object();
user.account = e.detail.value.loginName;
user.password = e.detail.value.password;
user.company = e.detail.value.company;
user.userName = e.detail.value.userName;
user.code = e.detail.value.code;
user.mobile = e.detail.value.mobile;
user.switch = e.detail.value.switch;
wx.setStorageSync('user',user);
wx.showToast({
title: "注册成功",
icon: "success",
duration: 1000,
success:function(){
wx.navigateTo({
url: '../login/login',
})
}
})
}
})
至此，也就完成了登录注册表单设计，在登陆界面进行登录，可以通过手机快速注册进行手机号注册，也可以通过企业用户注册来注册企业账号。
微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序的更多相关文章
- 如果选择构建ui界面方式，手写代码，xib和StoryBoard间的博弈
代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代 ...
- C#/.NET基于Topshelf创建Windows服务的守护程序作为服务启动的客户端桌面程序不显示UI界面的问题分析和解决方案
本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...
- SpringSecurity实战记录（一）开胃菜：基于内存的表单登录小Demo搭建
Ps:本次搭建基于Maven管理工具的版本,Gradle版本可以通过gradle init --type pom命令在pom.xml路径下转化为Gradle版本(如下图) (1)构建工具IDEA In ...
- C# Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面
个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...
- Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面 z
http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...
- Android逆向破解表单登录程序
Android逆向破解表单登录程序 Android开发 ADT: android studio(as) 程序界面如下,登录成功时弹出通知登录成功,登录失败时弹出通知登录失败. 布局代码 <?xm ...
- 用友时空B/S表单外挂（接口）程序操作说明文档
用友时空B/S表单外挂(接口)程序 一.B/S表单接口需求 众所周知,用友时空KSOA支持B/S架构.且移动商务.在线门店,都是完全基于B/S架构的. B/S架构的优越性在于没有本地客户端和本地数据, ...
- 从微信小程序到鸿蒙js开发【08】——表单组件&注册登录模块
目录: 1.登录模块 2.注册模块 3.系列文章导读 牛年将至,祝大家行行无bug,页页so easy- 在微信小程序中,提供了form组件,可以将input.picker.slider.button ...
- 微信小程序--问题汇总及详解之form表单
附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> ...
随机推荐
- EsClientRHL-elasticsearch java客户端开源工具
EsClientRHL是一个可基于springboot的elasticsearch 客户端调用封装工具,通过elasticsearch官网推荐的RestHighLevelClient实现,内置了es索 ...
- 第二阶段冲刺个人任务——four
今日任务: 优化统计团队博客结果界面的显示. 昨日成果: 优化统计个人博客结果页面的显示.
- 深入学习MySQL 03 Schema与数据类型优化
Schema是什么鬼 schema就是数据库对象的集合,这个集合包含了各种对象如:表.视图.存储过程.索引等.为了区分不同的集合,就需要给不同的集合起不同的名字,默认情况下一个用户对应一个集合,用户的 ...
- 《Sequence Models》课堂笔记
Lesson 5 Sequence Models 这篇文章其实是 Coursera 上吴恩达老师的深度学习专业课程的第五门课程的课程笔记. 参考了其他人的笔记继续归纳的. 符号定义 假如我们想要建立一 ...
- 04--Java--使用eclipse创建开发java项目步骤
eclipse创建开发java步骤 1.三种创建java项目 1)方式一:在包资源管理器(package explorer)窗口中鼠标右击任意位置选择New --> Java Project,如 ...
- CSS-15-定位
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java 添加、读取、删除Excel形状
本文介绍通过java程序在excel中操作形状(图形)的方法,包括: 1. 添加形状(如设置形状类型/位置/大小.形状颜色填充(单色/渐变色/纹理/图片填充).形状显示或隐藏.形状倾斜角度.添加文本到 ...
- SpringBoot分布式篇Ⅷ --- 整合SpringCloud
SpringCloud是一个分布式的整体解决方案.Spring Cloud为开发者提供了在分布式系统(配置管理,服务发现,熔断,路由,微代理,控制总线,一次性token,全局锁,leader选举.分布 ...
- 模块化系列教程 | 阿里JarsLink1.0模块化场景实战Demo
场景实战Demo使用指引 Quickstart 快速开始 Demo说明 模块说明 使用说明 情景一环境部署 工作原理 情景二环境部署 工作原理 场景实战Demo使用指引 个人之前学习过程中对JarsL ...
- DirectX11 With Windows SDK--29 计算着色器：内存模型、线程同步；实现顺序无关透明度(OIT)
前言 由于透明混合在不同的绘制顺序下结果会不同,这就要求绘制前要对物体进行排序,然后再从后往前渲染.但即便是仅渲染一个物体(如上一章的水波),也会出现透明绘制顺序不对的情况,普通的绘制是无法避免的.如 ...