微信小程序组件构建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/> ...
随机推荐
- Jenkins配置安装
一.安装 [root@localhost ~]# wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins.io/redhat-stable/j ...
- ps入门
目标:把运动截图的日期改掉.一次运动,天天装逼! 1 左上角 文件 -> 打开 选中要P的图片 2 CRTL 和 +号 放大 3 摁住空格键就可以用鼠标拖动图片(把要P的部分放到中间) ...
- JZOJ4238 纪念碑
Description 2034年,纪念中学决定修建校庆100周年纪念碑,作为杰出校友的你被找了过来,帮校方确定纪念碑的选址. 纪念中学的土地可以看作是一个长为n,宽为m的矩形.它由n* m个1*1的 ...
- BZOJ 3691 游行
题目传送门 分析: 没被访问的点要C费用,跑一次路要C费用 把这两个统一一下试试... 那就是每次不标记起点或者终点 那就是路径覆盖了2333 二分图,x 部 i 号点与 y 部 j 号点连 i 到 ...
- .net core之编辑json配置文件
.net core之编辑json配置文件 引言 最近在具体项目开发应用中,项目采用的json格式配置文件,配置文件的加载采用的IConfiguration接口对象进行的管理,这是.net standa ...
- widows 10 下解决在npm install python 环境报错的问题
1.使用管理员打开cmd 2.安装 node-gyp; gyp是一种根据c++源代码编译的工具,node-gyp就是为node编译c++扩展的时候使用的编译工具. npm install -g nod ...
- php--->依赖注入（DI）实现控制反转（IOC）
依赖注入(DI)实现控制反转(IOC) DI和IOC概念理解 当一个类的实例需要另一个类的实例协助时,在传统的程序设计过程中,通常由调用者来创建被调用者的实例.而采用依赖注入的方式,创建被调用者的工作 ...
- try catch finally的理解
定义以及用法: try/catch/finally 语句用于处理代码中可能出现的错误信息. 错误可能是语法错误,通常是程序员造成的编码错误或错别字.也可能是拼写错误或语言中缺少的功能(可能由于浏览器差 ...
- es学习(三)：分词器介绍以及中文分词器ik的安装与使用
什么是分词 把文本转换为一个个的单词,分词称之为analysis.es默认只对英文语句做分词,中文不支持,每个中文字都会被拆分为独立的个体. 示例 POST http://192.168.247.8: ...
- 深入理解计算机系统大作业——程序人生P2P
程序人生P2P 前言 经过一个学期的快乐学习(折磨),计算机系统终于结课了,自认为对于计算机系统算是有了粗浅的理解.为了庆祝结课,顺带总结自己的学习经历(只是为了完成大作业),便通过一个简单的程序he ...