Web前端應用開發(fā)項目式教程（基于uni-app框架） 課件 任務4　制作社區(qū)首頁

任務4制作社區(qū)首頁Web前端應用開發(fā)項目式教程（基于uni-app框架）

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

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

4.1任務描述

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

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

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

4.4知識儲備什么是組件化開發(fā)組件化開發(fā)是一種將軟件系統(tǒng)劃分為多個獨立模塊并按照功能組合起來的開發(fā)方式。每個模塊都可以獨立開發(fā)、測試、部署，同時也可以被其他模塊調(diào)用和重用。uni-app組件化開發(fā)的好處uni-app是一種跨平臺的開發(fā)框架，它支持將一個組件同時應用于多個平臺,可以提高代碼復用性、開發(fā)效率、協(xié)作效率、用戶體驗。組件化開發(fā)的應用場景uni-app的組件化開發(fā)可以應用于各種類型的應用程序開發(fā)，如社交、電商、新聞、音樂、游戲等。組件化應用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="請輸入內(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>多行文本自動高度<uni-easyinputtype="textarea"autoHeightv-model="value"placeholder="請輸入內(nèi)容"></uni-easyinput>取消邊框03.<uni-easyinput:inputBorder="false"placeholder="請輸入姓名"></uni-easyinput>

4.4知識儲備使用uni.share方法實現(xiàn)頁面轉(zhuǎn)發(fā)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生命周期函數(shù)實現(xiàn)頁面轉(zhuǎn)發(fā)exportdefault{name:'MyPage',

onShareAppMessage:function(){

return{

title:'分享標題',

path:'/pages/index/index',

imageUrl:'/share-image.jpg'

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

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

4.4知識儲備movable-area可以創(chuà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可拖動區(qū)域組件

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

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

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

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

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

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

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

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

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

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

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

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

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

各個子組件能夠在社區(qū)首頁中正常引入且可正常展示頁面效果

選項卡能夠根據(jù)選擇正常切換

選項卡切換后能夠顯示對應的文章列表內(nèi)容

文章列表的標題和內(nèi)容最多各截取一行和三行進行展示

圖片列表可正常展示一到九張不同數(shù)量的圖片效果

返回頂部按鈕在用戶下滑屏幕時顯示

快捷發(fā)布按鈕可拖動到任意位置

4.7自學評價評價內(nèi)容是否了解/掌握是否能夠使用組件化思想進行組件封裝

是否能夠使用easyinput組件制作搜索輸入框

是否能夠使用onShareAppMessage方法實現(xiàn)頁面轉(zhuǎn)發(fā)

是否能夠使用圖片處理方法實現(xiàn)圖片的上傳和預覽

是否能夠使用movable-area組件實現(xiàn)元素的拖動

4.8課后練習？1.選擇題（1）usni-app中的easyinput組件的主要功能是什么？A.增強輸入框的功能，提供更多的輸入方式B.