任務3制作個人資料頁Web前端應用開發項目式教程（基于uni-app框架）

目錄CONTENTS013.5任務實施3.7學習自評Part13.1任務描述3.2任務效果3.4知識儲備3.8課后練習3.9任務拓展3.3學習目標3.6任務測試

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

3.1任務描述

3.2任務效果個人資料頁效果圖

3.3學習目標能力目標素養目標知識目標通過學習使用正則表達式完成手機號、微信號等信息的驗證的方法，培養學習者發現問題、分析問題、解決問題的能力。通過實現“用戶擴展資料區域”中用戶信息顯示的功能，強化學習者個人信息保護意識。通過鞏固拓展的練習，培養學習者腳踏實地、躬身力行的實踐精神。掌握uni-apppicker滾動選擇器組件的使用。掌握uni-appinput單行輸入框組件的使用。掌握uni-appimage圖片組件的使用。掌握uni.showToast消息提示方法的使用。掌握uni-app頁面跳轉方法的使用。掌握正則表達式的使用。能夠使用picker組件完成滾動選擇性別。能夠使用input組件完成內容的輸入。能夠使用image組件完成圖像的展示及縮放、裁剪等操作。能夠使用uni.showToast方法完成消息提示。能夠使用uni-app頁面跳轉方法實現頁面間跳轉。能夠使用正則表達式完成手機號、微信號等信息的驗證。

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

picker組件是一種能夠在移動端應用中選擇一項或多項數據的UI組件，可從底部彈起。支持五種選擇器分別為：普通選擇器、多列選擇器、時間選擇器、日期選擇器、省市區選擇器，默認為普通選擇器。@changeEventHandlevalue改變時觸發change事件，event.detail={value:value}

3.4知識儲備3.4.2input組件

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

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

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

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

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

3.5任務實施3.5.1頁面結構分析與搭建個人資料頁結構分析1.新建頁面文件：在/pages/my目錄下新建名為“material”的Vue文件。2.搭建個人資料頁結構：根據個人資料頁中內容相關度進行頁面結構劃分為用戶基本資料區域和用戶擴展資料區域。3.實現跳轉到個人資料頁：用戶通過點擊個人中心頁的“個人資料”按鈕可以跳轉至個人資料頁。

3.5任務實施3.5.2制作用戶基本資料區域用戶基本資料區域結構分析

3.5任務實施3.5.2制作用戶基本資料區域

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

3.5任務實施3.5.3制作用戶擴展資料區域用戶擴展資料區域結構分析

3.5任務實施3.5.3制作用戶擴展資料區域用戶擴展資料區域結構細分效果要求：1.用戶ID是注冊時系統自動生成的用戶唯一標識，不支持修改。2.用戶性別為保密、男、女三個選項，可以使用uni-app中的picker滾動選擇器組件進行切換。3.點擊用戶手機號或微信號部分的編輯圖標時，文本內容切換為文本輸入框，編輯圖標隱藏。4.手機號和微信號非必填；昵稱不允許為空，長度最大為8位；個性簽名允許為空，長度最大為60位。

3.6任務測試測試條目是否通過比對開發頁面和設計圖，核對字號、顏色、間距等設計參數

實現個人中心頁和個人資料頁的跳轉

手機號和微信號處于修改狀態時，編輯圖標隱藏；修改完成后，光標失焦，編輯圖標顯示

保存信息時，輸入內容符合驗證規則，提示保存成功并返回到個人中心頁；不符合驗證規則，做出相應錯誤提示

3.7自學評價評價內容是否了解/掌握是否掌握picker滾動選擇器的使用

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

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

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

是否掌握uni-app頁面跳轉方法的使用

是否掌握正則表達式的使用

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