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

任務(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滾動(dòng)選擇器組件的使用。掌握uni-appinput單行輸入框組件的使用。掌握uni-appimage圖片組件的使用。掌握uni.showToast消息提示方法的使用。掌握uni-app頁面跳轉(zhuǎn)方法的使用。掌握正則表達(dá)式的使用。能夠使用picker組件完成滾動(dòng)選擇性別。能夠使用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組件是一種能夠在移動(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知識儲備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組件在移動(dòng)端的使用與在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)自動(dòng)生成的用戶唯一標(biāo)識，不支持修改。2.用戶性別為保密、男、女三個(gè)選項(xiàng)，可以使用uni-app中的picker滾動(dòng)選擇器組件進(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滾動(dòng)選擇器的使用

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

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

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

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

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

3.8課后練習(xí)？1.選擇題（1）在uni-app中，以下哪個(gè)組件可以用于創(chuàng)建滾動(dò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è)置滾動(dòng)選擇器的樣式屬性為——。3.簡答題（1）簡述uni-app中如何進(jìn)行頁面的路由跳轉(zhuǎn)。

3.9任務(wù)拓展任務(wù)拓展

請根據(jù)設(shè)計(jì)圖，完成個(gè)人中心頁“賬號認(rèn)證”二級頁面的制作。在個(gè)人中心頁點(diǎn)擊賬號認(rèn)證按鈕可跳轉(zhuǎn)至賬號認(rèn)證頁。

學(xué)校與院系可以聯(lián)動(dòng)選擇。姓名只允許為中文，長度最大為4位。學(xué)號只允許為數(shù)字。點(diǎn)擊認(rèn)證時(shí)，對輸入內(nèi)容進(jìn)行校驗(yàn)，不符合上述規(guī)則進(jìn)行相應(yīng)信息提示，符合上述規(guī)則認(rèn)證成功，返回上級頁面。任務(wù)4制作社區(qū)首頁Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS014.5任務(wù)實(shí)施4.7學(xué)習(xí)自評Part14.1任務(wù)描述4.2任務(wù)效果4.4知識儲備4.8課后練習(xí)4.9任務(wù)拓展4.3學(xué)習(xí)目標(biāo)4.6任務(wù)測試

本任務(wù)將制作“啟嘉校園”項(xiàng)目的社區(qū)首頁，社區(qū)首頁主要展示用戶發(fā)布的文章列表，文章列表分為綜合推薦、我的關(guān)注、專業(yè)交流和表白墻四類。

4.1任務(wù)描述

4.2任務(wù)效果“社區(qū)”首頁效果圖

4.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識目標(biāo)通過采用組件化的方式制作搜索、選項(xiàng)卡、文章卡片和懸浮按鈕，培養(yǎng)學(xué)習(xí)者高質(zhì)量、持續(xù)性的開發(fā)意識。通過封裝文章卡片組件，培養(yǎng)學(xué)習(xí)者注重細(xì)節(jié)、品質(zhì)至上的工作態(tài)度。

通過制作“社區(qū)首頁”任務(wù)，提升學(xué)習(xí)者共創(chuàng)美好交流社區(qū)、營造良好網(wǎng)絡(luò)環(huán)境的意識。了解uni-app組件化。了解/deep/深度作用選擇器的用法。掌握uni-appeasyinput輸入框增強(qiáng)組件的使用。掌握onShareAppMessage小程序頁面轉(zhuǎn)發(fā)方法的使用。掌握uni.previewImage預(yù)覽圖片方法的使用。掌握uni.chooseImage上傳圖片方法的使用。掌握uni.getImageInfo獲取圖片信息方法的使用。掌握uni-appmovable-area可拖動(dòng)區(qū)域組件的使用。能夠根據(jù)組件化思想完成組件封裝。能夠使用easyinput組件制作搜索輸入框。能夠使用onShareAppMessage方法實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)。能夠使用圖片處理方法實(shí)現(xiàn)圖片的上傳和預(yù)覽。能夠使用movable-area組件實(shí)現(xiàn)元素的拖動(dòng)。

4.4知識儲備什么是組件化開發(fā)組件化開發(fā)是一種將軟件系統(tǒng)劃分為多個(gè)獨(dú)立模塊并按照功能組合起來的開發(fā)方式。每個(gè)模塊都可以獨(dú)立開發(fā)、測試、部署，同時(shí)也可以被其他模塊調(diào)用和重用。uni-app組件化開發(fā)的好處uni-app是一種跨平臺的開發(fā)框架，它支持將一個(gè)組件同時(shí)應(yīng)用于多個(gè)平臺,可以提高代碼復(fù)用性、開發(fā)效率、協(xié)作效率、用戶體驗(yàn)。組件化開發(fā)的應(yīng)用場景uni-app的組件化開發(fā)可以應(yīng)用于各種類型的應(yīng)用程序開發(fā)，如社交、電商、新聞、音樂、游戲等。組件化應(yīng)用easycom組件自動(dòng)注冊方式：首先，在pages.json或components.json中聲明組件的名稱和路徑，其次，在組件的Vue文件中，將name屬性設(shè)置為/組件名4.4.1uni-app組件化

4.4知識儲備4.4.2uni-easyinput輸入框組件輸入框帶左右圖標(biāo)<!--輸入框頭部/尾部圖標(biāo)--><uni-easyinputprefixIcon/suffixIcon="search"v-model="value"placeholder="請輸入內(nèi)容"@iconClick="onClick"></uni-easyinput>輸入框禁用<uni-easyinputdisabledv-model="value"placeholder="請輸入內(nèi)容"></uni-easyinput>密碼框<uni-easyinputtype="password"v-model="password"placeholder="請輸入密碼"></uni-easyinput>輸入框聚焦<uni-easyinputfocusv-model="password"placeholder="請輸入內(nèi)容"></uni-easyinput>多行文本<uni-easyinputtype="textarea"v-model="value"placeholder="請輸入內(nèi)容"></uni-easyinput>多行文本自動(dòng)高度<uni-easyinputtype="textarea"autoHeightv-model="value"placeholder="請輸入內(nèi)容"></uni-easyinput>取消邊框03.<uni-easyinput:inputBorder="false"placeholder="請輸入姓名"></uni-easyinput>

4.4知識儲備使用uni.share方法實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)uni.share({provider:'weixin',type:0,title:'分享標(biāo)題',

summary:'分享描述',href:'/share',

imageUrl:'/share-image.jpg',

success:function(){console.log('分享成功')},

fail:function(err){

console.log('分享失敗',err)}})使用onShareAppMessage生命周期函數(shù)實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)exportdefault{name:'MyPage',

onShareAppMessage:function(){

return{

title:'分享標(biāo)題',

path:'/pages/index/index',

imageUrl:'/share-image.jpg'

}}}4.4.3uni-app頁面轉(zhuǎn)發(fā)

4.4知識儲備獲取圖片信息使用uni.getImageInfo可以獲取到圖片的信息，包括圖片的寬度、高度、大小等，同時(shí)也可以獲取到圖片的本地路徑選擇圖片使用uni.chooseImage可以打開系統(tǒng)相冊，供用戶選擇需要上傳的圖片。可以通過count參數(shù)指定最多可以選擇多少張圖片，也可以通過sizeType參數(shù)指定選擇圖片的大小類型。預(yù)覽圖片使用uni.previewImage可以預(yù)覽一張或多張圖片，支持手勢縮放、雙擊放大等功能。保存圖片到相冊使用uni.saveImageToPhotosAlbum可以將一張圖片保存到手機(jī)相冊中，用戶可以在相冊中查看保存的圖片。圖片上傳使用uni.uploadFile方法將圖片上傳到服務(wù)器，需要指定url、filePath、name和formData等參數(shù)。4.4.4uni-app圖片處理

4.4知識儲備movable-area可以創(chuàng)建一個(gè)可移動(dòng)視口<movable-areascale-area="true">

<viewstyle="width:1000rpx;height:1000rpx;background-color:#eee;">

<viewstyle="width:200rpx;height:200rpx;background-color:#f00;"></view>

<viewstyle="width:200rpx;height:200rpx;background-color:#0f0;margin-left:800rpx;"></view>

<viewstyle="width:200rpx;height:200rpx;background-color:#00f;margin-top:800rpx;"></view>

<viewstyle="width:200rpx;height:200rpx;background-color:#fff;margin-left:800rpx;margin-top:800rpx;"></view>

</view></movable-area>4.4.5moveable-area可拖動(dòng)區(qū)域組件

4.5任務(wù)實(shí)施4.5.1頁面結(jié)構(gòu)分析與搭建新建頁面文件：在/pages/my目錄下新建名為“community”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/community.vue”社區(qū)首頁結(jié)構(gòu)分析

4.5任務(wù)實(shí)施4.5.2制作搜索區(qū)域新建組件文件：（1）在項(xiàng)目根目錄上右擊【新建】->【目錄】，創(chuàng)建名為“components”

的目錄。（2）在/components目錄上右擊【新建組件】，在彈出的新建組件窗口中選擇“使用scss的模板組件”為組件模板，文件命名為“head”。新建uni-app組件

4.5任務(wù)實(shí)施4.5.2制作搜索區(qū)域搜索區(qū)域結(jié)構(gòu)分析封裝搜索區(qū)域組件

4.5任務(wù)實(shí)施4.5.3制作選項(xiàng)卡區(qū)域新建組件文件：

在/components目錄下新建組件文件，文件命名為“tabs-component”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/tabs-component/tabs-component.vue”。選項(xiàng)卡組件運(yùn)行效果圖

當(dāng)選項(xiàng)卡切換時(shí)，文章列表也會進(jìn)行相應(yīng)更新，因此選項(xiàng)卡組件需要與社區(qū)首頁進(jìn)行數(shù)據(jù)傳遞即父子組件通信，將選項(xiàng)卡切換信息傳遞給社區(qū)首頁。(1)選項(xiàng)卡組件內(nèi)部聲明props，在社區(qū)首頁通過選項(xiàng)卡組件的props屬性傳遞選項(xiàng)卡列表和選中項(xiàng)數(shù)據(jù)。(2)切換選項(xiàng)卡的點(diǎn)擊事件在選項(xiàng)卡組件內(nèi)部觸發(fā)，可以通過$on和$emit監(jiān)聽和觸發(fā)事件，當(dāng)點(diǎn)擊選項(xiàng)卡時(shí)觸發(fā)社區(qū)首頁中監(jiān)聽選項(xiàng)卡切換的事件。實(shí)現(xiàn)父子組件通信

4.5任務(wù)實(shí)施4.5.4制作文章列表區(qū)域新建組件文件：

在/components目錄下新建組件文件，文件命名為“article-block”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/article-block/article-block.vue”。文章卡片組件結(jié)構(gòu)分析

4.5任務(wù)實(shí)施4.5.4制作文章列表區(qū)域當(dāng)圖片數(shù)量為1時(shí)，圖片寬度占包裹容器的100%；當(dāng)圖片數(shù)量大于1時(shí)，圖片列表為九宮格布局，可以使用flex布局實(shí)現(xiàn)。當(dāng)閱讀數(shù)量大于10000時(shí)，數(shù)量單位切換為“W”。

4.5任務(wù)實(shí)施4.5.5制作懸浮按鈕新建組件文件：

在/components目錄下新建組件文件，文件命名為“suspension-button”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/suspension-button/suspension-button.vue”。使用uni-appmovable-area可拖動(dòng)區(qū)域組件和movable-view可移動(dòng)視圖容器組件實(shí)現(xiàn)拖動(dòng)效果，movable-area組件用于設(shè)置可拖動(dòng)的范圍，movable-view組件為可拖動(dòng)對象。返回頂部按鈕默認(rèn)隱藏，用戶下滑屏幕時(shí)顯示；返回頂部按鈕不可拖動(dòng)。封裝懸浮按鈕組件：快捷發(fā)布按鈕始終顯示，且可拖動(dòng)改變位置。