微信小程序开发教案1

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

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

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

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

5、ciortsrsfStecfcjrcuM的Ie':“1i的t、J*n=vigsticrE-a"BackgrG-jnd_dJc-r,B,r*tt-Hf10-neviflctipdBa-TitleTeKt*:"WeOnat.IInavljstlcriB*-"TejctSlvie"s,bhlack'uUapp.json配置(3)在“pages/login/login"文件里，进行账号密码输入框布局设计，并添加相应的样式，代码如下所示。login.wxml<viewclass="content"><

6、viewclass="account"><viewclass="title">账号</view><viewclass="num"><inputbindinput="accountInput"placeholder="用户名/邮箱/手机号"placeholder-style="color:#999999;"/></view></view><viewclass="hr">

7、</view><viewclass="account"><viewclass="title">密码</view><viewclass="num"><inputbindblur="pwdBlur"placeholder="请输入密码"passwordplaceholder-style="color:#999999;"/></view><viewclass="see"&g

8、t;<imagesrc="/images/see.jpg"style="width:42px;height:30px;"></image></view></view><viewclass="hr"></view></view>login.wxss.contentmargin-top:40px;).accountdisplay:flex;flex-direction:row;padding-left:20px;padding-top:20px;paddi

9、ng-bottom:10px;width:90%;).titlemargin-right:30px;font-weight:bold;).hrborder:1pxsolid#cccccc;opacity:0.2;width:90%;margin:0auto;).seeposition:absolute;right:20px;)界面效果如图所示。-宁登T研|.二.;二.!密用i7输入框布局设计(4)在“pages/login/login”文件里，进行登录按钮、手机快速注册、企业用户注册、找回密码U及第三方登录布局的设计，并添加相应的样式，代码如下所示。login.wxml<viewclas

10、s="content"><viewclass="account"><viewclass="title">账号</view><viewclass="num"><inputbindinput="accountInput"placeholder"用户名/邮箱/手机号"placeholder-style="color:#999999;"/></view></view><

11、viewclass="hr"></view><viewclass="account"><viewclass="title">密码</view><viewclass="num"><inputbindblur="pwdBlur"placeholder="请输入密码"passwordplaceholder-style="color:#999999;"/></view><

12、;viewclass="see"><imagesrc="/images/see.jpg"style="width:42px;height:30px;"></image></view></view><viewclass="hr"></view><buttonclass="btn"disabled="disabled"type="btnstate"bindtap="l

13、ogin">登录</button><viewclass="operate"><view><navigatorurl="./mobile/mobile"><view><navigatorurl="./company/company"><view>找回密码</view></view><viewclass="login"><view><imagesrc="/i

14、mages/wxlogin.png"<view><imagesrc="/images/qqlogin.png"</view></view>手机快速注册</navigator></view>企业用户注册</navigator></view>style="width:70px;height:98px;"></image></view>style="width:70px;height:98px;"><

15、/image></view>login.wxss.contentmargin-top:40px;.accountdisplay:flex;flex-direction:row;padding-left:20px;padding-top:20px;padding-bottom:10px;width:90%;).titlemargin-right:30px;font-weight:bold;).hrborder:1pxsolid#cccccc;opacity:0.2;width:90%;margin:0auto;).seeposition:absolute;right:20px;

16、).btnwidth:90%;margin-top:40px;color:#999999;).operatedisplay:flex;flex-direction:row;).operateviewmargin:0auto;margin-top:40px;font-size:14px;color:#333333;).logindisplay:flex;flex-direction:row;margin-top:150px;).loginviewmargin:0auto;)界面效果如图所示。布局设计(5)在“pages/login/login”文件中的js文件里添加accountinput、pw

17、dBlur事件函数，当账号里输入内容后，登录按钮变为可用状态，代码如下所示。login.jPage(data:disabled:true,btnstate:"default",account:"",password:"",accountinput:function(e)varcontent=e.detail.value;console.log(content);if(content!='')this.setData(disabled:false,btnstate:"primary",account:

18、content);elsethis.setData(disabled:true,btnstate:"default");,pwdBlur:function(e)varpassword=edetail.value;if(password!='')this.setData(password:password);)界面效果如图所示。示。3.8.2手机号注册设计登录按钮可用状态在手机号注册里，需要设计输入框用来输入手机号，设计同意注册协议以及下一步按钮，如图所r=-手机号注册界面”文件里，进行手机号输入框布局设计，并添加相应的样式，代码(1)在“pages/mobi

19、le/mobile如下所示。mobile.wxml<viewclass="content"><viewclass="hr"></view><viewclass="numbg"><view>+86</view><view><inputplaceholder"请输入手机号"maxlength="11"bindblur="mobileblur"/></view></vi

20、ew></view>mobile.wxsscontentwidth:100%;height:600px;background-color:#f2f2f2;).hrpadding-top:20px;).numbgborder:1pxsolid#cccccc;width:90%;margin:0auto;background-color:#ffffff;border-radius:5px;display:flex;flex-direction:row;height:50px;).numbgviewmargin-left:20px;margin-top:14px;)界面效果如图所示

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

22、th="11"bindblur="mobileblur"/></view></view><view><viewclass="xieyi"><icontype="success"color="red"size="18"></icon><textclass="agree">同意</text><textclass="opinion"&g

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

24、lid#cccccc;width:90%;margin:0auto;background-color:#ffffff;border-radius:5px;display:flex;flex-direction:row;height:50px;.numbgviewmargin-left:20px;margin-top:14px;.xieyimargin-top:15px;margin-left:15px;.agreefont-size:13px;margin-left:5px;color:#666666;.opinionfont-size:13px;color:#000000;font-weig

25、ht:bold;.btnwidth:90%;margin-top:30px;界面效果如图所示。10在"pages/mobile/mobile为可用状态，代码如下所示。同意注册协议及下一步按钮文件里，添加mobileblur事件，如果输入手机号，下一步按钮变mobile.jsPage(data:disabled:true,btnstate:"default",mobile:"",mobileblur:function(e)varcontent=e.detail.value;if(content!="")this.setData

26、(disabled:false,btnstate:"primary",mobile:content);elsethis.setData(disabled:true,btnstate:"defalut",mobile:"");)界面效果如图所示。、一步按钮可用”这个属性，设置导航标题为手机快(3)在mobile.json文件里，添力口“navigationBarTitleText11速注册，如图所示。医巨手匚中电工王*06itIf.三，瓶HFfiJ导航标题3.8.3企业用户注册设计在企业用户注册里，有6个表单项

27、：用户名、密码、企业全称、联系人姓名、手机号和短信验证吗。有一个注册按钮和同意注册协议，如图所示。EH"FljifrliCEJ,PIp,nj"»luoIl号IS司理为gW弧Ffiftl企业用户注册界面(1)在“pages/company/compan，文件里，进行用户名、密码、企业全称、联系人姓名、手机号、短信验证码表单项布局设计，并添加相应的样式，代码如下所示。company.wxml<formbindsubmit="formSubmit"bindreset="formReset"><viewclass=

28、"content"><viewclass="hr"></view><viewclass="item"><inputtype="text"name="loginName"placeholder="请设置4-20位用户名"placeholder-class="holder")indblur="accountblur"/></view>12<viewclass="

29、;itemflex"><inputtype="text"passwordname="password"placeholder="请设置6-20位登录密码"placeholder-class="holder"/><swltchtype="switch"name="switch"/></view><viewclass="item"><inputtype="text"nam

30、e="company"placeholder="请填写工商局注册名称"placeholder-class="holder"/></view><viewclass="item"><inputtype="text"name="userName"placeholder="联系人姓名"placeholder-class="holder"/></view><viewclass="

31、;mobileInfo"><viewclass="mobile"><inputtype="text"name="mobile"placeholder="请输入手机号"placeholder-class="holder"/></view><viewclass="code">发送验证码</view></view><viewclass="item"><inp

32、uttype="text"name="code"placeholder="短信验证码"placeholder-class="holder"/></view></view></form>company.wxss.contentwidth:100%;height:700px;background-color:#f2f2f2;.hrpadding-top:40px;.itemmargin:0auto;border:1pxsolid#cccccc;height:40px;width

33、:90%;border-radius:3px;background-color:#ffffff;margin-bottom:15px;.iteminputheight:40px;line-height:40px;margin-left:10px;.holderfont-size:14px;color:#999999;13.flexdisplay:flex;flex-direction:row;).flexinputwidth:300px;).itemswitchmargin-top:5px;margin-right:5px;).mobileInfodisplay:flex;flex-direc

34、tion:row;).mobilemargin:0auto;border:1pxsolid#cccccc;height:40px;width:50%;border-radius:3px;background-color:#ffffff;margin-bottom:15px;display:flex;flex-direction:row;margin-left:5%;).mobileinputmargin-top:8px;margin-left:10px;).codeborder:1pxsolid#cccccc;height:40px;width:35%;background-color:#EF

35、EEEC;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/compan，文件里，设计注册按钮和同意注册协议，并添加相应的样式,弋码如下所示。company.wxml<formbindsubmit="formSubmit"bindreset="formReset&q

36、uot;><viewclass="content"><viewclass="hr"></view><viewclass="item"><inputtype="text"name="loginName"placeholder="请设置4-20位用户名"placeholder-class="holder"bindblur="accountblur"/></view>

37、;<viewclass="itemflex"><inputtype="text"passwordname="password"placeholder="请设置6-20位登录密码"placeholder-class="holder"/><switchtype="switch"name="switch"/></view><viewclass="item">/><inpu

38、ttype="text"name="company"placeholder="请填写工商局注册名称"placeholder-class="holder"</view><viewclass="item"><inputtype="text"name="userName"placeholder="联系人姓名"placeholder-class="holder"/></view>

39、;<viewclass="mobileInfo"><viewclass="mobile"><inputtype="text"name="mobile"placeholder="请输入手机号"placeholder-class="holder"/></view><viewclass="code">发送验证码</view></view><viewclass="i

40、tem"><inputtype="text"name="code"placeholder="短信验证码"placeholder-class="holder"/></view><buttonclass="btn"disabled="disabled"type="btnstate"form-type="submit">注册</button><viewclass="

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

42、width:90%;border-radius:3px;background-color:#ffffff;margin-bottom:15px;.iteminputheight:40px;line-height:40px;margin-left:10px;.holderfont-size:14px;color:#999999;.flexdisplay:flex;flex-direction:row;.flexinputwidth:300px;.itemswitchmargin-top:5px;margin-right:5px;.mobileInfodisplay:flex;flex-direction:row;.mobilemargin:0auto;border:1pxsolid#cccccc;height:40px;width:50%;border-radius:3px;background-color:#ffffff;margin-bottom:15px;display:flex;flex-direction:row;margin-left:5%;16).mobileinputmargin-top:8px;margin-left:10px;).codeborder: