通过微信小程序中丰富的表单组件来完成登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计。
将会用到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',
})
}
})
}
})
至此，也就完成了登录注册表单设计，在登陆界面进行登录，可以通过手机快速注册进行手机号注册，也可以通过企业用户注册来注册企业账号。