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

1、第3章 用微信小程序组件构建 UI界面课程名称微信小程序开发图解案例 教程项目名称用微信小程序组件构建 UI界面任务名称表单登录注册微信小程序课时2项目性质口演示性口验证性，设计性口综合性授课班级授课日期授课地点教学目标制作表单登录注册微信小程序教学内容(1)登录设计(2)手机号注册设计(3)企业用户注册设计教学重点登录设计、手机号注册设计、企业用户注册设计教学难点登录设计、手机号注册设计、企业用户注册设计教学准备装有微信小程序的开发工具的电脑教学课件PPT教材：微信小程序开发图解案例教程(附精讲视频)(第2版)作业设计i教学环节（教学内容、教学方法、组织形式、教学手段）教学过程教学内容与过程

2、20课前做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课组织 计划、教案等），吸引学生注意力。【课前说明】课程说明回顾微信小程序视图容器组件、基础内容组件、表单组件等知识点，了解表单登录注册微信小程序 的应用场景与结构。【目的】使学生从了解本章的学习目标、学习重点、考评方式等方面明确学习本章知识的要求和目标。3.8沙场大练兵：表单登录注册微信小程序微信小程序里有丰富的表单组件，通过这些组件的使用，来完成京东登录界面、手机快速注册界 面、企业用户注册界面的微信小程序设计，如图所示。课程内容描述QQ馁量手机快速注册应且企业用二"登录企业用户注册会用到

3、view视图容器组件、button 选择器组件、switch开关选择器组件、 布局设计来完成表单登录和注册设计。按钮组件、 navigatorimage图片组件、input输入框组件、checkbox多项页面链接组件等组件的使用，将这些组件进行界面的3.8.2登录设计在登录表单里，输入账号、密码进行登录，在账号、 密码输入框里都有友好的提示信息；登录按钮默认是灰色不可用状态，只有输入内容后，才会变为可用状态；在登录按钮的下面提供手机快速注册、企业用户注册、找回密码链接；界面最下面是微信、QQB三方登录方式，如图所示。gNX匾修密码 .i手执胧1在时企业而注出拽回盅码登录界面(1)添加一个for

4、m项目，填写AppID,只有填写AppID, form微信小程序才能在手机上浏览效果, 如图所示。小呈序曲目AC百日目录ApolD ' J '一！。L'tl'添加form项目(2)在 app.json 文件里添力口 “ pages/login/login ""pages/mobile/mobile ”"pages/company/company, 3个文件目录，并删除默认的文件目录以及相应的文件夹，如图所示。app.tjsar! X"1炉昨丁：3 R 际帛屋 5/E.Ogin； login "：4 H PC &#

5、163; 亡IsFCbilt Jpre?-；/：r r Offoak "WinciortsrsfS tec fcjrc uM 的Ie ': “1 i 的 t、J* n= vigst icr E-a"Bac kgrG-jnd _dJ c-r,B,r *tt-Hf10- neviflct ipdBa -TitleTeKt *: "WeOnat.II navljst lcriB*-"TejctSlvie" s ,bhlack'u U app.json 配置(3)在“pages/login/login "文件里，进行账号密码输

6、入框布局设计，并添加相应的样式，代码如下所示。login.wxml<view class="content"><view class="account"><view class="title"> 账号 </view><view class="num"><input bindinput="accountInput" placeholder"用户名 /邮箱 /手机号"placeholder-style="

7、color:#999999;"/></view></view><view class="hr"></view><view class="account"><view class="title"> 密码 </view><view class="num"><input bindblur="pwdBlur" placeholder"请输入密码 "password p

8、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></view>login.wxss.content

9、margin-top: 40px;.account display: flex;flex-direction: row; padding-left: 20px; padding-top: 20px; padding-bottom: 10px; width: 90%;.titlemargin-right: 30px; font-weight: bold;.hrborder: 1px solid #cccccc; opacity: 0.2;width: 90%;margin: 0 auto;.seeposition: absolute; right: 20px;界面效果如图所示。-宁登T研 |.二

10、.;二.!密用 i7输入框布局设计(4)在“ pages/login/login ”文件里，进行登录按钮、手机快速注册、企业用户注册、找回密码 U及第三方登录布局的设计，并添加相应的样式，代码如下所示。login.wxml<view class="content"><view class="account"><view class="title"> 账号 </view><view class="num"><input bindinput="

11、accountInput" placeholder"用户名 /邮箱 / 手机号"placeholder-style="color:#999999;"/></view></view><view class="hr"></view><view class="account"><view class="title"> 密码 </view><view class="num">

12、;<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&

13、gt;<view class="hr"></view><button class="btn" disabled="disabled" type="btnstate" bindtap="login">登录 </button><view class="operate"><view><navigator url="./mobile/mobile"><view><

14、navigator url="./company/company"><view> 找回密码 </view></view><view class="login"><view><image src="/images/wxlogin.png"<view><image src="/images/qqlogin.png"</view></view>手机快速注册 </navigator></vie

15、w>企业用户注册</navigator></view>style="width:70px;height:98px;"></image></view>style="width:70px;height:98px;"></image></view>login.wxss.contentmargin-top: 40px;.accountdisplay: flex;flex-direction: row; padding-left: 20px; padding-top: 20p

16、x; padding-bottom: 10px; width: 90%;.titlemargin-right: 30px; font-weight: bold;.hrborder: 1px solid #cccccc; opacity: 0.2;width: 90%;margin: 0 auto;.seeposition: absolute; right: 20px;.btnwidth: 90%; margin-top:40px; color: #999999;.operate display: flex;flex-direction: row;.operate view margin: 0

17、auto; margin-top:40px; font-size: 14px; color: #333333;.logindisplay: flex;flex-direction: row; margin-top:150px;.login view margin: 0 auto;界面效果如图所示。布局设计(5)在“pages/login/login ”文件中的 js文件里添加 accountinput、pwdBlur事件函数，当账号 里输入内容后，登录按钮变为可用状态，代码如下所示。login.jPage(data: disabled:true, btnstate:"default&

18、quot;, account:"", password:"",accountInput:function(e)var content=e.detail.value;console.log(content); if(content != '')this.setData(disabled:false,btnstate:"primary",account:content);elsethis.setData(disabled:true,btnstate:"default");,pwdBlur:functio

19、n(e)var password=edetail.value; if(password != '')this.setData(password:password); )界面效果如图所示。t- ruin；1机号座U卜工业阳尸(住 出恒乳加白8苜登录按钮可用状态3.8.2手机号注册设计在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所 小。国3打工制切喷3 手机一一二点*1阵通手机号注册界面(1)在“pages/mobile/mobile "文件里，进行手机号输入框布局设计，并添加相应的样式，代码 如下所示。mobile.wxml<

20、view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder"请输入手机号 "maxlength="11" bindblur="mobileblur"/></view></view></view>mobi

21、le.wxss width:100%; height: 600px;background-color: #f2f2f2;.hrpadding-top:20px;.numbgborder: 1px solid #cccccc; width: 90%;margin: 0 auto; background-color:#ffffff; border-radius: 5px; display: flex;flex-direction: row; height: 50px;.numbg viewmargin-left: 20px; margin- top:14px;界面效果如图所示。遢目!£鹏

22、*86下编：手机号手机号输入框(2)在“pages/mobile/mobile ”文件里，设计注册协议和下一步按钮操作，并添加相应的样式, 弋码如下所示。mobile.wxml<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder请输入手机号 "maxlength="11

23、" bindblur="mobileblur"/></view></view><view><view class="xieyi"><icon type="success" color="red" size="18"></icon><text class="agree"> 同意 </text><text class="opinion">

24、 京东用户注册协议 </text></view></view><button class="btn" disabled="disabled" type="btnstate" bindtap="login">下一步 </button></view>mobile.wxss.contentwidth:100%; height: 600px;background-color: #f2f2f2;.hrpadding-top:20px;.numbgbord

25、er: 1px solid #cccccc; width: 90%;margin: 0 auto; background-color: #ffffff; border-radius: 5px; display: flex;flex-direction: row; height: 50px;.numbg viewmargin-left: 20px; margin-top:14px;.xieyimargin-top:15px; margin-left:15px;.agreefont-size: 13px; margin-left: 5px; color: #666666;.opinionfont-

26、size: 13px; color:#000000; font-weight: bold;.btnwidth:90%; margin- top:30px;界面效果如图所示。 在"pages/mobile/mobile 为可用状态，代码如下所示。同意注册协议及下一步按钮文件里，添加 mobileblur事件，如果输入手机号，下一步按钮变mobile.jsPage(data: disabled:true, btnstate:"default", mobile:"",mobileblur:function(e)var content =e.detai

27、l.value;if(content !="")this.setData(disabled:false,btnstate:"primary",mobile:content); elsethis.setData(disabled:true,btnstate:"defalut",mobile:"");)界面效果如图所示。、肥一步按钮可用”这个属性，设置导航标题为手机快(3)在 mobile.json文件里，添力口 “ navigationBarTitleText速注册，如图所示。医巨手匚中电工

28、王*06 it If. 三 ，瓶 HFfiJ导航标题3.8.3企业用户注册设计在企业用户注册里，有 6个表单项：用户名、密码、企业全称、联系人姓名、手机号和短信验证 吗。有一个注册按钮和同意注册协议，如图所示。 _n jt-Tiifinicei I- _ * * H *! J H p. m -i-TlI = I l号IS司理为g W 弧Ffiftl企业用户注册界面(1)在“pages/company/compan，文件里，进行用户名、密码、企业全称、联系人姓名、手机 号、短信验证码表单项布局设计，并添加相应的样式，代码如下所示。company.wxmlvform bindsubmit=&quo

29、t;formSubmit" bindreset="formReset"><view class="content"><view class="hr"></view><view class="item">input type="text" name="loginName" placeholder'请设置 4-20 位用户名"placeholder-class="holder")

30、indblur="accountblur"/></view><view class="item flex"><input type="text" password name="password" placeholder="请设置 6-20 位登录密码 "placeholder- class="holder"/><switch type="switch" name="switch"/>

31、</view><view class="item"><input type="text" name="company" placeholder'请填写工商局注册名称 "placeholder-class="holder" /></view><view class="item">input type="text" name="userName" placeholder"联

32、系人姓名 "placeholder-class="holder" /></view><view class="mobileInfo"><view class="mobile">input type="text" name="mobile" placeholder="请输入手机号 "placeholder-class="holder" /></view><view class=&qu

33、ot;code"> 发送验证码 </view></view><view class="item">input type="text" name="code" placeholder="短信验证码 "placeholder-class="holder" /></view></view></form> company.wxss.contentwidth: 100%; height: 700px;backgr

34、ound-color: #f2f2f2;.hrpadding-top:40px;.itemmargin: 0 auto;border: 1px solid #cccccc; height: 40px;width: 90%;border-radius: 3px; background-color: #ffffff; margin-bottom:15px;.item inputheight: 40px;line-height: 40px; margin-left: 10px;.holderfont-size: 14px; color: #999999;.flexdisplay: flex;flex

35、-direction: row;.flex inputwidth:300px;.item switchmargin-top: 5px; margin-right:5px;.mobileInfodisplay: flex;flex-direction: row;.mobilemargin: 0 auto;border: 1px solid #cccccc; height: 40px;width: 50%;border-radius: 3px; background-color: #ffffff; margin-bottom:15px; display:flex;flex-direction: r

36、ow; margin-left:5%;.mobile inputmargin-top:8px; margin-left:10px;.codeborder: 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%;界面效果如图所

37、示。企业用户注册表单项(2)在“pages/company/compan，文件里，设计注册按钮和同意注册协议，并添加相应的样式, 弋码如下所示。company.wxmlvform bindsubmit="formSubmit" bindreset="formReset"><view class="content"><view class="hr"></view><view class="item">input type="text&

38、quot; name="loginName" placeholder”请设置 4-20位用户名"placeholder-class="holder" bindblur="accountblur"/></view>view class="item flex”>input type="text" password name="password" placeholder”请设置 6-20位登录密码 "placeholder-class="

39、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”

40、placeholder”联系人姓名 ” placeholder-class="holder” /></view><view class="mobileInfo”><view class="mobile”>input type="text” name="mobile” placeholder="请输入手机号 ” placeholder-class="holder” /></view><view class="code”> 发送验证码 </v

41、iew></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=&qu

42、ot;xieyi”><text class="agree”> 注册即视为同意/text>text class="opinion”> 京东用户注册协议 </text></view></view></form>.contentwidth: 100%; height: 700px;background-color: #f2f2f2;.hrpadding-top:40px;.itemmargin: 0 auto;border: 1px solid #cccccc; height: 40px;width:

43、90%;border-radius: 3px; background-color: #ffffff; margin-bottom:15px;.item inputheight: 40px;line-height: 40px; margin-left: 10px;.holderfont-size: 14px; color: #999999;.flexdisplay: flex;flex-direction: row;.flex inputwidth:300px;.item switchmargin-top: 5px; margin-right:5px;.mobileInfodisplay: fl

44、ex;flex-direction: row;.mobilemargin: 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 inputmargin-top:8px; margin-left:10px;.codeborder: 1px solid #cccccc; height: 40px;width: 35%;back