Web前端應(yīng)用開(kāi)發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)1、2　項(xiàng)目開(kāi)發(fā)準(zhǔn)備、制作個(gè)人中心頁(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)品需求文檔為在線文檔。在線文檔地址：

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)并獲取類名，應(yīng)用于頁(yè)面拷貝項(xiàng)目下面生成的fontclass代碼1font-class引用

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

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

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

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

讀者若需要完整代碼可以從啟嘉書(shū)盤中下載“啟嘉校園”項(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)本地磁盤中，注意存放路徑不能包含中文。在解壓后的文件夾中找到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)目名稱及路徑

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)容包括用戶頭像、昵稱、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ò)給新建變量、類選擇器等命名樹(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)建到銷毀的整個(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)用戶觸摸屏幕事件，獲取用戶拖動(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è)試