任務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中，設置滾動選擇器的樣式屬性為——。3.簡答題（1）簡述uni-app中如何進行頁面的路由跳轉。

3.9任務拓展任務拓展

請根據設計圖，完成個人中心頁“賬號認證”二級頁面的制作。在個人中心頁點擊賬號認證按鈕可跳轉至賬號認證頁。

學校與院系可以聯動選擇。姓名只允許為中文，長度最大為4位。學號只允許為數字。點擊認證時，對輸入內容進行校驗，不符合上述規則進行相應信息提示，符合上述規則認證成功，返回上級頁面。任務4制作社區首頁Web前端應用開發項目式教程（基于uni-app框架）

目錄CONTENTS014.5任務實施4.7學習自評Part14.1任務描述4.2任務效果4.4知識儲備4.8課后練習4.9任務拓展4.3學習目標4.6任務測試

本任務將制作“啟嘉校園”項目的社區首頁，社區首頁主要展示用戶發布的文章列表，文章列表分為綜合推薦、我的關注、專業交流和表白墻四類。

4.1任務描述

4.2任務效果“社區”首頁效果圖

4.3學習目標能力目標素養目標知識目標通過采用組件化的方式制作搜索、選項卡、文章卡片和懸浮按鈕，培養學習者高質量、持續性的開發意識。通過封裝文章卡片組件，培養學習者注重細節、品質至上的工作態度。

通過制作“社區首頁”任務，提升學習者共創美好交流社區、營造良好網絡環境的意識。了解uni-app組件化。了解/deep/深度作用選擇器的用法。掌握uni-appeasyinput輸入框增強組件的使用。掌握onShareAppMessage小程序頁面轉發方法的使用。掌握uni.previewImage預覽圖片方法的使用。掌握uni.chooseImage上傳圖片方法的使用。掌握uni.getImageInfo獲取圖片信息方法的使用。掌握uni-appmovable-area可拖動區域組件的使用。能夠根據組件化思想完成組件封裝。能夠使用easyinput組件制作搜索輸入框。能夠使用onShareAppMessage方法實現頁面轉發。能夠使用圖片處理方法實現圖片的上傳和預覽。能夠使用movable-area組件實現元素的拖動。

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

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

4.4知識儲備使用uni.share方法實現頁面轉發uni.share({provider:'weixin',type:0,title:'分享標題',

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

imageUrl:'/share-image.jpg',

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

fail:function(err){

console.log('分享失敗',err)}})使用onShareAppMessage生命周期函數實現頁面轉發exportdefault{name:'MyPage',

onShareAppMessage:function(){

return{

title:'分享標題',

path:'/pages/index/index',

imageUrl:'/share-image.jpg'

}}}4.4.3uni-app頁面轉發

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

4.4知識儲備movable-area可以創建一個可移動視口<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可拖動區域組件

4.5任務實施4.5.1頁面結構分析與搭建新建頁面文件：在/pages/my目錄下新建名為“community”的Vue文件，在新建文件時勾選“創建同名目錄”，文件最終路徑為“/pages/community/community.vue”社區首頁結構分析

4.5任務實施4.5.2制作搜索區域新建組件文件：（1）在項目根目錄上右擊【新建】->【目錄】，創建名為“components”

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

4.5任務實施4.5.2制作搜索區域搜索區域結構分析封裝搜索區域組件

4.5任務實施4.5.3制作選項卡區域新建組件文件：

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

當選項卡切換時，文章列表也會進行相應更新，因此選項卡組件需要與社區首頁進行數據傳遞即父子組件通信，將選項卡切換信息傳遞給社區首頁。(1)選項卡組件內部聲明props，在社區首頁通過選項卡組件的props屬性傳遞選項卡列表和選中項數據。(2)切換選項卡的點擊事件在選項卡組件內部觸發，可以通過$on和$emit監聽和觸發事件，當點擊選項卡時觸發社區首頁中監聽選項卡切換的事件。實現父子組件通信

4.5任務實施4.5.4制作文章列表區域新建組件文件：

在/components目錄下新建組件文件，文件命名為“article-block”，勾選“創建同名目錄”，創建文件，文件最終路徑為“/components/article-block/article-block.vue”。文章卡片組件結構分析

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

4.5任務實施4.5.5制作懸浮按鈕新建組件文件：

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