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

任務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ā)布時間、標題、正文等內(nèi)容，用戶可對文章內(nèi)容進行瀏覽、關注、轉發(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回調(diào)延遲方法的使用。掌握Vuefilters過濾器方法的使用。掌握input組件always-embed和adjust-position屬性的用法。能夠使用組件提升代碼復用率。能夠使用onShareAppMessage方法實現(xiàn)轉發(fā)頁面的自定義信息設置。能夠使用filters過濾器實現(xiàn)日期和時間格式化。能夠解決IOS系統(tǒng)中鍵盤調(diào)起后的輸入框被覆蓋的問題。。

6.4知識儲備6.4.1組件復用與拓展組件的復用和拓展是兩個緊密相關的概念，它們都是為了提高代碼的可復用性和可維護性。組件的復用是指在不同場景下使用同一個組件的能力，而組件的拓展則是指在已有組件的基礎上進行修改和擴展，從而創(chuàng)建一個新的組件。在實際開發(fā)中，通常會將一些通用的組件抽象出來，例如按鈕、表單、模態(tài)框等，然后在不同的頁面中復用這些組件。組件復用可通過多種方式實現(xiàn)，例如：利用props傳遞數(shù)據(jù)，使子組件能根據(jù)父組件傳遞的數(shù)據(jù)進行定制化渲染；使用插槽，讓父組件能插入自定義內(nèi)容，使子組件更靈活；使用高階組件，將組件邏輯封裝為函數(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ā)者針對不同平臺進行樣式調(diào)整。可以使用平臺判斷工具，例如uni.getSystemInfoSync()來獲取當前平臺信息，并根據(jù)平臺信息動態(tài)修改樣式。組件兼容性不同平臺支持的組件和屬性不同，需要開發(fā)者注意對應組件和屬性的支持情況。可以使用條件渲染或者slot來動態(tài)加載不同平臺的組件。API兼容性不同平臺支持的API不同，需要開發(fā)者使用條件編譯來針對不同平臺編寫不同的API調(diào)用代碼。生命周期兼容性不同平臺的生命周期可能存在差異，需要開發(fā)者注意不同平臺的生命周期差異并進行針對性調(diào)整性能兼容性不同平臺的性能表現(xiàn)不同，需要開發(fā)者注意調(diào)整性能瓶頸。

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

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

6.4知識儲備6.4.3DOM更新回調(diào)$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：制作文章相關信息。文章相關信息部分分為左右結構，左側內(nèi)容為文章發(fā)布者頭像、昵稱與文章發(fā)布時間，右側內(nèi)容為關注按鈕。關注按鈕具有未關注、已關注與互相關注三種狀態(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：制作評論標題與列表部分。本模塊中評論分為一級評論和二級評論，每條評論為左右結構。左側為評論者頭像，右側為評論相關信息，主要包括評論者昵稱、身份標識、點贊按鈕、評論內(nèi)容、評論發(fā)布時間以及評論回復按鈕。二級評論與一級評論結構相同，寬度與一級評論相關信息部分寬度相同，二級評論默認折疊隱藏，點擊“展開回復”按鈕時顯示。當一級評論列表為空時，顯示“暫無評論”圖片。二級評論列表為空時，不顯示“展開回復”按鈕。

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

JavaScript部分

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

JavaScript部分運行效果圖

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

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

點擊返回按鈕可返回上一級頁面

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

點擊點贊圖標實現(xiàn)樣式切換

點擊關注按鈕實現(xiàn)樣式切換

點擊分享按鈕實現(xiàn)分享頁面的自定義信息設置

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

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

6.7自學評價評價內(nèi)容是否了解/掌握是否能夠使用組件提升代碼復用率

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

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

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

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