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

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

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

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

3.1任務(wù)描述

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

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

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

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

3.4知識儲備3.4.2input組件

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

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

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

3.4知識儲備常用提示框案例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('用戶點(diǎn)擊確定')}elseif(res.cancel){console.log('用戶點(diǎn)擊取消')}}})showActionSheet列表選擇提示框uni.showActionSheet({itemList:['選項(xiàng)一','選項(xiàng)二','選項(xiàng)三'],success(res){console.log('用戶點(diǎn)擊了',res.tapIndex+1,'號選項(xiàng)')},fail(res){console.log(res.errMsg)}})3.4.4uni-app常用提示框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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