Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架） 課件 高秀艷 任務(wù)1-6 項目開發(fā)準(zhǔn)備- 制作文章詳情頁

任務(wù)1項目開發(fā)準(zhǔn)備Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS011.5任務(wù)實施1.7學(xué)習(xí)自評Part11.1任務(wù)描述1.2任務(wù)效果1.4知識儲備1.8課后練習(xí)1.9任務(wù)拓展1.3學(xué)習(xí)目標(biāo)1.6任務(wù)測試

本任務(wù)將完成“啟嘉校園”項目開始前的開發(fā)準(zhǔn)備工作，主要包括了解開發(fā)中使用的項目資源和項目資源使用方法，部署前、后端開發(fā)環(huán)境，以及創(chuàng)建項目開發(fā)目錄。

1.1任務(wù)描述

1.2任務(wù)效果任務(wù)效果圖

1.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識目標(biāo)通過搭建項目開發(fā)環(huán)境，增強學(xué)習(xí)者的系統(tǒng)思維能力，培養(yǎng)學(xué)習(xí)者養(yǎng)成統(tǒng)籌全局的習(xí)慣。通過學(xué)習(xí)MasterGo的使用，增強學(xué)習(xí)者合理使用工具和技術(shù)的能力，養(yǎng)成優(yōu)化方法，提高工作效率的習(xí)慣。

了解產(chǎn)品需求文檔的作用。了解頁面設(shè)計圖的作用。了解字體圖標(biāo)的作用。了解接口文檔的作用。掌握搭建前端開發(fā)環(huán)境的方法。掌握搭建后端開發(fā)環(huán)境的方法。能夠使用MasterGo查看項目設(shè)計圖。能夠在Windows操作系統(tǒng)中安裝HBuilderX。能夠在Windows操作系統(tǒng)中安裝微信開發(fā)者工具。能夠使用HBuilderX創(chuàng)建uni-app項目。能夠使用HBuilderX運行項目預(yù)覽效果。

1.4知識儲備1.4.1產(chǎn)品需求文檔

“啟嘉校園”產(chǎn)品需求文檔為在線文檔。在線文檔地址：

https://book.change.tm/u/a1。

1.4知識儲備1.4.2頁面設(shè)計圖

“啟嘉校園”設(shè)計圖地址：https://book.change.tm/u/a2。樣式標(biāo)注元素間距

1.4知識儲備1.4.2頁面設(shè)計圖

“啟嘉校園”設(shè)計圖地址：https://book.change.tm/u/a2。導(dǎo)出設(shè)計圖

1.4知識儲備1.4.3字體圖標(biāo)2定義使用iconfont的樣式3挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面拷貝項目面生成的font-face1unicode引用

1.4知識儲備1.4.3字體圖標(biāo)2挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面拷貝項目下面生成的fontclass代碼1font-class引用

1.4知識儲備1.4.4接口文檔

接口文檔即應(yīng)用程序接口的說明文檔，又稱為API文檔，

用來描述系統(tǒng)所提供接口信息的文檔。“啟嘉校園”接口文檔地址：https://book.change.tm/u/a5。

1.4知識儲備1.4.5項目源碼

讀者若需要完整代碼可以從啟嘉書盤中下載“啟嘉校園”項目源碼?！皢⒓涡@”項目源碼下載地址：https://book.change.tm/u/a6。

1.5任務(wù)實施1.5.1搭建前端開發(fā)環(huán)境下載安裝包打開官方下載地址https://www.dcloud.io/hbuilderx.html，點擊“DownloadforWindows”進(jìn)行下載解壓安裝包創(chuàng)建快捷方式打開HBuilderX將下載的HBuilderX壓縮包解壓到系統(tǒng)本地磁盤中，注意存放路徑不能包含中文。在解壓后的文件夾中找到HBuilderX.exe，右鍵創(chuàng)建桌面快捷方式，方便后期快速打開開發(fā)工具HBuilderX安裝完成，雙擊桌面HBuilderX快捷方式。安裝HBuilderX

1.5任務(wù)實施1.5.1搭建前端開發(fā)環(huán)境下載安裝包打開官方下載地址/miniprogram/dev/devtools/stable.html根據(jù)系統(tǒng)配置下載相應(yīng)安裝包安裝開發(fā)者工具雙擊下載的exe安裝包，根據(jù)提示進(jìn)行安裝即可安裝微信開發(fā)者工具

1.5任務(wù)實施1.5.2搭建后端開發(fā)環(huán)境使用瀏覽器打開下載頁面并下載exe安裝包，下載地址為：/p/change_other/d/change-campus/git/tree/template。1.下載安裝包檢查系統(tǒng)3306端口是否被占用注意Java程序和MySQL數(shù)據(jù)庫安裝路徑安裝過程會自動修改系統(tǒng)環(huán)境變量2.檢查安裝環(huán)境雙擊下載的exe安裝包，將自動進(jìn)行安裝，安裝成功后會提示“安裝成功”3.安裝后端開發(fā)環(huán)境點擊此處添加標(biāo)題點擊此處添加標(biāo)題點擊此處添加標(biāo)題哎呀小小草PPT模板請勿盜版點擊此處添加標(biāo)題點擊此處添加標(biāo)題點擊此處添加標(biāo)題點擊此處添加標(biāo)題哎呀小小草PPT模板請勿盜版點擊此處添加標(biāo)題

1.5任務(wù)實施1.5.3創(chuàng)建項目開發(fā)目錄設(shè)置項目名稱及路徑

1.5任務(wù)實施1.5.3創(chuàng)建項目開發(fā)目錄項目默認(rèn)目錄結(jié)構(gòu)

1.5任務(wù)實施1.5.3創(chuàng)建項目開發(fā)目錄

通過HBuilderX的“運行到小程序模擬器”功能可以運行項目預(yù)覽效果.

（1）在HBuilderX中配置開發(fā)者工具的安裝路徑：【運行】->【運行到

小程序模擬器】->【運行設(shè)置】，點擊“瀏覽”，選擇微信開發(fā)者工具安裝路徑。

（2）開啟微信開發(fā)者工具的服務(wù)端口選項：【設(shè)置】->【安全設(shè)置】，開啟“服務(wù)端口”。

（3）點擊HBuilderX頂部菜單中【運行】->【運行到小程序模擬器】->【微信開發(fā)者工具】調(diào)起微信開發(fā)者工具預(yù)覽項目效果

1.6任務(wù)測試測試條目是否通過在電腦中成功運行HBuilderX開發(fā)工具

在電腦中成功運行微信開發(fā)者工具

在電腦中部署后端開發(fā)環(huán)境，啟動Java、MySQL相關(guān)服務(wù)

使用HBuilderX成功創(chuàng)建“啟嘉校園”項目開發(fā)目錄

1.7自學(xué)評價評價內(nèi)容是否了解/掌握是否了解產(chǎn)品需求文檔的作用

是否了解頁面設(shè)計圖的作用

是否了解字體圖標(biāo)的作用

是否了解接口文檔的作用

是否掌握前端開發(fā)環(huán)境搭建

是否掌握后端開發(fā)環(huán)境搭建

是否了解創(chuàng)建項目流程

是否了解項目目錄結(jié)構(gòu)

1.8課后練習(xí)？1.選擇題（1）下列哪個選項不是uni-app的特點？A.使用Vue.js開發(fā)，一次開發(fā)多端發(fā)布B.豐富的API接口，可實現(xiàn)復(fù)雜功能C.只能發(fā)布到微信小程序、支付寶小程序等平臺D.支持在HBuilderX中直接創(chuàng)建uni-app項目（2）下列哪個文件或文件夾是uni-app項目中不存在的？A.app.vueB.main.jsC.pages.jsonD.uni.js（3）下列哪個選項不是HBuilderX的特點？A.支持微信小程序開發(fā)B.具備代碼提示和自動補全功能C.可以直接在編輯器中預(yù)覽代碼效果D.只能用于開發(fā)移動端應(yīng)用2.填空題（1）uni-app項目中的頁面文件通常存放在_____的文件夾中。（2）uni-app項目中的樣式文件通常存放在______的文件夾中。3.簡答題（1）簡述uni-app項目的主要目錄結(jié)構(gòu)及作用。

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

除了本任務(wù)講解的項目開發(fā)準(zhǔn)備外，在實際工作中為了確保項目順利進(jìn)行，還需要的準(zhǔn)備工作一般包括：（1）制定項目計劃；

（2）風(fēng)險管理;

（3）質(zhì)量管理;

（4）溝通協(xié)調(diào);

（5）培訓(xùn)和技術(shù)支持;

（6）文檔管理;

（7）環(huán)境安全;

（8）反饋和持續(xù)改進(jìn)。

這些準(zhǔn)備工作對于項目的成功至關(guān)重要，需要認(rèn)真對待每一個環(huán)節(jié)，確保項目能夠按時、按要求完成。任務(wù)2：制作個人中心頁Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS012.5任務(wù)實施2.7學(xué)習(xí)自評Part12.1任務(wù)描述2.2任務(wù)效果2.4知識儲備2.8課后練習(xí)2.9任務(wù)拓展2.3學(xué)習(xí)目標(biāo)2.6任務(wù)測試

本任務(wù)將制作“啟嘉校園”項目的個人中心頁，主要內(nèi)容包括用戶頭像、昵稱、ID、商品管理和賬號認(rèn)證等。

2.1任務(wù)描述

2.2任務(wù)效果

a)未登錄狀態(tài)b)已登錄狀態(tài)c)“聯(lián)系我們”模態(tài)框

2.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識目標(biāo)通過給新建變量、類選擇器等命名樹立規(guī)范命名的編程意識。通過項目使用的國產(chǎn)跨平臺移動應(yīng)用開發(fā)框架uni-app，培養(yǎng)學(xué)習(xí)者的愛國情懷，增強科技創(chuàng)新的自信心。

通過以學(xué)生社交生態(tài)為主題的項目開發(fā)，提高學(xué)習(xí)者科技賦能數(shù)字生活的意識。通過任務(wù)拓展“二手”功能的實現(xiàn)培養(yǎng)學(xué)習(xí)者樹立堅持節(jié)約優(yōu)先，持續(xù)發(fā)展的理念。了解移動端尺寸單位。掌握頁面路由和自定義導(dǎo)航欄的配置。掌握uni-appview視圖容器組件的使用。掌握uni-apppopup彈出層組件的使用。掌握uni-apptext基礎(chǔ)內(nèi)容組件的使用。掌握uni-app擴展組件的使用。掌握Sass基礎(chǔ)語法。能夠使用MasterGo查看設(shè)計圖標(biāo)注信息。能夠使用uni-app視圖容器組件搭建靜態(tài)頁面結(jié)構(gòu)。能夠使用Sass預(yù)處理器修飾頁面樣式。

2.4知識儲備scroll-view視圖容器組件scroll-view是uni-app框架中的一個組件，用于創(chuàng)建可滾動的視圖區(qū)域。觸摸事件touch在uni-app中，可以使用touch事件來監(jiān)聽觸摸屏幕的交互操作，如滑動、按下、松開等，可以針對這些事件進(jìn)行相應(yīng)的響應(yīng)操作。頁面生命周期在uni-app中，頁面生命周期指的是頁面從創(chuàng)建到銷毀的整個過程所經(jīng)歷的一系列事件。導(dǎo)航欄uni-app支持使用原生導(dǎo)航欄和自定義導(dǎo)航欄兩種方式來展示頁面導(dǎo)航信息，下面分別介紹這兩種方式。底部tabbartabBar是移動端應(yīng)用常見的標(biāo)簽欄，用于實現(xiàn)頁面之間的快速切換，小程序中通常將其分為底部tabBar和頂部tabBar。

2.5任務(wù)實施新建頁面文件“my”運行結(jié)果2.5.1頁面結(jié)構(gòu)分析與搭建

2.5任務(wù)實施頁面結(jié)構(gòu)分為3部分2.5.1頁面結(jié)構(gòu)分析與搭建

2.5任務(wù)實施引入字體圖標(biāo)設(shè)計圖分析代碼實現(xiàn)通過HBuilderX下載和安裝uni-ui組件庫中的組件uni-icons，用來展示我們之前引入的字體圖標(biāo)。2.5.2制作頭部區(qū)域

2.5任務(wù)實施注意：在同一個項目中，所有頁面都會遵循同一個設(shè)計規(guī)范，如規(guī)定的主題色系、標(biāo)題字號、正文字號、元素間距等等，一般在開發(fā)中會將這些規(guī)范樣式定義成變量或方法，CSS本身并不支持定義變量和方法，但是可以使用Sass預(yù)處理器去實現(xiàn)，

a)login為tureb)login為false公共樣式文件目錄2.5.2制作頭部區(qū)域

2.5任務(wù)實施原生導(dǎo)航欄文件路徑：/pages.json："globalStyle":{"navigationStyle":"custom"},自定義導(dǎo)航欄2.5.3制作自定義導(dǎo)航欄

2.5任務(wù)實施膠囊按鈕和設(shè)備狀態(tài)欄發(fā)生了重疊

頭部區(qū)域距頂部存在一段距離，為小程序膠囊按鈕和設(shè)備狀態(tài)欄的高度之和。this.topPadding=statusBarHeight+titleBarHeight;導(dǎo)航欄高度適配2.5.3制作自定義導(dǎo)航欄

2.5任務(wù)實施弧形區(qū)域是使用直徑420px的橢圓制作的，可換算為840rpx。結(jié)合屏幕寬度750rpx，弧形區(qū)域需向左偏移45rpx，以達(dá)到居中效果。2.5.4制作圓弧及功能列表區(qū)域

2.5任務(wù)實施

如何實現(xiàn)拖動下拉時，圓弧與功能列表位置下移，結(jié)束拖動下拉時，圓弧與功能列表回歸原位？

通過監(jiān)聽用戶觸摸屏幕事件，獲取用戶拖動位移的數(shù)值。當(dāng)位移的數(shù)值超過指定大小時，通過改變圓弧及功能列表區(qū)域包裹容器的縱向平移屬性translateY實現(xiàn)拖動下拉效果。2.5.4制作圓弧及功能列表區(qū)域

2.5任務(wù)實施文件路徑：/pages.json：{"tabBar":{"color":"#999999",//文字顏色"selectedColor":"#000",//選中狀態(tài)下文字顏色

"borderStyle":"black",//上邊框顏色，可選值：black、white"backgroundColor":"#ffffff",//背景顏色"list":[{

//tab列表"pagePath":"pages/community/community",//頁面路徑"text":"社區(qū)",//文本內(nèi)容"iconPath":"static/tab-icons/community.png",//圖標(biāo)路徑

//選中狀態(tài)下圖片路徑"selectedIconPath":"static/tab-icons/community-active.png"},/*省略其余代碼*/]}}2.5.5制作底部標(biāo)簽欄區(qū)域

2.5任務(wù)實施模態(tài)框的uni-popup彈出層組件：<uni-popupref="contact"><view><image

src="/static/cat.png"mode="widthFix"></image><view>

<text>聯(lián)系我們</text>

<text>QQ：1020304050</text>

<text>微信：changewechat</text></view></view></uni-popup>2.5.6制作“聯(lián)系我們”模態(tài)框

2.5任務(wù)實施

JavaScript部分：

通過$refs獲取名為contact的彈出層組件并調(diào)用open方法，打開彈出層。handleOpenContact(){this.$refs.contact.open()}2.5.6制作“聯(lián)系我們”模態(tài)框

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

修改login變量布爾值，實現(xiàn)個人中心頁登錄和未登錄狀態(tài)的切換

點擊”聯(lián)系我們“按鈕，彈出模態(tài)框；點擊遮罩層關(guān)閉模態(tài)框

點擊底部標(biāo)簽欄，實現(xiàn)頁面切換；選中的tab高亮顯示

拖動時圓弧及功能列表區(qū)域可實現(xiàn)下拉效果

2.7自學(xué)評價評價內(nèi)容是否了解/掌握是否了解移動端尺寸單位的換算規(guī)則

是否掌握自定義導(dǎo)航欄配置

是否掌握如何分析設(shè)計圖

是否掌握flex布局的應(yīng)用

是否掌握Sass的使用

2.8課后練習(xí)？1.選擇題（1）在uni-app中，以下哪個組件可以用于自定義導(dǎo)航欄？A.viewB.popupC.textD.navigationBar（2）在uni-app中，以下哪個組件可以用于創(chuàng)建彈出層？A.viewB.popupC.textD.navigationBar（3）在uni-app中，以下哪個語法可以用于定義Sass變量？A.$var:valueB.#var:valueC.var:valueD.@var:value2.填空題（1）在uni-app中

組件可以用于創(chuàng)建滾動視圖容器。（2）uni-app中的頁面路由配置文件是

。3.簡答題（1）簡述uni-app自定義導(dǎo)航欄和標(biāo)簽欄的配置方法。

2.9任務(wù)拓展任務(wù)拓展功能拓展根據(jù)設(shè)計圖，實現(xiàn)“二手”首頁頁面部分效果。案例拓展

小張中標(biāo)了某鄉(xiāng)村旅游平臺小程序項目，負(fù)責(zé)開發(fā)小程序的個人中心頁面。二手頁面效果圖任務(wù)3制作個人資料頁Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS013.5任務(wù)實施3.7學(xué)習(xí)自評Part13.1任務(wù)描述3.2任務(wù)效果3.4知識儲備3.8課后練習(xí)3.9任務(wù)拓展3.3學(xué)習(xí)目標(biāo)3.6任務(wù)測試

本任務(wù)將制作“啟嘉校園”項目的個人資料頁面，該頁面主要用于修改用戶基本信息，包括用戶的頭像、昵稱、個性簽名、性別、手機號和微信號。

3.1任務(wù)描述

3.2任務(wù)效果個人資料頁效果圖

3.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識目標(biāo)通過學(xué)習(xí)使用正則表達(dá)式完成手機號、微信號等信息的驗證的方法，培養(yǎng)學(xué)習(xí)者發(fā)現(xiàn)問題、分析問題、解決問題的能力。通過實現(xiàn)“用戶擴展資料區(qū)域”中用戶信息顯示的功能，強化學(xué)習(xí)者個人信息保護(hù)意識。通過鞏固拓展的練習(xí)，培養(yǎng)學(xué)習(xí)者腳踏實地、躬身力行的實踐精神。掌握uni-apppicker滾動選擇器組件的使用。掌握uni-appinput單行輸入框組件的使用。掌握uni-appimage圖片組件的使用。掌握uni.showToast消息提示方法的使用。掌握uni-app頁面跳轉(zhuǎn)方法的使用。掌握正則表達(dá)式的使用。能夠使用picker組件完成滾動選擇性別。能夠使用input組件完成內(nèi)容的輸入。能夠使用image組件完成圖像的展示及縮放、裁剪等操作。能夠使用uni.showToast方法完成消息提示。能夠使用uni-app頁面跳轉(zhuǎn)方法實現(xiàn)頁面間跳轉(zhuǎn)。能夠使用正則表達(dá)式完成手機號、微信號等信息的驗證。

3.4知識儲備屬性名類型默認(rèn)值說明平臺差異說明rangeArray/Array<Object>[]mode為selector或multiSelector時，range有效range-keyString當(dāng)range是一個Array＜Object＞時，通過range-key來指定Object中key的值作為選擇器顯示內(nèi)容3.4.1picker組件

picker組件是一種能夠在移動端應(yīng)用中選擇一項或多項數(shù)據(jù)的UI組件，可從底部彈起。支持五種選擇器分別為：普通選擇器、多列選擇器、時間選擇器、日期選擇器、省市區(qū)選擇器，默認(rèn)為普通選擇器。@changeEventHandlevalue改變時觸發(fā)change事件，event.detail={value:value}

3.4知識儲備3.4.2input組件

input組件是一種常用的表單輸入控件，用于接收用戶輸入的數(shù)據(jù)。它支持多種類型的輸入，如文本、數(shù)字、密碼等，也支持自定義輸入框樣式、事件等。屬性名類型默認(rèn)值說明平臺差異說明confirm-typeStringdone設(shè)置鍵盤右下角按鈕的文字，僅在type="text"時生效微信小程序、App、H5、快手小程序、京東小程序confirm-holdBooleanfalse點擊鍵盤右下角按鈕時是否保持鍵盤不收起App(3.3.7+)、H5(3.3.7+)、微信小程序、支付寶小程序、百度小程序、QQ小程序、京東小程序@inputEventHandle當(dāng)鍵盤輸入時，觸發(fā)input事件，event.detail={value}@confirmEventHandle點擊完成按鈕時觸發(fā)，event.detail={value:value}快手小程序不支持

3.4知識儲備屬性名類型默認(rèn)值說明平臺差異說明srcString圖片資源地址modeString'scaleToFill'圖片裁剪、縮放的模式lazy-loadBooleanfalse圖片懶加載。只針對page與scroll-view下的image有效微信小程序、百度小程序、抖音小程序、飛書小程序show-menu-by-longpressbooleanfalse開啟長按圖片顯示識別小程序碼菜單微信小程序2.7.0@errorHandleEvent當(dāng)錯誤發(fā)生時，發(fā)布到AppService的事件名，事件對象event.detail={errMsg:'somethingwrong'}@loadHandleEvent當(dāng)圖片載入完畢時，發(fā)布到AppService的事件名，事件對象event.detail={height:'圖片高度px',width:'圖片寬度px'}3.4.3image組件

image組件在移動端的使用與在Web端類似，都是用于展示圖片的UI組件，可以加載本地圖片或網(wǎng)絡(luò)圖片。

3.4知識儲備常用提示框案例showToast消息提示框uni.showToast({title:'操作成功',icon:'success',duration:2000})showLoading加載提示框uni.showLoading({title:'加載中',mask:true})showModal模態(tài)框uni.showModal({title:'提示',content:'確定刪除該記錄嗎？',success(res){if(res.confirm){console.log('用戶點擊確定')}elseif(res.cancel){console.log('用戶點擊取消')}}})showActionSheet列表選擇提示框uni.showActionSheet({itemList:['選項一','選項二','選項三'],success(res){console.log('用戶點擊了',res.tapIndex+1,'號選項')},fail(res){console.log(res.errMsg)}})3.4.4uni-app常用提示框

3.4知識儲備3.4.5頁面跳轉(zhuǎn)頁面跳轉(zhuǎn)方法作用案例uni.navigateTo方法保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，可通過uni.navigateBack返回到原頁面//跳轉(zhuǎn)到目標(biāo)頁面uni.navigateTo({url:'/pages/target/target'})uni.redirectTo方法關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面//跳轉(zhuǎn)到目標(biāo)頁面uni.redirectTo({url:'/pages/target/target'})uni.navigateBack方法關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面//返回上一頁面uni.navigateBack()//返回多級頁面uni.navigateBack({delta:2})

3.5任務(wù)實施3.5.1頁面結(jié)構(gòu)分析與搭建個人資料頁結(jié)構(gòu)分析1.新建頁面文件：在/pages/my目錄下新建名為“material”的Vue文件。2.搭建個人資料頁結(jié)構(gòu)：根據(jù)個人資料頁中內(nèi)容相關(guān)度進(jìn)行頁面結(jié)構(gòu)劃分為用戶基本資料區(qū)域和用戶擴展資料區(qū)域。3.實現(xiàn)跳轉(zhuǎn)到個人資料頁：用戶通過點擊個人中心頁的“個人資料”按鈕可以跳轉(zhuǎn)至個人資料頁。

3.5任務(wù)實施3.5.2制作用戶基本資料區(qū)域用戶基本資料區(qū)域結(jié)構(gòu)分析

3.5任務(wù)實施3.5.2制作用戶基本資料區(qū)域

為了使靜態(tài)頁面效果更加貼近設(shè)計圖效果，在靜態(tài)頁面制作部分我們會先使用Vue模擬一些靜態(tài)數(shù)據(jù)填充到頁面中，在后面功能實現(xiàn)部分的任務(wù)中，再通過后端接口獲取真實數(shù)據(jù)替換靜態(tài)數(shù)據(jù)。Template部分JavaScript部分

3.5任務(wù)實施3.5.3制作用戶擴展資料區(qū)域用戶擴展資料區(qū)域結(jié)構(gòu)分析

3.5任務(wù)實施3.5.3制作用戶擴展資料區(qū)域用戶擴展資料區(qū)域結(jié)構(gòu)細(xì)分效果要求：1.用戶ID是注冊時系統(tǒng)自動生成的用戶唯一標(biāo)識，不支持修改。2.用戶性別為保密、男、女三個選項，可以使用uni-app中的picker滾動選擇器組件進(jìn)行切換。3.點擊用戶手機號或微信號部分的編輯圖標(biāo)時，文本內(nèi)容切換為文本輸入框，編輯圖標(biāo)隱藏。4.手機號和微信號非必填；昵稱不允許為空，長度最大為8位；個性簽名允許為空，長度最大為60位。

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

實現(xiàn)個人中心頁和個人資料頁的跳轉(zhuǎn)

手機號和微信號處于修改狀態(tài)時，編輯圖標(biāo)隱藏；修改完成后，光標(biāo)失焦，編輯圖標(biāo)顯示

保存信息時，輸入內(nèi)容符合驗證規(guī)則，提示保存成功并返回到個人中心頁；不符合驗證規(guī)則，做出相應(yīng)錯誤提示

3.7自學(xué)評價評價內(nèi)容是否了解/掌握是否掌握picker滾動選擇器的使用

是否了解uni-appinput組件的使用

是否掌握uni-appimage組件的使用

是否掌握uni.showToast消息提示方法的使用

是否掌握uni-app頁面跳轉(zhuǎn)方法的使用

是否掌握正則表達(dá)式的使用

3.8課后練習(xí)？1.選擇題（1）在uni-app中，以下哪個組件可以用于創(chuàng)建滾動選擇器？A.pickerB.selectC.dropdownD.autocomplete（2）在uni-app中，以下哪種方法可以用于頁面跳轉(zhuǎn)？A.uni.navigateTo()B.uni.navigateBack()C.uni.redirectTo()D.uni.switchTab()（3）在uni-app中，以下哪個方法可以用于監(jiān)聽輸入框的輸入事件？A.@inputB.@changeC.@focusD.@blur2.填空題（1）uni-app中的單行輸入框組件名稱為————。（2）在uni-app中，設(shè)置滾動選擇器的樣式屬性為——。3.簡答題（1）簡述uni-app中如何進(jìn)行頁面的路由跳轉(zhuǎn)。

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

請根據(jù)設(shè)計圖，完成個人中心頁“賬號認(rèn)證”二級頁面的制作。在個人中心頁點擊賬號認(rèn)證按鈕可跳轉(zhuǎn)至賬號認(rèn)證頁。

學(xué)校與院系可以聯(lián)動選擇。姓名只允許為中文，長度最大為4位。學(xué)號只允許為數(shù)字。點擊認(rèn)證時，對輸入內(nèi)容進(jìn)行校驗，不符合上述規(guī)則進(jìn)行相應(yīng)信息提示，符合上述規(guī)則認(rèn)證成功，返回上級頁面。任務(wù)4制作社區(qū)首頁Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS014.5任務(wù)實施4.7學(xué)習(xí)自評Part14.1任務(wù)描述4.2任務(wù)效果4.4知識儲備4.8課后練習(xí)4.9任務(wù)拓展4.3學(xué)習(xí)目標(biāo)4.6任務(wù)測試

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

4.1任務(wù)描述

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

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

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

4.4知識儲備什么是組件化開發(fā)組件化開發(fā)是一種將軟件系統(tǒng)劃分為多個獨立模塊并按照功能組合起來的開發(fā)方式。每個模塊都可以獨立開發(fā)、測試、部署，同時也可以被其他模塊調(diào)用和重用。uni-app組件化開發(fā)的好處uni-app是一種跨平臺的開發(fā)框架，它支持將一個組件同時應(yīng)用于多個平臺,可以提高代碼復(fù)用性、開發(fā)效率、協(xié)作效率、用戶體驗。組件化開發(fā)的應(yīng)用場景uni-app的組件化開發(fā)可以應(yīng)用于各種類型的應(yīng)用程序開發(fā)，如社交、電商、新聞、音樂、游戲等。組件化應(yīng)用easycom組件自動注冊方式：首先，在pages.json或components.json中聲明組件的名稱和路徑，其次，在組件的Vue文件中，將name屬性設(shè)置為/組件名4.4.1uni-app組件化

4.4知識儲備4.4.2uni-easyinput輸入框組件輸入框帶左右圖標(biāo)<!--輸入框頭部/尾部圖標(biāo)--><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:'分享標(biāo)題',

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:'分享標(biāo)題',

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ù)指定選擇圖片的大小類型。預(yù)覽圖片使用uni.previewImage可以預(yù)覽一張或多張圖片，支持手勢縮放、雙擊放大等功能。保存圖片到相冊使用uni.saveImageToPhotosAlbum可以將一張圖片保存到手機相冊中，用戶可以在相冊中查看保存的圖片。圖片上傳使用uni.uploadFile方法將圖片上傳到服務(wù)器，需要指定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任務(wù)實施4.5.1頁面結(jié)構(gòu)分析與搭建新建頁面文件：在/pages/my目錄下新建名為“community”的Vue文件，在新建文件時勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/community.vue”社區(qū)首頁結(jié)構(gòu)分析

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

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

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

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

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

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

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

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

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

4.5任務(wù)實施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組件用于設(shè)置可拖動的范圍，movable-view組件為可拖動對象。返回頂部按鈕默認(rèn)隱藏，用戶下滑屏幕時顯示；返回頂部按鈕不可拖動。封裝懸浮按鈕組件：快捷發(fā)布按鈕始終顯示，且可拖動改變位置。

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

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

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

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

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

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

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

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

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

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

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

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

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

4.8課后練習(xí)？1.選擇題（1）usni-app中的easyinput組件的主要功能是什么？A.增強輸入框的功能，提供更多的輸入方式B.簡化輸入框的使用，方便用戶快速輸入C.提供輸入框的樣式定制，讓輸入框更加美觀D.提高輸入框的性能，讓輸入更加流暢（2）onShareAppMessage方法在uni-app中的作用是什么？A.用于在用戶點擊分享按鈕時觸發(fā)的方法B.用于在小程序頁面中進(jìn)行轉(zhuǎn)發(fā)的操作C.用于獲取當(dāng)前頁面的信息，以便于分享出去D.用于設(shè)置當(dāng)前頁面的標(biāo)題和描述信息（3）uni.previewImage方法在uni-app中的作用是什么？A.用于預(yù)覽圖片，提供圖片的縮放和滾動功能B.用于選擇圖片，讓用戶從相冊中選擇圖片C.用于上傳圖片，將圖片上傳到服務(wù)器D.用于獲取圖片信息，獲取圖片的詳細(xì)信息2.填空題（1）uni-app中提供可拖動的區(qū)域，讓用戶在這個區(qū)域內(nèi)進(jìn)行拖動操作的組件是_____。（2）uni-app中用于打開相冊，讓用戶選擇圖片的組件是____。3.簡答題（1）簡述組件化開發(fā)的作用。

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

根據(jù)設(shè)計圖，實現(xiàn)“二手”首頁頁面效果。對選項卡最新/最熱頁簽切換可實現(xiàn)商品列表的改變使用組件化思想實現(xiàn)商品卡片組件的開發(fā)使用Waterfall瀑布流組件實現(xiàn)商品列表中商品的展示上滑屏幕時標(biāo)題區(qū)域懸浮置頂顯示返回頂部按鈕默認(rèn)隱藏，下滑屏幕時顯示快捷發(fā)布按鈕可拖動到任意位置任務(wù)5制作文章發(fā)布頁Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

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

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

5.1任務(wù)描述

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

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

5.4知識儲備5.4.2正則表達(dá)式

本書將在多處使用正則表達(dá)式，以下是一些常用正則表達(dá)式的案例：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任務(wù)實施5.5.1頁面結(jié)構(gòu)分析與搭建新建頁面文件：在/pages/community/目錄下新建名為“publish-article”的Vue文件，在新建文件時勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/publish-article/publish-article.vue”。文章發(fā)布頁結(jié)構(gòu)分析

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

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

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

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

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

5.5任務(wù)實施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)圖片列表寬度超過屏幕寬度時出現(xiàn)橫向滾動條。設(shè)計圖分析

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

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

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

要求：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.1任務(wù)描述

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

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

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

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

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