《微信小程序开发》第4章教案1 (2)

第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});

}

}

})

界面效果如图所示。