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

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

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

1.1任務描述

1.2任務效果任務效果圖

1.3學習目標能力目標素養目標知識目標通過搭建項目開發環境，增強學習者的系統思維能力，培養學習者養成統籌全局的習慣。通過學習MasterGo的使用，增強學習者合理使用工具和技術的能力，養成優化方法，提高工作效率的習慣。

了解產品需求文檔的作用。了解頁面設計圖的作用。了解字體圖標的作用。了解接口文檔的作用。掌握搭建前端開發環境的方法。掌握搭建后端開發環境的方法。能夠使用MasterGo查看項目設計圖。能夠在Windows操作系統中安裝HBuilderX。能夠在Windows操作系統中安裝微信開發者工具。能夠使用HBuilderX創建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文檔，

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

1.4知識儲備1.4.5項目源碼

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

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

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

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

1.5任務實施1.5.3創建項目開發目錄設置項目名稱及路徑

1.5任務實施1.5.3創建項目開發目錄項目默認目錄結構

1.5任務實施1.5.3創建項目開發目錄

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

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

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

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

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

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

在電腦中成功運行微信開發者工具

在電腦中部署后端開發環境，啟動Java、MySQL相關服務

使用HBuilderX成功創建“啟嘉校園”項目開發目錄

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

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

是否了解字體圖標的作用

是否了解接口文檔的作用

是否掌握前端開發環境搭建

是否掌握后端開發環境搭建

是否了解創建項目流程

是否了解項目目錄結構

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

1.9任務拓展任務拓展

除了本任務講解的項目開發準備外，在實際工作中為了確保項目順利進行，還需要的準備工