《微信小程序開發(fā)》第4章教案1(2)

1、第3章 用微信小程序組件構(gòu)建 UI界面課程名稱微信小程序開發(fā)圖解案例 教程項目名稱用微信小程序組件構(gòu)建 UI界面任務(wù)名稱表單登錄注冊微信小程序課時2項目性質(zhì)口演示性口驗證性，設(shè)計性口綜合性授課班級授課日期授課地點(diǎn)教學(xué)目標(biāo)制作表單登錄注冊微信小程序教學(xué)內(nèi)容(1)登錄設(shè)計(2)手機(jī)號注冊設(shè)計(3)企業(yè)用戶注冊設(shè)計教學(xué)重點(diǎn)登錄設(shè)計、手機(jī)號注冊設(shè)計、企業(yè)用戶注冊設(shè)計教學(xué)難點(diǎn)登錄設(shè)計、手機(jī)號注冊設(shè)計、企業(yè)用戶注冊設(shè)計教學(xué)準(zhǔn)備裝有微信小程序的開發(fā)工具的電腦教學(xué)課件PPT教材：微信小程序開發(fā)圖解案例教程(附精講視頻)(第2版)作業(yè)設(shè)計i教學(xué)環(huán)節(jié)（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）教學(xué)過程教學(xué)內(nèi)容與過程

2、20課前做好上課前的各項準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課組織 計劃、教案等），吸引學(xué)生注意力?！菊n前說明】課程說明回顧微信小程序視圖容器組件、基礎(chǔ)內(nèi)容組件、表單組件等知識點(diǎn)，了解表單登錄注冊微信小程序 的應(yīng)用場景與結(jié)構(gòu)?！灸康摹渴箤W(xué)生從了解本章的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評方式等方面明確學(xué)習(xí)本章知識的要求和目標(biāo)。3.8沙場大練兵：表單登錄注冊微信小程序微信小程序里有豐富的表單組件，通過這些組件的使用，來完成京東登錄界面、手機(jī)快速注冊界 面、企業(yè)用戶注冊界面的微信小程序設(shè)計，如圖所示。課程內(nèi)容描述QQ餒量手機(jī)快速注冊應(yīng)且企業(yè)用二"登錄企業(yè)用戶注冊會用到

3、view視圖容器組件、button 選擇器組件、switch開關(guān)選擇器組件、 布局設(shè)計來完成表單登錄和注冊設(shè)計。按鈕組件、 navigatorimage圖片組件、input輸入框組件、checkbox多項頁面鏈接組件等組件的使用，將這些組件進(jìn)行界面的3.8.2登錄設(shè)計在登錄表單里，輸入賬號、密碼進(jìn)行登錄，在賬號、 密碼輸入框里都有友好的提示信息；登錄按鈕默認(rèn)是灰色不可用狀態(tài)，只有輸入內(nèi)容后，才會變?yōu)榭捎脿顟B(tài)；在登錄按鈕的下面提供手機(jī)快速注冊、企業(yè)用戶注冊、找回密碼鏈接；界面最下面是微信、QQB三方登錄方式，如圖所示。gNX匾修密碼 .i手執(zhí)朧1在時企業(yè)而注出拽回盅碼登錄界面(1)添加一個for

4、m項目，填寫AppID,只有填寫AppID, form微信小程序才能在手機(jī)上瀏覽效果, 如圖所示。小呈序曲目AC百日目錄ApolD ' J '一！。L'tl'添加form項目(2)在 app.json 文件里添力口 “ pages/login/login ""pages/mobile/mobile ”"pages/company/company, 3個文件目錄，并刪除默認(rèn)的文件目錄以及相應(yīng)的文件夾，如圖所示。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 "文件里，進(jìn)行賬號密碼輸

6、入框布局設(shè)計，并添加相應(yīng)的樣式，代碼如下所示。login.wxml<view class="content"><view class="account"><view class="title"> 賬號 </view><view class="num"><input bindinput="accountInput" placeholder"用戶名 /郵箱 /手機(jī)號"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輸入框布局設(shè)計(4)在“ pages/login/login ”文件里，進(jìn)行登錄按鈕、手機(jī)快速注冊、企業(yè)用戶注冊、找回密碼 U及第三方登錄布局的設(shè)計，并添加相應(yīng)的樣式，代碼如下所示。login.wxml<view class="content"><view class="account"><view class="title"> 賬號 </view><view class="num"><input bindinput="

11、accountInput" placeholder"用戶名 /郵箱 / 手機(jī)號"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>手機(jī)快速注冊 </navigator></vie

15、w>企業(yè)用戶注冊</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;界面效果如圖所示。布局設(shè)計(5)在“pages/login/login ”文件中的 js文件里添加 accountinput、pwdBlur事件函數(shù)，當(dāng)賬號 里輸入內(nèi)容后，登錄按鈕變?yōu)榭捎脿顟B(tài)，代碼如下所示。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機(jī)號座U卜工業(yè)陽尸(住 出恒乳加白8苜登錄按鈕可用狀態(tài)3.8.2手機(jī)號注冊設(shè)計在手機(jī)號注冊里，需要設(shè)計輸入框用來輸入手機(jī)號，設(shè)計同意注冊協(xié)議以及下一步按鈕，如圖所 小。國3打工制切噴3 手機(jī)一一二點(diǎn)*1陣通手機(jī)號注冊界面(1)在“pages/mobile/mobile "文件里，進(jìn)行手機(jī)號輸入框布局設(shè)計，并添加相應(yīng)的樣式，代碼 如下所示。mobile.wxml<

20、view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder"請輸入手機(jī)號 "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下編：手機(jī)號手機(jī)號輸入框(2)在“pages/mobile/mobile ”文件里，設(shè)計注冊協(xié)議和下一步按鈕操作，并添加相應(yīng)的樣式, 弋碼如下所示。mobile.wxml<view class="content"><view class="hr"></view><view class="numbg"><view>+86</view><view><input placeholder請輸入手機(jī)號 "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、 京東用戶注冊協(xié)議 </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 為可用狀態(tài)，代碼如下所示。同意注冊協(xié)議及下一步按鈕文件里，添加 mobileblur事件，如果輸入手機(jī)號，下一步按鈕變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:"");)界面效果如圖所示。、肥一步按鈕可用”這個屬性，設(shè)置導(dǎo)航標(biāo)題為手機(jī)快(3)在 mobile.json文件里，添力口 “ navigationBarTitleText速注冊，如圖所示。醫(yī)巨手匚中電工

28、王*06 it If. 三 ，瓶 HFfiJ導(dǎo)航標(biāo)題3.8.3企業(yè)用戶注冊設(shè)計在企業(yè)用戶注冊里，有 6個表單項：用戶名、密碼、企業(yè)全稱、聯(lián)系人姓名、手機(jī)號和短信驗證 嗎。有一個注冊按鈕和同意注冊協(xié)議，如圖所示。 _n jt-Tiifinicei I- _ * * H *! J H p. m -i-TlI = I l號IS司理為g W 弧Ffiftl企業(yè)用戶注冊界面(1)在“pages/company/compan，文件里，進(jìn)行用戶名、密碼、企業(yè)全稱、聯(lián)系人姓名、手機(jī) 號、短信驗證碼表單項布局設(shè)計，并添加相應(yīng)的樣式，代碼如下所示。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'請設(shè)置 4-20 位用戶名"placeholder-class="holder")

30、indblur="accountblur"/></view><view class="item flex"><input type="text" password name="password" placeholder="請設(shè)置 6-20 位登錄密碼 "placeholder- class="holder"/><switch type="switch" name="switch"/>

31、</view><view class="item"><input type="text" name="company" placeholder'請?zhí)顚懝ど叹肿悦Q "placeholder-class="holder" /></view><view class="item">input type="text" name="userName" placeholder"聯(lián)

32、系人姓名 "placeholder-class="holder" /></view><view class="mobileInfo"><view class="mobile">input type="text" name="mobile" placeholder="請輸入手機(jī)號 "placeholder-class="holder" /></view><view class=&qu

33、ot;code"> 發(fā)送驗證碼 </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、示。企業(yè)用戶注冊表單項(2)在“pages/company/compan，文件里，設(shè)計注冊按鈕和同意注冊協(xié)議，并添加相應(yīng)的樣式, 弋碼如下所示。company.wxmlvform bindsubmit="formSubmit" bindreset="formReset"><view class="content"><view class="hr"></view><view class="item">input type="text&

38、quot; name="loginName" placeholder”請設(shè)置 4-20位用戶名"placeholder-class="holder" bindblur="accountblur"/></view>view class="item flex”>input type="text" password name="password" placeholder”請設(shè)置 6-20位登錄密碼 "placeholder-class="

39、holder”/>switch type="switch” name="switch”/></view><view class="item”>/><input type="text” name="company” placeholder” 請?zhí)顚懝ど叹肿悦Q ” placeholder-class="holder”</view><view class="item”>input type="text” name="userName”

40、placeholder”聯(lián)系人姓名 ” placeholder-class="holder” /></view><view class="mobileInfo”><view class="mobile”>input type="text” name="mobile” placeholder="請輸入手機(jī)號 ” placeholder-class="holder” /></view><view class="code”> 發(fā)送驗證碼 </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”> 京東用戶注冊協(xié)議 </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