Web前端應(yīng)用開(kāi)發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)3　制作個(gè)人資料頁(yè)

任務(wù)3制作個(gè)人資料頁(yè)Web前端應(yīng)用開(kāi)發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS013.5任務(wù)實(shí)施3.7學(xué)習(xí)自評(píng)Part13.1任務(wù)描述3.2任務(wù)效果3.4知識(shí)儲(chǔ)備3.8課后練習(xí)3.9任務(wù)拓展3.3學(xué)習(xí)目標(biāo)3.6任務(wù)測(cè)試

本任務(wù)將制作“啟嘉校園”項(xiàng)目的個(gè)人資料頁(yè)面，該頁(yè)面主要用于修改用戶(hù)基本信息，包括用戶(hù)的頭像、昵稱(chēng)、個(gè)性簽名、性別、手機(jī)號(hào)和微信號(hào)。

3.1任務(wù)描述

3.2任務(wù)效果個(gè)人資料頁(yè)效果圖

3.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過(guò)學(xué)習(xí)使用正則表達(dá)式完成手機(jī)號(hào)、微信號(hào)等信息的驗(yàn)證的方法，培養(yǎng)學(xué)習(xí)者發(fā)現(xiàn)問(wèn)題、分析問(wèn)題、解決問(wèn)題的能力。通過(guò)實(shí)現(xiàn)“用戶(hù)擴(kuò)展資料區(qū)域”中用戶(hù)信息顯示的功能，強(qiáng)化學(xué)習(xí)者個(gè)人信息保護(hù)意識(shí)。通過(guò)鞏固拓展的練習(xí)，培養(yǎng)學(xué)習(xí)者腳踏實(shí)地、躬身力行的實(shí)踐精神。掌握uni-apppicker滾動(dòng)選擇器組件的使用。掌握uni-appinput單行輸入框組件的使用。掌握uni-appimage圖片組件的使用。掌握uni.showToast消息提示方法的使用。掌握uni-app頁(yè)面跳轉(zhuǎn)方法的使用。掌握正則表達(dá)式的使用。能夠使用picker組件完成滾動(dòng)選擇性別。能夠使用input組件完成內(nèi)容的輸入。能夠使用image組件完成圖像的展示及縮放、裁剪等操作。能夠使用uni.showToast方法完成消息提示。能夠使用uni-app頁(yè)面跳轉(zhuǎn)方法實(shí)現(xiàn)頁(yè)面間跳轉(zhuǎn)。能夠使用正則表達(dá)式完成手機(jī)號(hào)、微信號(hào)等信息的驗(yàn)證。

3.4知識(shí)儲(chǔ)備屬性名類(lèi)型默認(rèn)值說(shuō)明平臺(tái)差異說(shuō)明rangeArray/Array<Object>[]mode為selector或multiSelector時(shí)，range有效range-keyString當(dāng)range是一個(gè)Array＜Object＞時(shí)，通過(guò)range-key來(lái)指定Object中key的值作為選擇器顯示內(nèi)容3.4.1picker組件

picker組件是一種能夠在移動(dòng)端應(yīng)用中選擇一項(xiàng)或多項(xiàng)數(shù)據(jù)的UI組件，可從底部彈起。支持五種選擇器分別為：普通選擇器、多列選擇器、時(shí)間選擇器、日期選擇器、省市區(qū)選擇器，默認(rèn)為普通選擇器。@changeEventHandlevalue改變時(shí)觸發(fā)change事件，event.detail={value:value}

3.4知識(shí)儲(chǔ)備3.4.2input組件

input組件是一種常用的表單輸入控件，用于接收用戶(hù)輸入的數(shù)據(jù)。它支持多種類(lèi)型的輸入，如文本、數(shù)字、密碼等，也支持自定義輸入框樣式、事件等。屬性名類(lèi)型默認(rèn)值說(shuō)明平臺(tái)差異說(shuō)明confirm-typeStringdone設(shè)置鍵盤(pán)右下角按鈕的文字，僅在type="text"時(shí)生效微信小程序、App、H5、快手小程序、京東小程序confirm-holdBooleanfalse點(diǎn)擊鍵盤(pán)右下角按鈕時(shí)是否保持鍵盤(pán)不收起App(3.3.7+)、H5(3.3.7+)、微信小程序、支付寶小程序、百度小程序、QQ小程序、京東小程序@inputEventHandle當(dāng)鍵盤(pán)輸入時(shí)，觸發(fā)input事件，event.detail={value}@confirmEventHandle點(diǎn)擊完成按鈕時(shí)觸發(fā)，event.detail={value:value}快手小程序不支持

3.4知識(shí)儲(chǔ)備屬性名類(lèi)型默認(rèn)值說(shuō)明平臺(tái)差異說(shuō)明srcString圖片資源地址modeString'scaleToFill'圖片裁剪、縮放的模式lazy-loadBooleanfalse圖片懶加載。只針對(duì)page與scroll-view下的image有效微信小程序、百度小程序、抖音小程序、飛書(shū)小程序show-menu-by-longpressbooleanfalse開(kāi)啟長(zhǎng)按圖片顯示識(shí)別小程序碼菜單微信小程序2.7.0@errorHandleEvent當(dāng)錯(cuò)誤發(fā)生時(shí)，發(fā)布到AppService的事件名，事件對(duì)象event.detail={errMsg:'somethingwrong'}@loadHandleEvent當(dāng)圖片載入完畢時(shí)，發(fā)布到AppService的事件名，事件對(duì)象event.detail={height:'圖片高度px',width:'圖片寬度px'}3.4.3image組件

image組件在移動(dòng)端的使用與在Web端類(lèi)似，都是用于展示圖片的UI組件，可以加載本地圖片或網(wǎng)絡(luò)圖片。

3.4知識(shí)儲(chǔ)備常用提示框案例showToast消息提示框uni.showToast({title:'操作成功',icon:'success',duration:2000})showLoading加載提示框uni.showLoading({title:'加載中',mask:true})showModal模態(tài)框uni.showModal({title:'提示',content:'確定刪除該記錄嗎？',success(res){if(res.confirm){console.log('用戶(hù)點(diǎn)擊確定')}elseif(res.cancel){console.log('用戶(hù)點(diǎn)擊取消')}}})showActionSheet列表選擇提示框uni.showActionSheet({itemList:['選項(xiàng)一','選項(xiàng)二','選項(xiàng)三'],success(res){console.log('用戶(hù)點(diǎn)擊了',res.tapIndex+1,'號(hào)選項(xiàng)')},fail(res){console.log(res.errMsg)}})3.4.4uni-app常用提示框

3.4知識(shí)儲(chǔ)備3.4.5頁(yè)面跳轉(zhuǎn)頁(yè)面跳轉(zhuǎn)方法作用案例uni.navigateTo方法保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，可通過(guò)uni.navigateBack返回到原頁(yè)面//跳轉(zhuǎn)到目標(biāo)頁(yè)面uni.navigateTo({url:'/pages/target/target'})uni.redirectTo方法關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面//跳轉(zhuǎn)到目標(biāo)頁(yè)面uni.redirectTo({url:'/pages/target/target'})uni.navigateBack方法關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面//返回上一頁(yè)面uni.navigateBack()//返回多級(jí)頁(yè)面uni.navigateBack({delta:2})

3.5任務(wù)實(shí)施3.5.1頁(yè)面結(jié)構(gòu)分析與搭建個(gè)人資料頁(yè)結(jié)構(gòu)分析1.新建頁(yè)面文件：在/pages/my目錄下新建名為“material”的Vue文件。2.搭建個(gè)人資料頁(yè)結(jié)構(gòu)：根據(jù)個(gè)人資料頁(yè)中內(nèi)容相關(guān)度進(jìn)行頁(yè)面結(jié)構(gòu)劃分為用戶(hù)基本資料區(qū)域和用戶(hù)擴(kuò)展資料區(qū)域。3.實(shí)現(xiàn)跳轉(zhuǎn)到個(gè)人資料頁(yè)：用戶(hù)通過(guò)點(diǎn)擊個(gè)人中心頁(yè)的“個(gè)人資料”按鈕可以跳轉(zhuǎn)至個(gè)人資料頁(yè)。

3.5任務(wù)實(shí)施3.5.2制作用戶(hù)基本資料區(qū)域用戶(hù)基本資料區(qū)域結(jié)構(gòu)分析

3.5任務(wù)實(shí)施3.5.2制作用戶(hù)基本資料區(qū)域

為了使靜態(tài)頁(yè)面效果更加貼近設(shè)計(jì)圖效果，在靜態(tài)頁(yè)面制作部分我們會(huì)先使用Vue模擬一些靜態(tài)數(shù)據(jù)填充到頁(yè)面中，在后面功能實(shí)現(xiàn)部分的任務(wù)中，再通過(guò)后端接口獲取真實(shí)數(shù)據(jù)替換靜態(tài)數(shù)據(jù)。Template部分JavaScript部分

3.5任務(wù)實(shí)施3.5.3制作用戶(hù)擴(kuò)展資料區(qū)域用戶(hù)擴(kuò)展資料區(qū)域結(jié)構(gòu)分析

3.5任務(wù)實(shí)施3.5.3制作用戶(hù)擴(kuò)展資料區(qū)域用戶(hù)擴(kuò)展資料區(qū)域結(jié)構(gòu)細(xì)分效果要求：1.用戶(hù)ID是注冊(cè)時(shí)系統(tǒng)自動(dòng)生成的用戶(hù)唯一標(biāo)識(shí)，不支持修改。2.用戶(hù)性別為保密、男、女三個(gè)選項(xiàng)，可以使用uni-app中的picker滾動(dòng)選擇器組件進(jìn)行切換。3.點(diǎn)擊用戶(hù)手機(jī)號(hào)或微信號(hào)部分的編輯圖標(biāo)時(shí)，文本內(nèi)容切換為文本輸入框，編輯圖標(biāo)隱藏。4.手機(jī)號(hào)和微信號(hào)非必填；昵稱(chēng)不允許為空，長(zhǎng)度最大為8位；個(gè)性簽名允許為空，長(zhǎng)度最大為60位。

3.6任務(wù)測(cè)試測(cè)試條目是否通過(guò)比對(duì)開(kāi)發(fā)頁(yè)面和設(shè)計(jì)圖，核對(duì)字號(hào)、顏色、間距等設(shè)計(jì)參數(shù)

實(shí)現(xiàn)個(gè)人中心頁(yè)和個(gè)人資料頁(yè)的跳轉(zhuǎn)

手機(jī)號(hào)和微信號(hào)處于修改狀態(tài)時(shí)，編輯圖標(biāo)隱藏；修改完成后，光標(biāo)失焦，編輯圖標(biāo)顯示

保存信息時(shí)，輸入內(nèi)容符合驗(yàn)證規(guī)則，提示保存成功并返回到個(gè)人中心頁(yè)；不符合驗(yàn)證規(guī)則，做出相應(yīng)錯(cuò)誤提示

3.7自學(xué)評(píng)價(jià)評(píng)價(jià)內(nèi)容是否了解/掌握是否掌握picker滾動(dòng)選擇器的使用

是否了解uni-appinput組件的使用

是否掌握uni-appimage組件的使用

是否掌握uni.showToast消息提示方法的使用

是否掌握uni-app頁(yè)面跳轉(zhuǎn)方法的使用

是否掌握正則表達(dá)式的使用

3.8課后練習(xí)？1.選擇題（1）在uni-app中，以下哪個(gè)組件可以用于創(chuàng)建滾動(dòng)選擇器？A.pickerB.selectC.dropdownD.autocomplete（2）在uni-app中，以下哪種方法可以用于頁(yè)面跳轉(zhuǎn)？A.uni.navigateTo()B.uni.navigateBack()C.uni.redirectTo()D.uni.switchTab()（3）在uni-app中，以下哪個(gè)方法可以用于監(jiān)聽(tīng)輸入框的輸入事件？A.@inputB.@changeC.@focusD.@blur2.填空題（1）uni-app中的單行輸入框組件名稱(chēng)為————。（2）在uni-app中，設(shè)置滾動(dòng)選擇