Web前端應用開發(fā)項目式教程（基于uni-app框架） 課件 任務1、2　項目開發(fā)準備、制作個人中心頁

任務1項目開發(fā)準備Web前端應用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS011.5任務實施1.7學習自評Part11.1任務描述1.2任務效果1.4知識儲備1.8課后練習1.9任務拓展1.3學習目標1.6任務測試

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

1.1任務描述

1.2任務效果任務效果圖

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

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

1.4知識儲備1.4.1產品需求文檔

“啟嘉校園”產品需求文檔為在線文檔。在線文檔地址：

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

1.4知識儲備1.4.2頁面設計圖

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

1.4知識儲備1.4.2頁面設計圖

“啟嘉校園”設計圖地址：https://book.change.tm/u/a2。導出設計圖

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

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

1.4知識儲備1.4.4接口文檔

接口文檔即應用程序接口的說明文檔，又稱為API文檔，

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

1.4知識儲備1.4.5項目源碼

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

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

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

1.5任務實施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安裝包，將自動進行安裝，安裝成功后會提示“安裝成功”3.安裝后端開發(fā)環(huán)境點擊此處添加標題點擊此處添加標題點擊此處添加標題哎呀小小草PPT模板請勿盜版點擊此處添加標題點擊此處添加標題點擊此處添加標題點擊此處添加標題哎呀小小草PPT模板請勿盜版點擊此處添加標題

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

1.5任務實施1.5.3創(chuàng)建項目開發(fā)目錄項目默認目錄結構

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

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

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

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

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

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

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

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

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

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

1.7自學評價評價內容是否了解/掌握是否了解產品需求文檔的作用

是否了解頁面設計圖的作用

是否了解字體圖標的作用

是否了解接口文檔的作用

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

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

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

是否了解項目目錄結構

1.8課后練習？1.選擇題（1）下列哪個選項不是uni-app的特點？A.使用Vue.js開發(fā)，一次開發(fā)多端發(fā)布B.豐富的API接口，可實現(xiàn)復雜功能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.可以直接在編輯器中預覽代碼效果D.只能用于開發(fā)移動端應用2.填空題（1）uni-app項目中的頁面文件通常存放在_____的文件夾中。（2）uni-app項目中的樣式文件通常存放在______的文件夾中。3.簡答題（1）簡述uni-app項目的主要目錄結構及作用。

1.9任務拓展任務拓展

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

（2）風險管理;

（3）質量管理;

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

（5）培訓和技術支持;

（6）文檔管理;

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

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

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

目錄CONTENTS012.5任務實施2.7學習自評Part12.1任務描述2.2任務效果2.4知識儲備2.8課后練習2.9任務拓展2.3學習目標2.6任務測試

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

2.1任務描述

2.2任務效果

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

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

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

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

2.5任務實施新建頁面文件“my”運行結果2.5.1頁面結構分析與搭建

2.5任務實施頁面結構分為3部分2.5.1頁面結構分析與搭建

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

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

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

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

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

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

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

2.5任務實施

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

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

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

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

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

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

2.5任務實施模態(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任務實施

JavaScript部分：

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

2.6任務測試測試