当前位置:文档之家› 《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面2

《微信小程序开发图解案例教程》教学教案—第3章教案用微信小程序组件构建UI界面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<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 c lass="num"><input b indblur="pwdBlur" p laceholder="请输入密码" password p laceholder- style="color:#999999;"/></view><view class="see"><image src="/images/see.jpg" style="width:42px;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.png" s tyle="width:70px;height:98px;"></image></view><view><image src="/images/qqlogin.png" s tyle="width:70px;height:98px;"></image></view></view></view>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<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur"/></view> </view></view>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<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder="请输入手机号" maxlength="11" bindblur="mobileblur"/></view></view><view><view class="xieyi"><icon type="success" color="red" size="18"></icon><text class="agree">同意</text><text class="opinion">京东用户注册协议</text></view>同意注册协议及下一步按钮(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:""});}}})界面效果如图所示。

相关主题