2023年7月26日发(作者：)
第3章 用微信小程序组件构建UI界面
课程名称
任务名称
项目性质
授课班级
微信小程序开发图解案例教程
表单登录注册微信小程序
□演示性
项目名称
课时
□综合性
用微信小程序组件构建UI界面
2
□验证性 √设计性
授课日期 授课地点
教学目标
制作表单登录注册微信小程序
（1）登录设计
教学内容
（2）手机号注册设计
（3）企业用户注册设计
教学重点
教学难点
登录设计、手机号注册设计、企业用户注册设计
登录设计、手机号注册设计、企业用户注册设计
装有微信小程序的开发工具的电脑
教学准备
教学课件PPT
教材：《微信小程序开发图解案例教程（附精讲视频）（第2版）》
作业设计
1 教学过程
教学环节
课前教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U 盘中的素材位置、打开授课组织
计划、教案等），吸引学生注意力。
【课前说明】
课程说明
回顾微信小程序视图容器组件、基础内容组件、表单组件等知识点，了解表单登录注册微信小程序的应用场景与结构。
【目的】
使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。
3.8沙场大练兵：表单登录注册微信小程序
微信小程序里有丰富的表单组件，通过这些组件的使用，来完成京东登录界面、手机快速注册界面、企业用户注册界面的微信小程序设计，如图所示。
课程内容描述
登录
手机快速注册 企业用户注册
会用到view视图容器组件、button按钮组件、image图片组件、input输入框组件、checkbox多项选择器组件、switch开关选择器组件、navigator页面链接组件等组件的使用，将这些组件进行界面的布局设计来完成表单登录和注册设计。
3.8.2登录设计
在登录表单里，输入账号、密码进行登录，在账号、密码输入框里都有友好的提示信息；登录按钮默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮的下面提供手机快速注册、企业用户注册、找回密码链接；界面最下面是微信、QQ第三方登录方式，如图所示。
2 登录界面
（1）添加一个form项目，填写AppID，只有填写AppID，form微信小程序才能在手机上浏览效果，如图所示。
添加form项目
（2）在文件里添加“pages/login/login” “pages/mobile/mobile”
“pages/company/company”3个文件目录，并删除默认的文件目录以及相应的文件夹，如图所示。
配置
（3）在“pages/login/login”文件里，进行账号密码输入框布局设计，并添加相应的样式，代码
3 如下所示。
style="color:#999999;"/>
style="color:#999999;"/>
.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;
}
界面效果如图所示。
4 输入框布局设计
（4）在“pages/login/login”文件里，进行登录按钮、手机快速注册、企业用户注册、找回密码以及第三方登录布局的设计，并添加相应的样式，代码如下所示。
style="color:#999999;"/>
style="color:#999999;"/>
.content{
margin-top: 40px;
}
.account{
5 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;
}
界面效果如图所示。
6 布局设计
（5）在“pages/login/login”文件中的js文件里添加accountInput、pwdBlur事件函数，当账号里输入内容后，登录按钮变为可用状态，代码如下所示。
Page({
data:{
disabled:true, btnstate:"default",
account:"", password:""
},
accountInput:function(e){
var content = ;
(content); if(content != ''){
a({disabled:false,btnstate:"primary",account:content});
}else{
a({disabled:true,btnstate:"default"});
}
},
pwdBlur:function(e){
var password = ; if(password !=
''){
a({password:password});
}
}
})
界面效果如图所示。
7 登录按钮可用状态
3.8.2手机号注册设计
在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所示。
手机号注册界面
（1）在“pages/mobile/mobile”文件里，进行手机号输入框布局设计，并添加相应的样式，代码如下所示。
.content{
8 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;
}
界面效果如图所示。
手机号输入框
（2）在“pages/mobile/mobile”文件里，设计注册协议和下一步按钮操作，并添加相应的样式，代码如下所示。
9
.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;
}
界面效果如图所示。
10 同意注册协议及下一步按钮
（3）在“pages/mobile/mobile”文件里，添加mobileblur事件，如果输入手机号，下一步按钮变为可用状态，代码如下所示。
Page({
data:{
disabled:true, btnstate:"default",
mobile:""
},
mobileblur:function(e){
var content = ;
if(content !=""){
a({disabled:false,btnstate:"primary",mobile:content});
}else{
a({disabled:true,btnstate:"defalut",mobile:""});
}
}
})
界面效果如图所示。
下一步按钮可用
（3）在文件里，添加“navigationBarTitleText”这个属性，设置导航标题为手机快
11 速注册，如图所示。
导航标题
3.8.3企业用户注册设计
在企业用户注册里，有6个表单项：用户名、密码、企业全称、联系人姓名、手机号和短信验证码。有一个注册按钮和同意注册协议，如图所示。
企业用户注册界面
（1）在“pages/company/company”文件里，进行用户名、密码、企业全称、联系人姓名、手机号、短 信验证码表单项布局设计，并添加相应的样式，代码如下所示。
.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;
}
13 .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: #EFEEEC; border-radius:3px;
text-align: center; margin-left:10px; line-height: 40px; color: #999999; font-size: 15px;
margin-bottom: 15px; margin-right:5%;
}
界面效果如图所示。
14 企业用户注册表单项
（2）在“pages/company/company”文件里，设计注册按钮和同意注册协议，并添加相应的样式，
代码如下所示。
.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%;
16
}
.mobile input{
margin-top:8px; margin-left:10px;
}
.code{
border: 1px solid #cccccc; height: 40px;
width: 35%;
background-color: #EFEEEC; 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;
}
界面效果如图所示。
注册按钮
（3）当输入用户名后，注册按钮变为可用状态，同时将表单内容提交到文件后台里，
17 保存到缓存里面，代码如下所示。
Page({
data:{
disabled:true, btnstate:"default"
},
accountblur:function(e){
var content = ;
if(content !=""){
a({disabled:false,btnstate:"primary"});
}else{
a({disabled:true,btnstate:"default"});
}
},
formSubmit:function(e){ (e);
var user = new Object();
t = ame; rd =
rd; y =
y; me =
me; =
; = ;
= ;
rageSync('user', user); ast({
title:"注册成功", icon:"success",
duration:1000, success:function(){
teTo({ url: '../login/login'
})
}
});
}
})
（4）在文件里，添加“navigationBarTitleText”这个属性，设置导航标题为企业用户注册。
（5）单击工具栏的上传按钮，将项目上传到微信服务器上，然后单击工具栏上的预览按钮，用微信扫描二维码，可以在手机上预览微信小程序。
预览微信小程序
这样就完成了京东登录注册表单微信小程序设计，在登录界面进行登录，可以通过手机快速注册进
18 行手机号注册，也可以通过企业用户注册来注册企业账号。
总结评价
本节课主要通过表单登录注册微信小程序实例强化微信小程序组件的知识点与应用。
19
发布者：admin，转转请注明出处：http://www.yc00.com/news/1690318895a331922.html
评论列表（0条）