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

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

目錄CONTENTS015.5任務實施5.7學習自評Part15.1任務描述5.2任務效果5.4知識儲備5.8課后練習5.9任務拓展5.3學習目標5.6任務測試

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

5.1任務描述

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

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

5.4知識儲備

元素遮罩層是指將一個元素覆蓋在另一個元素上，從而實現(xiàn)遮罩的效果。實現(xiàn)元素遮罩層時，通常需要使用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元素是一個全屏的遮罩層，使用position:absolute定位將其覆蓋在content元素上。為overlay元素設置一個較高的z-index值以確保能夠位于content元素上方。

5.4知識儲備5.4.2正則表達式

本書將在多處使用正則表達式，以下是一些常用正則表達式的案例：01.//匹配手機號碼02./^1[3-9]\d{9}$/03.//匹配身份證號碼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任務實施5.5.1頁面結構分析與搭建新建頁面文件：在/pages/community/目錄下新建名為“publish-article”的Vue文件，在新建文件時勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/publish-article/publish-article.vue”。文章發(fā)布頁結構分析

5.5任務實施5.5.2制作導航欄區(qū)域新建組件文件：

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

5.5任務實施5.5.3制作文字信息區(qū)域文字信息區(qū)域運行效果

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

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

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

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

5.5任務實施5.5.4制作上傳圖片區(qū)域上傳圖片區(qū)域運行效果

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

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

要求：

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

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

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

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

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

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

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

圖片上傳成功后能夠進行圖片的預覽與刪除操作

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

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

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

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

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

是否能夠使用正則表達式完成文章信息驗證

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

5.8課后練習？1.選擇題（1）在制作元素遮罩層時，使用以下哪個屬性可以設置元素的層級？A.indexB.positionC.z-indexD.line-height（2）以下哪個選項是手機號正則表達式的正確寫法？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ā)布頁中，以下哪個變量表示設備狀態(tài)欄高度？A.phoneBarHeightB.statusBarHeightC.navHeightD.titleBarHeight2.填空題（1）匹配郵政編碼（中國大陸）的正則表達式是_____。（2）在從社區(qū)首頁跳轉到文章發(fā)布頁時，通過在跳轉地址中添加_____參數(shù)，傳遞分類信息索引。3.簡答題（1）簡述通過操作數(shù)組對象實現(xiàn)圖片刪除功能的具體步驟。

5.9任務拓展任務拓展

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

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

6.1任務描述

6.2任務效果“文章詳情頁”效果圖

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

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

6.4知識儲備6.4.1組件復用與拓展具體實例請參見教材6.4.1節(jié)。

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

6.4知識儲備6.4.3DOM更新回調

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

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

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

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

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

文章主體信息部分為上下結構，上方為標題，下方為正文，正文中又包含文本和圖片。正文中的文字使用text組件展示，圖片使用image組件展示。

6.5任務實施6.5.2制作文章詳情區(qū)域子任務3：制作文章互動部分。

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

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

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

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

6.5任務實施6.5.3制作評論區(qū)域子任務2：制作評論標題與列表部分。Template部分

JavaScript部分

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

JavaScript部分運行效果圖

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