Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)5、6　制作文章發(fā)布頁、制作文章詳情頁

任務(wù)5制作文章發(fā)布頁Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS015.5任務(wù)實(shí)施5.7學(xué)習(xí)自評(píng)Part15.1任務(wù)描述5.2任務(wù)效果5.4知識(shí)儲(chǔ)備5.8課后練習(xí)5.9任務(wù)拓展5.3學(xué)習(xí)目標(biāo)5.6任務(wù)測(cè)試

本任務(wù)我們來制作“啟嘉校園”項(xiàng)目的文章發(fā)布頁。文章發(fā)布頁中用戶可以編輯文章標(biāo)題和內(nèi)容，并為文章添加圖片、插入話題，文章發(fā)布成功后自動(dòng)跳轉(zhuǎn)回社區(qū)首頁，剛發(fā)布的文章在文章列表中置頂顯示。

5.1任務(wù)描述

5.2任務(wù)效果“文章發(fā)布頁”效果圖

5.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過搭建文章發(fā)布頁結(jié)構(gòu)，把一個(gè)頁面分成5個(gè)區(qū)域逐步開發(fā)，培養(yǎng)開發(fā)者的全局思維。通過制作上傳圖片區(qū)域解決H5端無法限制上傳數(shù)量問題，培養(yǎng)學(xué)習(xí)者敢于挑戰(zhàn)、勇于探索的創(chuàng)新精神。掌握uni.chooseImage選擇圖片方法的使用。掌握uni-apptextarea多行輸入框組件的使用。能夠使用uni.chooseImage方法實(shí)現(xiàn)本地相冊(cè)獲取圖片或拍照。能夠使用textarea組件實(shí)現(xiàn)顯示已輸入字?jǐn)?shù)和字?jǐn)?shù)上限的多行輸入框。能夠使用uni.navigateTo方法在頁面跳轉(zhuǎn)時(shí)傳遞話題參數(shù)。能夠使用正則表達(dá)式完成文章信息驗(yàn)證。能夠通過操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能。

5.4知識(shí)儲(chǔ)備

元素遮罩層是指將一個(gè)元素覆蓋在另一個(gè)元素上，從而實(shí)現(xiàn)遮罩的效果。實(shí)現(xiàn)元素遮罩層時(shí)，通常需要使用CSS中的position屬性來控制元素的位置，//CSS代碼14..overlay{15.position:absolute;16.top:0;17.left:0;18.width:100%;19.height:100%;20.background-color:rgba(0,0,0,0.5);21.z-index:1000;22.}23..content{24.position:relative;25.z-index:999;26.}5.4.1元素遮罩層overlay元素是一個(gè)全屏的遮罩層，使用position:absolute定位將其覆蓋在content元素上。為overlay元素設(shè)置一個(gè)較高的z-index值以確保能夠位于content元素上方。

5.4知識(shí)儲(chǔ)備5.4.2正則表達(dá)式

本書將在多處使用正則表達(dá)式，以下是一些常用正則表達(dá)式的案例：01.//匹配手機(jī)號(hào)碼02./^1[3-9]\d{9}$/03.//匹配身份證號(hào)碼04./^\d{17}[\dXx]$/05.//匹配電子郵件地址06./^[\w.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$/07.//匹配URL地址08./^(https?:\/\/)?([a-z\d-]+\.)+[a-z]{2,}(\/[^\s]*)?$/i09.//匹配IPv4地址10./^((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){3}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/11.//匹配日期格式（YYYY-MM-DD）12./^\d{4}-\d{2}-\d{2}$/

5.5任務(wù)實(shí)施5.5.1頁面結(jié)構(gòu)分析與搭建新建頁面文件：在/pages/community/目錄下新建名為“publish-article”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/publish-article/publish-article.vue”。文章發(fā)布頁結(jié)構(gòu)分析

5.5任務(wù)實(shí)施5.5.2制作導(dǎo)航欄區(qū)域新建組件文件：

在/components目錄下新建組件文件，文件命名為“nav-bar”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/nav-bar/nav-bar.vue”。設(shè)計(jì)圖分析運(yùn)行效果圖導(dǎo)航欄區(qū)域包含返回按鈕和頁面標(biāo)題，與小程序膠囊按鈕垂直居中，單擊返回按鈕可返回上級(jí)頁面。各個(gè)小程序平臺(tái)膠囊按鈕的高度不同，因此實(shí)現(xiàn)垂直居中效果需要根據(jù)小程序膠囊按鈕高度來設(shè)置導(dǎo)航欄高度，可以使用JavaScript動(dòng)態(tài)獲取小程序膠囊按鈕的高度。

5.5任務(wù)實(shí)施5.5.3制作文字信息區(qū)域文字信息區(qū)域運(yùn)行效果

在正文文本輸入框右下角顯示已輸入字?jǐn)?shù)與字?jǐn)?shù)上限提示，用戶輸入的字?jǐn)?shù)達(dá)500后禁止繼續(xù)輸入。

使用uni-app中textarea多行輸入框可以實(shí)現(xiàn)文章正文內(nèi)容的輸入，通過CSS偽類選擇器動(dòng)態(tài)插入已輸入文字?jǐn)?shù)量

5.5任務(wù)實(shí)施5.5.4制作上傳圖片區(qū)域新建組件文件：

在/components目錄下新建組件文件，文件命名為“image-upload”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/image-upload/image-upload.vue”。上傳圖片區(qū)域分析1.上傳圖片區(qū)域包含上傳按鈕和圖片預(yù)覽兩部分。2.圖片預(yù)覽分為上傳中和上傳成功兩種狀態(tài)。3.上傳中狀態(tài)下顯示上傳進(jìn)度的百分比，上傳成功狀態(tài)下顯示上傳成功圖標(biāo)。4.刪除圖片按鈕在圖片預(yù)覽右上角顯示，上傳圖片按鈕在圖片列表最右側(cè)。5.用戶可上傳圖片數(shù)量最多為9張，當(dāng)圖片列表寬度超過屏幕寬度時(shí)出現(xiàn)橫向滾動(dòng)條。設(shè)計(jì)圖分析

5.5任務(wù)實(shí)施5.5.4制作上傳圖片區(qū)域上傳圖片區(qū)域運(yùn)行效果

實(shí)現(xiàn)上傳圖片的主要邏輯是通過操作數(shù)組，記錄上傳的圖片信息，上傳圖片時(shí)向數(shù)組內(nèi)追加圖片數(shù)據(jù)，刪除圖片時(shí)從數(shù)組內(nèi)移除相應(yīng)數(shù)據(jù)。1.使用imageList數(shù)組記錄上傳的圖片信息，通過判斷該數(shù)組長(zhǎng)度限制用戶上傳圖片數(shù)量最多為9張。2.通過遍歷上傳的圖片信息，返回未超過上傳大小限制的圖片數(shù)量，判斷其與上傳圖片總量是否一致，不一致則說明有圖片超出大小限制，終止上傳流程。3.通過splice方法刪除imageList數(shù)組中指定位置的數(shù)據(jù)，實(shí)現(xiàn)刪除圖片操作。

5.5任務(wù)實(shí)施5.5.5制作選擇話題區(qū)域

要求：

當(dāng)用戶從社區(qū)首頁的綜合推薦或我的關(guān)注分類下進(jìn)入文章發(fā)布頁時(shí)，無自動(dòng)選中話題；當(dāng)用戶從社區(qū)首頁的表白墻和專業(yè)交流分類下進(jìn)入文章發(fā)布頁時(shí)，分別自動(dòng)選中表白墻和專業(yè)交流話題。選擇話題區(qū)域運(yùn)行效果實(shí)現(xiàn)：在跳轉(zhuǎn)地址中添加type參數(shù)，傳遞分類信息索引。判斷this.active值是否大于等于零，大于0時(shí)自動(dòng)選中話題。

5.5任務(wù)實(shí)施5.5.6制作發(fā)布按鈕區(qū)域要求：

進(jìn)行文章發(fā)布時(shí)，用戶編輯的文章內(nèi)容須符合以下驗(yàn)證規(guī)則：標(biāo)題和正文不允許為空；標(biāo)題長(zhǎng)度最大為40個(gè)字符；正文長(zhǎng)度最大為500個(gè)字符；圖片正在上傳中禁止發(fā)布文章；話題為必選項(xiàng)。實(shí)現(xiàn)：發(fā)布按鈕區(qū)域運(yùn)行效果Template部分JavaScript部分

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

各個(gè)子組件能夠在發(fā)布頁中正常引入且可正常展示頁面效果

圖片超過數(shù)量或大小限制時(shí)能夠取消上傳并做出相應(yīng)提示

圖片上傳中和上傳完成效果能夠正常顯示

圖片上傳成功后能夠進(jìn)行圖片的預(yù)覽與刪除操作

話題能夠根據(jù)社區(qū)首頁的傳值自動(dòng)選中并可自由切換

發(fā)布文章時(shí)，用戶編輯的文章內(nèi)容若符合驗(yàn)證規(guī)則，提示發(fā)布成功并跳轉(zhuǎn)回社區(qū)首頁；不符合驗(yàn)證規(guī)則，做出相應(yīng)錯(cuò)誤提示

5.7自學(xué)評(píng)價(jià)評(píng)價(jià)內(nèi)容是否了解/掌握是否能夠使用uni.chooseImage方法實(shí)現(xiàn)本地相冊(cè)獲取圖片或拍照

是否能夠使用textarea組件實(shí)現(xiàn)顯示已輸入字?jǐn)?shù)和字?jǐn)?shù)上限的多行輸入框

是否能夠使用uni.navigateTo方法在頁面跳轉(zhuǎn)時(shí)傳遞話題參數(shù)

是否能夠使用正則表達(dá)式完成文章信息驗(yàn)證

是否能夠通過操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能

5.8課后練習(xí)？1.選擇題（1）在制作元素遮罩層時(shí)，使用以下哪個(gè)屬性可以設(shè)置元素的層級(jí)？A.indexB.positionC.z-indexD.line-height（2）以下哪個(gè)選項(xiàng)是手機(jī)號(hào)正則表達(dá)式的正確寫法？A./^1[3-9]\d{9}$/B./1[3-9]\d{9}/C./1[3-9]\d{10}/D./^[1-9]\d{10}$/（3）在啟嘉校園文章發(fā)布頁中，以下哪個(gè)變量表示設(shè)備狀態(tài)欄高度？A.phoneBarHeightB.statusBarHeightC.navHeightD.titleBarHeight2.填空題（1）匹配郵政編碼（中國(guó)大陸）的正則表達(dá)式是_____。（2）在從社區(qū)首頁跳轉(zhuǎn)到文章發(fā)布頁時(shí)，通過在跳轉(zhuǎn)地址中添加_____參數(shù)，傳遞分類信息索引。3.簡(jiǎn)答題（1）簡(jiǎn)述通過操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能的具體步驟。

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

根據(jù)設(shè)計(jì)圖，實(shí)現(xiàn)“二手”商品發(fā)布頁面部分效果。在“二手”首頁，通過快捷發(fā)布按鈕可跳轉(zhuǎn)至商品發(fā)布頁面。標(biāo)題與正文的驗(yàn)證規(guī)則請(qǐng)參考文章發(fā)布頁。圖片為必填項(xiàng)，第一張圖片為默認(rèn)商品主圖。商品分類的類目可從“二手”首頁跳轉(zhuǎn)時(shí)獲取。商品金額為必填項(xiàng)且金額不能為0。單擊發(fā)布時(shí)，對(duì)信息進(jìn)行校驗(yàn)，符合上述規(guī)則發(fā)布成功，并跳轉(zhuǎn)到上一級(jí)頁面。任務(wù)6制作文章詳情頁Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS016.5任務(wù)實(shí)施6.7學(xué)習(xí)自評(píng)Part16.1任務(wù)描述6.2任務(wù)效果6.4知識(shí)儲(chǔ)備6.8課后練習(xí)6.9任務(wù)拓展6.3學(xué)習(xí)目標(biāo)6.6任務(wù)測(cè)試通過點(diǎn)擊社區(qū)首頁“文章列表”中的文章卡片可以進(jìn)入文章詳情頁，文章詳情頁包含文章的發(fā)布者信息、發(fā)布時(shí)間、標(biāo)題、正文等內(nèi)容，用戶可對(duì)文章內(nèi)容進(jìn)行瀏覽、關(guān)注、轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊操作，也可在評(píng)論區(qū)查看、回復(fù)和點(diǎn)贊其他用戶的評(píng)論，這是文章管理系統(tǒng)包含的常規(guī)功能，也是移動(dòng)端系統(tǒng)最常見的交互手段，能夠讓用戶有更好的應(yīng)用體驗(yàn)。

6.1任務(wù)描述

6.2任務(wù)效果“文章詳情頁”效果圖

6.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過對(duì)組件的封裝與復(fù)用，培養(yǎng)學(xué)習(xí)者遵守行業(yè)編碼規(guī)范的意識(shí)。通過引導(dǎo)學(xué)習(xí)者自學(xué)官網(wǎng)開發(fā)手冊(cè)，培養(yǎng)其熱愛學(xué)習(xí)、主動(dòng)學(xué)習(xí)的精神。通過解決軟件兼容性問題，培養(yǎng)學(xué)習(xí)者追求軟件高質(zhì)量的職業(yè)意識(shí)。通過網(wǎng)絡(luò)系統(tǒng)的開發(fā)，培養(yǎng)學(xué)習(xí)者的網(wǎng)絡(luò)案例意識(shí)，通過健康用網(wǎng)傳播正能量。掌握組件的復(fù)用。掌握onShareAppMessage小程序頁面轉(zhuǎn)發(fā)方法的使用。掌握Vue$nextTick回調(diào)延遲方法的使用。掌握Vuefilters過濾器方法的使用。掌握input組件always-embed和adjust-position屬性的用法。能夠使用組件提升代碼復(fù)用率。能夠使用onShareAppMessage方法實(shí)現(xiàn)轉(zhuǎn)發(fā)頁面的自定義信息設(shè)置。能夠使用filters過濾器實(shí)現(xiàn)日期和時(shí)間格式化。能夠解決IOS系統(tǒng)中鍵盤調(diào)起后的輸入框被覆蓋的問題。。

6.4知識(shí)儲(chǔ)備6.4.1組件復(fù)用與拓展組件的復(fù)用和拓展是兩個(gè)緊密相關(guān)的概念，它們都是為了提高代碼的可復(fù)用性和可維護(hù)性。組件的復(fù)用是指在不同場(chǎng)景下使用同一個(gè)組件的能力，而組件的拓展則是指在已有組件的基礎(chǔ)上進(jìn)行修改和擴(kuò)展，從而創(chuàng)建一個(gè)新的組件。在實(shí)際開發(fā)中，通常會(huì)將一些通用的組件抽象出來，例如按鈕、表單、模態(tài)框等，然后在不同的頁面中復(fù)用這些組件。組件復(fù)用可通過多種方式實(shí)現(xiàn)，例如：利用props傳遞數(shù)據(jù)，使子組件能根據(jù)父組件傳遞的數(shù)據(jù)進(jìn)行定制化渲染；使用插槽，讓父組件能插入自定義內(nèi)容，使子組件更靈活；使用高階組件，將組件邏輯封裝為函數(shù)，或使用mixins，將共享邏輯封裝在一起，減少重復(fù)編寫。組件拓展是指在已有組件的基礎(chǔ)上進(jìn)行修改和擴(kuò)展，從而創(chuàng)建一個(gè)新組件。通常情況下，組件的拓展可以通過繼承或者組合等方式來實(shí)現(xiàn)。在繼承方式中，可以通過繼承已有組件的方式來創(chuàng)建一個(gè)新的組件，并在新組件中添加新的屬性和方法。在組合方式中，可以將已有組件作為子組件，然后在新組件中添加新的屬性和方法。

6.4知識(shí)儲(chǔ)備6.4.1組件復(fù)用與拓展具體實(shí)例請(qǐng)參見教材6.4.1節(jié)。

6.4知識(shí)儲(chǔ)備6.4.2uni-app跨端兼容雖然uni-app具有跨平臺(tái)的優(yōu)勢(shì)，但是不同平臺(tái)之間還是存在一些兼容性問題，需要開發(fā)者注意。問題解決方法樣式兼容性不同平臺(tái)的樣式支持度不同，需要開發(fā)者針對(duì)不同平臺(tái)進(jìn)行樣式調(diào)整?？梢允褂闷脚_(tái)判斷工具，例如uni.getSystemInfoSync()來獲取當(dāng)前平臺(tái)信息，并根據(jù)平臺(tái)信息動(dòng)態(tài)修改樣式。組件兼容性不同平臺(tái)支持的組件和屬性不同，需要開發(fā)者注意對(duì)應(yīng)組件和屬性的支持情況。可以使用條件渲染或者slot來動(dòng)態(tài)加載不同平臺(tái)的組件。API兼容性不同平臺(tái)支持的API不同，需要開發(fā)者使用條件編譯來針對(duì)不同平臺(tái)編寫不同的API調(diào)用代碼。生命周期兼容性不同平臺(tái)的生命周期可能存在差異，需要開發(fā)者注意不同平臺(tái)的生命周期差異并進(jìn)行針對(duì)性調(diào)整性能兼容性不同平臺(tái)的性能表現(xiàn)不同，需要開發(fā)者注意調(diào)整性能瓶頸。

6.4知識(shí)儲(chǔ)備6.4.3DOM更新回調(diào)

$nextTick()是Vue提供的一個(gè)異步方法，它的作用是在DOM更新之后執(zhí)行回調(diào)函數(shù)。在Vue更新DOM后，可能會(huì)需要訪問更新后的DOM或者執(zhí)行一些需要在DOM更新后才能執(zhí)行的操作，這時(shí)可以使用$nextTick()方法來保證在DOM更新完成后再執(zhí)行這些操作。兩種使用方法：在DOM更新后調(diào)用Promise的形式調(diào)用

6.4知識(shí)儲(chǔ)備6.4.3DOM更新回調(diào)$nextTick方法常見的用途包括：在修改數(shù)據(jù)后立即訪問更新后的DOM。在使用$refs訪問子組件時(shí)，保證子組件已經(jīng)創(chuàng)建完成。在使用第三方UI庫(kù)時(shí)，保證UI庫(kù)中的組件已經(jīng)正確渲染。

6.5任務(wù)實(shí)施6.5.1頁面結(jié)構(gòu)分析與搭建個(gè)人資料頁結(jié)構(gòu)分析1.新建頁面文件：文章詳情頁是社區(qū)模塊的二級(jí)頁面，可以通過點(diǎn)擊社區(qū)首頁文章列表中的文章卡片進(jìn)入。在/pages/community/目錄下新建名為“article-details”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為：“/pages/community/article-details/article-details.vue”2.設(shè)計(jì)圖分析：以評(píng)論區(qū)上方的水平分割線為界，可將頁面劃分為上下兩部分，上部分為文章詳情區(qū)域，下部分為文章評(píng)論區(qū)域。3.代碼實(shí)現(xiàn)：通過設(shè)計(jì)圖可知，在商品詳情頁中存在樣式相同的評(píng)論區(qū)，因此可將評(píng)論區(qū)域封裝為組件，從而提高代碼的復(fù)用性。

6.5任務(wù)實(shí)施6.5.2制作文章詳情區(qū)域子任務(wù)1：制作文章相關(guān)信息。文章相關(guān)信息部分分為左右結(jié)構(gòu)，左側(cè)內(nèi)容為文章發(fā)布者頭像、昵稱與文章發(fā)布時(shí)間，右側(cè)內(nèi)容為關(guān)注按鈕。關(guān)注按鈕具有未關(guān)注、已關(guān)注與互相關(guān)注三種狀態(tài)，不同狀態(tài)下的按鈕樣式也不相同。

6.5任務(wù)實(shí)施6.5.2制作文章詳情區(qū)域子任務(wù)2：制作文章主體信息部分。

文章主體信息部分為上下結(jié)構(gòu)，上方為標(biāo)題，下方為正文，正文中又包含文本和圖片。正文中的文字使用text組件展示，圖片使用image組件展示。

6.5任務(wù)實(shí)施6.5.2制作文章詳情區(qū)域子任務(wù)3：制作文章互動(dòng)部分。

文章互動(dòng)部分包含轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊三部分，每部分由圖標(biāo)和文字組成。點(diǎn)贊按鈕具有未點(diǎn)贊和已點(diǎn)贊兩種狀態(tài)，未點(diǎn)贊狀態(tài)下圖標(biāo)和文字為灰色，已點(diǎn)贊狀態(tài)下圖標(biāo)為主題色。Template部分

6.5任務(wù)實(shí)施6.5.2制作文章詳情區(qū)域JavaScript部分運(yùn)行效果圖

6.5任務(wù)實(shí)施6.5.3制作評(píng)論區(qū)域子任務(wù)1：新建組件文件。

在/components目錄下新建組件文件，文件命名為“common-comments”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/common-comments/common-comments.vue”。子任務(wù)2：制作評(píng)論標(biāo)題與列表部分。本模塊中評(píng)論分為一級(jí)評(píng)論和二級(jí)評(píng)論，每條評(píng)論為左右結(jié)構(gòu)。左側(cè)為評(píng)論者頭像，右側(cè)為評(píng)論相關(guān)信息，主要包括評(píng)論者昵稱、身份標(biāo)識(shí)、點(diǎn)贊按鈕、評(píng)論內(nèi)容、評(píng)論發(fā)布時(shí)間以及評(píng)論回復(fù)按鈕。二級(jí)評(píng)論與一級(jí)評(píng)論結(jié)構(gòu)相同，寬度與一級(jí)評(píng)論相關(guān)信息部分寬度相同，二級(jí)評(píng)論默認(rèn)折疊隱藏，點(diǎn)擊“展開回復(fù)”按鈕時(shí)顯示。當(dāng)一級(jí)評(píng)論列表為空時(shí)，顯示“暫無評(píng)論”圖片。二級(jí)評(píng)論列表為空時(shí)，不顯示“展開回復(fù)”按鈕。

6.5任務(wù)實(shí)施6.5.3制作評(píng)論區(qū)域子任務(wù)2：制作評(píng)論標(biāo)題與列表部分。Template部分

JavaScript部分

6.5任務(wù)實(shí)施6.5.3制作評(píng)論區(qū)域子任務(wù)3：制作發(fā)布評(píng)論的代碼Template部分

JavaScript部分運(yùn)行效果圖

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