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

任務(wù)6制作文章詳情頁(yè)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ū)首頁(yè)“文章列表”中的文章卡片可以進(jìn)入文章詳情頁(yè)，文章詳情頁(yè)包含文章的發(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ù)效果“文章詳情頁(yè)”效果圖

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小程序頁(yè)面轉(zhuǎn)發(fā)方法的使用。掌握Vue$nextTick回調(diào)延遲方法的使用。掌握Vuefilters過濾器方法的使用。掌握input組件always-embed和adjust-position屬性的用法。能夠使用組件提升代碼復(fù)用率。能夠使用onShareAppMessage方法實(shí)現(xiàn)轉(zhuǎn)發(fā)頁(yè)面的自定義信息設(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ì)將一些通用的組件抽象出來(lái)，例如按鈕、表單、模態(tài)框等，然后在不同的頁(yè)面中復(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è)新組件。通常情況下，組件的拓展可以通過繼承或者組合等方式來(lái)實(shí)現(xiàn)。在繼承方式中，可以通過繼承已有組件的方式來(lái)創(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()來(lái)獲取當(dāng)前平臺(tái)信息，并根據(jù)平臺(tái)信息動(dòng)態(tài)修改樣式。組件兼容性不同平臺(tái)支持的組件和屬性不同，需要開發(fā)者注意對(duì)應(yīng)組件和屬性的支持情況?？梢允褂脳l件渲染或者slot來(lái)動(dòng)態(tài)加載不同平臺(tái)的組件。API兼容性不同平臺(tái)支持的API不同，需要開發(fā)者使用條件編譯來(lái)針對(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()方法來(lái)保證在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頁(yè)面結(jié)構(gòu)分析與搭建個(gè)人資料頁(yè)結(jié)構(gòu)分析1.新建頁(yè)面文件：文章詳情頁(yè)是社區(qū)模塊的二級(jí)頁(yè)面，可以通過點(diǎn)擊社區(qū)首頁(yè)文章列表中的文章卡片進(jìn)入。在/pages/community/目錄下新建名為“article-details”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為：“/pages/community/article-details/article-details.vue”2.設(shè)計(jì)圖分析：以評(píng)論區(qū)上方的水平分割線為界，可將頁(yè)面劃分為上下兩部分，上部分為文章詳情區(qū)域，下部分為文章評(píng)論區(qū)域。3.代碼實(shí)現(xiàn)：通過設(shè)計(jì)圖可知，在商品詳情頁(yè)中存在樣式相同的評(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í)，顯示“暫無(wú)評(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ā)頁(yè)面和設(shè)計(jì)圖，核對(duì)字號(hào)、顏色、間距等設(shè)計(jì)參數(shù)

各個(gè)子組件能夠在文章詳情頁(yè)中正常展示頁(yè)面效果

點(diǎn)擊返回按鈕可返回上一級(jí)頁(yè)面

點(diǎn)擊展開與收起按鈕實(shí)現(xiàn)二級(jí)評(píng)論顯示狀態(tài)的切換

點(diǎn)擊點(diǎn)贊圖標(biāo)實(shí)現(xiàn)樣式切換

點(diǎn)擊關(guān)注按鈕實(shí)現(xiàn)樣式切換

點(diǎn)擊分享按鈕實(shí)現(xiàn)分享頁(yè)面的自定義信息設(shè)置

發(fā)布評(píng)論時(shí)間與當(dāng)前時(shí)間按差值格式化方式展示

點(diǎn)擊評(píng)論輸入框調(diào)起鍵盤實(shí)現(xiàn)輸入框懸浮狀態(tài)

6.7自學(xué)評(píng)價(jià)評(píng)價(jià)內(nèi)容是否了解/掌握是否能夠使用組件提升代碼復(fù)用率

能夠使用onShareAppMessage方法實(shí)現(xiàn)轉(zhuǎn)發(fā)頁(yè)面的自定義信息設(shè)置

能夠使用filters過濾器實(shí)現(xiàn)日期和時(shí)間格式化

能夠解決IOS系統(tǒng)中鍵盤調(diào)起后的輸入框被覆蓋的問題

6.8課后練習(xí)？1.選擇題（1）Vue中的回調(diào)延遲方法是什么？A.$setB.$extendC.$nextTickD.$mixin（2）Vue中過濾器可以用來(lái)做什么？A.格式化日期和時(shí)間B.實(shí)現(xiàn)組件復(fù)用C.提高代碼可讀性D.控制視圖更新（3）在uni-app中，input組件的adjust-position屬性有什么作用？A.鍵盤彈起時(shí)，是否自動(dòng)上推頁(yè)面B.固定輸入框大小C.輸入框中占位符的位置調(diào)整D.輸入框中文字的對(duì)齊方式調(diào)整2.填空題（1）uni-app中的單行輸入框組件名稱為————。（2