第3章用微信小程序组件构建UI界面
教学过程
3.8沙场大练兵:表单登录注册微信小程序
微信小程序里有丰富的表单组件,通过这些组件的使用,来完成京东登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计,如图所示。
登录手机快速注册企业用户注册
会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择器组件、navigator页面链接组件等组件的使用,将这些组件进行界面的布局设计来完成表单登录和注册设计。
3.8.2登录设计
在登录表单里,输入账号、密码进行登录,在账号、密码输入框里都有友好的提示信息;登录按钮默认是灰色不可用状态,只有输入内容后,才会变为可用状态;在登录按钮的下面提供手机快速注册、企业用户注册、找回密码链接;界面最下面是微信、QQ第三方登录方式,如图所示。
登录界面
(1)添加一个form项目,填写AppID,只有填写AppID,form微信小程序才能在手机上浏览效果,如图所示。
添加form项目
(2)在app.json文件里添加“pages/login/login”“pages/mobile/mobile”
“pages/company/company”3个文件目录,并删除默认的文件目录以及相应的文件夹,如图所示。
app.json配置
(3)在“pages/login/login”文件里,进行账号密码输入框布局设计,并添加相应的样式,代码
输入框布局设计
(4)在“pages/login/login”文件里,进行登录按钮、手机快速注册、企业用户注册、找回密码以及第三方登录布局的设计,并添加相应的样式,代码如下所示。
login.wxml
login.wxss
.content{
margin-top: 40px;
}
.account{
布局设计
(5)在“pages/login/login”文件中的js文件里添加accountInput、pwdBlur事件函数,当账号里输入内容后,登录按钮变为可用状态,代码如下所示。
login.js Page({
data:{
disabled:true, btnstate:"default",
account:"", password:""
},
accountInput:function(e){
var c ontent =e.detail.value;
console.log(content); if(content != ''){
this.setData({disabled:false,btnstate:"primary",account:content});
}else{
this.setData({disabled:true,btnstate:"default"});
}
},
pwdBlur:function(e){
var p assword =e.detail.value; if(password !=
''){
this.setData({password:password});
}
}
})
界面效果如图所示。
登录按钮可用状态
3.8.2手机号注册设计
在手机号注册里,需要设计输入框用来输入手机号,设计同意注册协议以及下一步按钮,如图所示。
手机号注册界面
(1)在“pages/mobile/mobile”文件里,进行手机号输入框布局设计,并添加相应的样式,代码如下所示。
mobile.wxml
mobile.wxss
.content{
width:100%; height: 600px;
background-color: #f2f2f2;
}
.hr{
padding-top:20px;
}
.numbg{
border: 1px s olid #cccccc; width: 90%;
margin: 0 auto; background-color:
#ffffff; border-radius: 5px; display: f lex;
flex-direction: row; height: 50px;
}
.numbg view{
margin-left: 20px; margin-
top:14px;
}
界面效果如图所示。
手机号输入框
(2)在“pages/mobile/mobile”文件里,设计注册协议和下一步按钮操作,并添加相应的样式,代码如下所示。
mobile.wxml
同意注册协议及下一步按钮
(3)在“pages/mobile/mobile”文件里,添加mobileblur事件,如果输入手机号,下一步按钮变为可用状态,代码如下所示。
mobile.js Page({
data:{
disabled:true, btnstate:"default",
mobile:""
},
mobileblur:function(e){
var c ontent =e.detail.value;
if(content !=""){
this.setData({disabled:false,btnstate:"primary",mobile:content});
}else{
this.setData({disabled:true,btnstate:"defalut",mobile:""});
}
}
})
界面效果如图所示。
下一步按钮可用
(3)在mobile.json文件里,添加“navigationBarTitleText”这个属性,设置导航标题为手机快
速注册,如图所示。
导航标题
3.8.3企业用户注册设计
在企业用户注册里,有6个表单项:用户名、密码、企业全称、联系人姓名、手机号和短信验证码。有一个注册按钮和同意注册协议,如图所示。
企业用户注册界面
(1)在“pages/company/company”文件里,进行用户名、密码、企业全称、联系人姓名、手机号、短信验证码表单项布局设计,并添加相应的样式,代码如下所示。
company.wxml