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

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

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

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

1.1任務(wù)描述

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

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

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

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

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

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

1.4知識(shí)儲(chǔ)備1.4.2頁(yè)面設(shè)計(jì)圖

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

1.4知識(shí)儲(chǔ)備1.4.2頁(yè)面設(shè)計(jì)圖

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

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

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

1.4知識(shí)儲(chǔ)備1.4.4接口文檔

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

用來(lái)描述系統(tǒng)所提供接口信息的文檔?！皢⒓涡@”接口文檔地址：https://book.change.tm/u/a5。

1.4知識(shí)儲(chǔ)備1.4.5項(xiàng)目源碼

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

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

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

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

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

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

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

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

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

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

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

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

1.6任務(wù)測(cè)試測(cè)試條目是否通過(guò)在電腦中成功運(yùn)行HBuilderX開(kāi)發(fā)工具

在電腦中成功運(yùn)行微信開(kāi)發(fā)者工具

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

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

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

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

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

是否了解接口文檔的作用

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

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

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

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

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

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

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

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

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

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

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

（6）文檔管理;

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

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

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

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

本任務(wù)將制作“啟嘉校園”項(xiàng)目的個(gè)人中心頁(yè)，主要內(nèi)容包括用戶(hù)頭像、昵稱(chēng)、ID、商品管理和賬號(hào)認(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)知識(shí)目標(biāo)通過(guò)給新建變量、類(lèi)選擇器等命名樹(shù)立規(guī)范命名的編程意識(shí)。通過(guò)項(xiàng)目使用的國(guó)產(chǎn)跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架uni-app，培養(yǎng)學(xué)習(xí)者的愛(ài)國(guó)情懷，增強(qiáng)科技創(chuàng)新的自信心。

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

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

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

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

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

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

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

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

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

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

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

2.5任務(wù)實(shí)施

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

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

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

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

//tab列表"pagePath":"pages/community/community",//頁(yè)面路徑"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ù)實(shí)施模態(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ù)實(shí)施

JavaScript部分：

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

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

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

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

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

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

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

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

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

是否掌握f(shuō)lex布局的應(yīng)用

是否掌握Sass的使用

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

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

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

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

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

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

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

3.1任務(wù)描述

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

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

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

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

3.4知識(shí)儲(chǔ)備3.4.2input組件

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

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

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

3.4知識(shí)儲(chǔ)備常用提示框案例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('用戶(hù)點(diǎn)擊確定')}elseif(res.cancel){console.log('用戶(hù)點(diǎn)擊取消')}}})showActionSheet列表選擇提示框uni.showActionSheet({itemList:['選項(xiàng)一','選項(xiàng)二','選項(xiàng)三'],success(res){console.log('用戶(hù)點(diǎn)擊了',res.tapIndex+1,'號(hào)選項(xiàng)')},fail(res){console.log(res.errMsg)}})3.4.4uni-app常用提示框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.1任務(wù)描述

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

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

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

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

4.4知識(shí)儲(chǔ)備4.4.2uni-easyinput輸入框組件輸入框帶左右圖標(biāo)<!--輸入框頭部/尾部圖標(biāo)--><uni-easyinputprefixIcon/suffixIcon="search"v-model="value"placeholder="請(qǐng)輸入內(nèi)容"@iconClick="onClick"></uni-easyinput>輸入框禁用<uni-easyinputdisabledv-model="value"placeholder="請(qǐng)輸入內(nèi)容"></uni-easyinput>密碼框<uni-easyinputtype="password"v-model="password"placeholder="請(qǐng)輸入密碼"></uni-easyinput>輸入框聚焦<uni-easyinputfocusv-model="password"placeholder="請(qǐng)輸入內(nèi)容"></uni-easyinput>多行文本<uni-easyinputtype="textarea"v-model="value"placeholder="請(qǐng)輸入內(nèi)容"></uni-easyinput>多行文本自動(dòng)高度<uni-easyinputtype="textarea"autoHeightv-model="value"placeholder="請(qǐng)輸入內(nèi)容"></uni-easyinput>取消邊框03.<uni-easyinput:inputBorder="false"placeholder="請(qǐng)輸入姓名"></uni-easyinput>

4.4知識(shí)儲(chǔ)備使用uni.share方法實(shí)現(xiàn)頁(yè)面轉(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ù)實(shí)現(xiàn)頁(yè)面轉(zhuǎn)發(fā)exportdefault{name:'MyPage',

onShareAppMessage:function(){

return{

title:'分享標(biāo)題',

path:'/pages/index/index',

imageUrl:'/share-image.jpg'

}}}4.4.3uni-app頁(yè)面轉(zhuǎn)發(fā)

4.4知識(shí)儲(chǔ)備獲取圖片信息使用uni.getImageInfo可以獲取到圖片的信息，包括圖片的寬度、高度、大小等，同時(shí)也可以獲取到圖片的本地路徑選擇圖片使用uni.chooseImage可以打開(kāi)系統(tǒng)相冊(cè)，供用戶(hù)選擇需要上傳的圖片?？梢酝ㄟ^(guò)count參數(shù)指定最多可以選擇多少?gòu)垐D片，也可以通過(guò)sizeType參數(shù)指定選擇圖片的大小類(lèi)型。預(yù)覽圖片使用uni.previewImage可以預(yù)覽一張或多張圖片，支持手勢(shì)縮放、雙擊放大等功能。保存圖片到相冊(cè)使用uni.saveImageToPhotosAlbum可以將一張圖片保存到手機(jī)相冊(cè)中，用戶(hù)可以在相冊(cè)中查看保存的圖片。圖片上傳使用uni.uploadFile方法將圖片上傳到服務(wù)器，需要指定url、filePath、name和formData等參數(shù)。4.4.4uni-app圖片處理

4.4知識(shí)儲(chǔ)備movable-area可以創(chuàng)建一個(gè)可移動(dò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可拖動(dòng)區(qū)域組件

4.5任務(wù)實(shí)施4.5.1頁(yè)面結(jié)構(gòu)分析與搭建新建頁(yè)面文件：在/pages/my目錄下新建名為“community”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/community.vue”社區(qū)首頁(yè)結(jié)構(gòu)分析

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

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

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

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

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

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

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

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

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

4.5任務(wù)實(shí)施4.5.5制作懸浮按鈕新建組件文件：

在/components目錄下新建組件文件，文件命名為“suspension-button”，勾選“創(chuàng)建同名目錄”，創(chuàng)建文件，文件最終路徑為“/components/suspension-button/suspension-button.vue”。使用uni-appmovable-area可拖動(dòng)區(qū)域組件和movable-view可移動(dòng)視圖容器組件實(shí)現(xiàn)拖動(dòng)效果，movable-area組件用于設(shè)置可拖動(dòng)的范圍，movable-view組件為可拖動(dòng)對(duì)象。返回頂部按鈕默認(rèn)隱藏，用戶(hù)下滑屏幕時(shí)顯示；返回頂部按鈕不可拖動(dòng)。封裝懸浮按鈕組件：快捷發(fā)布按鈕始終顯示，且可拖動(dòng)改變位置。

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

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

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

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

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

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

返回頂部按鈕在用戶(hù)下滑屏幕時(shí)顯示

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

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

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

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

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

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

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

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

根據(jù)設(shè)計(jì)圖，實(shí)現(xiàn)“二手”首頁(yè)頁(yè)面效果。對(duì)選項(xiàng)卡最新/最熱頁(yè)簽切換可實(shí)現(xiàn)商品列表的改變使用組件化思想實(shí)現(xiàn)商品卡片組件的開(kāi)發(fā)使用Waterfall瀑布流組件實(shí)現(xiàn)商品列表中商品的展示上滑屏幕時(shí)標(biāo)題區(qū)域懸浮置頂顯示返回頂部按鈕默認(rèn)隱藏，下滑屏幕時(shí)顯示快捷發(fā)布按鈕可拖動(dòng)到任意位置任務(wù)5制作文章發(fā)布頁(yè)Web前端應(yīng)用開(kāi)發(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ù)我們來(lái)制作“啟嘉校園”項(xiàng)目的文章發(fā)布頁(yè)。文章發(fā)布頁(yè)中用戶(hù)可以編輯文章標(biāo)題和內(nèi)容，并為文章添加圖片、插入話(huà)題，文章發(fā)布成功后自動(dòng)跳轉(zhuǎn)回社區(qū)首頁(yè)，剛發(fā)布的文章在文章列表中置頂顯示。

5.1任務(wù)描述

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

5.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過(guò)搭建文章發(fā)布頁(yè)結(jié)構(gòu)，把一個(gè)頁(yè)面分成5個(gè)區(qū)域逐步開(kāi)發(fā)，培養(yǎng)開(kāi)發(fā)者的全局思維。通過(guò)制作上傳圖片區(qū)域解決H5端無(wú)法限制上傳數(shù)量問(wèn)題，培養(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方法在頁(yè)面跳轉(zhuǎn)時(shí)傳遞話(huà)題參數(shù)。能夠使用正則表達(dá)式完成文章信息驗(yàn)證。能夠通過(guò)操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能。

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

元素遮罩層是指將一個(gè)元素覆蓋在另一個(gè)元素上，從而實(shí)現(xiàn)遮罩的效果。實(shí)現(xiàn)元素遮罩層時(shí)，通常需要使用CSS中的position屬性來(lái)控制元素的位置，//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á)式

本書(shū)將在多處使用正則表達(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頁(yè)面結(jié)構(gòu)分析與搭建新建頁(yè)面文件：在/pages/community/目錄下新建名為“publish-article”的Vue文件，在新建文件時(shí)勾選“創(chuàng)建同名目錄”，文件最終路徑為“/pages/community/publish-article/publish-article.vue”。文章發(fā)布頁(yè)結(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ū)域包含返回按鈕和頁(yè)面標(biāo)題，與小程序膠囊按鈕垂直居中，單擊返回按鈕可返回上級(jí)頁(yè)面。各個(gè)小程序平臺(tái)膠囊按鈕的高度不同，因此實(shí)現(xiàn)垂直居中效果需要根據(jù)小程序膠囊按鈕高度來(lái)設(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ù)上限提示，用戶(hù)輸入的字?jǐn)?shù)達(dá)500后禁止繼續(xù)輸入。

使用uni-app中textarea多行輸入框可以實(shí)現(xiàn)文章正文內(nèi)容的輸入，通過(guò)CSS偽類(lèi)選擇器動(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.用戶(hù)可上傳圖片數(shù)量最多為9張，當(dāng)圖片列表寬度超過(guò)屏幕寬度時(shí)出現(xiàn)橫向滾動(dòng)條。設(shè)計(jì)圖分析

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

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

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

要求：

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

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

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

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

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

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

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

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

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

發(fā)布文章時(shí)，用戶(hù)編輯的文章內(nèi)容若符合驗(yàn)證規(guī)則，提示發(fā)布成功并跳轉(zhuǎn)回社區(qū)首頁(yè)；不符合驗(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方法在頁(yè)面跳轉(zhuǎn)時(shí)傳遞話(huà)題參數(shù)

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

是否能夠通過(guò)操作數(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á)式的正確寫(xiě)法？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ā)布頁(yè)中，以下哪個(gè)變量表示設(shè)備狀態(tài)欄高度？A.phoneBarHeightB.statusBarHeightC.navHeightD.titleBarHeight2.填空題（1）匹配郵政編碼（中國(guó)大陸）的正則表達(dá)式是_____。（2）在從社區(qū)首頁(yè)跳轉(zhuǎn)到文章發(fā)布頁(yè)時(shí)，通過(guò)在跳轉(zhuǎn)地址中添加_____參數(shù)，傳遞分類(lèi)信息索引。3.簡(jiǎn)答題（1）簡(jiǎn)述通過(guò)操作數(shù)組對(duì)象實(shí)現(xiàn)圖片刪除功能的具體步驟。

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

根據(jù)設(shè)計(jì)圖，實(shí)現(xiàn)“二手”商品發(fā)布頁(yè)面部分效果。在“二手”首頁(yè)，通過(guò)快捷發(fā)布按鈕可跳轉(zhuǎn)至商品發(fā)布頁(yè)面。標(biāo)題與正文的驗(yàn)證規(guī)則請(qǐng)參考文章發(fā)布頁(yè)。圖片為必填項(xiàng)，第一張圖片為默認(rèn)商品主圖。商品分類(lèi)的類(lèi)目可從“二手”首頁(yè)跳轉(zhuǎn)時(shí)獲取。商品金額為必填項(xiàng)且金額不能為0。單擊發(fā)布時(shí)，對(duì)信息進(jìn)行校驗(yàn)，符合上述規(guī)則發(fā)布成功，并跳轉(zhuǎn)到上一級(jí)頁(yè)面。任務(wù)6制作文章詳情頁(yè)Web前端應(yīng)用開(kāi)發(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è)試通過(guò)點(diǎn)擊社區(qū)首頁(yè)“文章列表”中的文章卡片可以進(jìn)入文章詳情頁(yè)，文章詳情頁(yè)包含文章的發(fā)布者信息、發(fā)布時(shí)間、標(biāo)題、正文等內(nèi)容，用戶(hù)可對(duì)文章內(nèi)容進(jìn)行瀏覽、關(guān)注、轉(zhuǎn)發(fā)、評(píng)論和點(diǎn)贊操作，也可在評(píng)論區(qū)查看、回復(fù)和點(diǎn)贊其他用戶(hù)的評(píng)論，這是文章管理系統(tǒng)包含的常規(guī)功能，也是移動(dòng)端系統(tǒng)最常見(jiàn)的交互手段，能夠讓用戶(hù)有更好的應(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)通過(guò)對(duì)組件的封裝與復(fù)用，培養(yǎng)學(xué)習(xí)者遵守行業(yè)編碼規(guī)范的意識(shí)。通過(guò)引導(dǎo)學(xué)習(xí)者自學(xué)官網(wǎng)開(kāi)發(fā)手冊(cè)，培養(yǎng)其熱愛(ài)學(xué)習(xí)、主動(dòng)學(xué)習(xí)的精神。通過(guò)解決軟件兼容性問(wèn)題，培養(yǎng)學(xué)習(xí)者追求軟件高質(zhì)量的職業(yè)意識(shí)。通過(guò)網(wǎng)絡(luò)系統(tǒng)的開(kāi)發(fā)，培養(yǎng)學(xué)習(xí)者的網(wǎng)絡(luò)案例意識(shí)，通過(guò)健康用網(wǎng)傳播正能量。掌握組件的復(fù)用。掌握onShareAppMessage小程序頁(yè)面轉(zhuǎn)發(fā)方法的使用。掌握Vue$nextTick回調(diào)延遲方法的使用。掌握Vuefilters過(guò)濾器方法的使用。掌握input組件always-embed和adjust-position屬性的用法。能夠使用組件提升代碼復(fù)用率。能夠使用onShareAppMessage方法實(shí)現(xiàn)轉(zhuǎn)發(fā)頁(yè)面的自定義信息設(shè)置。能夠使用filters過(guò)濾器實(shí)現(xiàn)日期和時(shí)間格式化。能夠解決IOS系統(tǒng)中鍵盤(pán)調(diào)起后的輸入框被覆蓋的問(wèn)題。。

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í)際開(kāi)發(fā)中，通常會(huì)將一些通用的組件抽象出來(lái)，例如按鈕、表單、模態(tài)框等，然后在不同的頁(yè)面中復(fù)用這些組件。組件復(fù)用可通過(guò)多種方式實(shí)現(xiàn)，例如：利用props傳遞數(shù)據(jù)，使子組件能根據(jù)父組件傳遞的數(shù)據(jù)進(jìn)行定制化渲染；使用插槽，讓父組件能插入自定義內(nèi)容，使子組件更靈活；使用高階組件，將組件邏輯封裝為函數(shù)，或使用mixins，將共享邏輯封裝在一起，減少重復(fù)編寫(xiě)。組件拓展是指在已有組件的基礎(chǔ)上進(jìn)行修改和擴(kuò)展，從而創(chuàng)建一個(gè)新組件。通常情況下，組件的拓展可以通過(guò)繼承或者組合等方式來(lái)實(shí)現(xiàn)。在繼承方式中，可以通過(guò)繼承已有組件的方式來(lái)創(chuàng)建一個(gè)新的組件，并在新組件中添加新的屬性和方法。在組合方式中，可以將已有組件作為子組件，然后在新組件中添加新的屬性和方法。

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

6.4知識(shí)儲(chǔ)備6.4.2uni-app跨端兼容雖然uni-app具有跨平臺(tái)的優(yōu)勢(shì)，但是不同平臺(tái)之間還是存在一些兼容性問(wèn)題，需要開(kāi)發(fā)者注意。問(wèn)題解決方法樣式兼容性不同平臺(tái)的樣式支持度不同，需要開(kā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)支持的組件和屬性不同，需要開(kāi)發(fā)者注意對(duì)應(yīng)組件和屬性的支持情況。可以使用條件渲染或者slot來(lái)動(dòng)態(tài)加載不同平臺(tái)的組件。API兼容性不同平臺(tái)支持的API不同，需要開(kāi)發(fā)者使用條件編譯來(lái)針對(duì)不同平臺(tái)編寫(xiě)不同的API調(diào)用代碼。生命周期兼容性不同平臺(tái)的生命周期可能存在差異，需要開(kāi)發(fā)者注意不同平臺(tái)的生命周期差異并進(jìn)行針對(duì)性調(diào)整性能兼容性不同平臺(tái)的性能表現(xiàn)不同，需要開(kāi)發(fā)者注意調(diào)整性能瓶頸。

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

$nextTick()是Vue提供的一個(gè)異步方法，它的作用是在DOM更新之后執(zhí)行回調(diào)函數(shù)。在Vue更新DOM后，可能會(huì)需要訪(fǎng)問(wèn)更新后的DOM或者執(zhí)行一些需要在DOM更新后才能執(zhí)行的操作，這時(shí)