Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)11　項(xiàng)目部署與發(fā)布

任務(wù)11項(xiàng)目部署與發(fā)布Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS0111.5任務(wù)實(shí)施11.7學(xué)習(xí)自評(píng)Part111.1任務(wù)描述11.2任務(wù)效果11.4知識(shí)儲(chǔ)備-uni-app項(xiàng)目發(fā)布11.8課后練習(xí)11.9任務(wù)拓展11.3學(xué)習(xí)目標(biāo)11.6任務(wù)測(cè)試

本任務(wù)將使用HBuilderX完成“啟嘉校園”項(xiàng)目的發(fā)布，以發(fā)布到H5端和微信小程序端為例，講解uni-app項(xiàng)目發(fā)布的操作步驟和相關(guān)注意事項(xiàng)。

11.1任務(wù)描述

11.2任務(wù)效果小程序版本管理

11.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過(guò)講解uni-app項(xiàng)目發(fā)布，培養(yǎng)學(xué)習(xí)者的目標(biāo)導(dǎo)向和執(zhí)行力，能夠堅(jiān)定不移的執(zhí)行計(jì)劃，確保任務(wù)圓滿完成。通過(guò)講解uni-app多端發(fā)布，提高學(xué)習(xí)者遵守規(guī)則的意識(shí)，培養(yǎng)良好的開發(fā)習(xí)慣。

了解uni-app項(xiàng)目發(fā)布流程。掌握uni-app項(xiàng)目的配置方法。掌握HBuilderX打包項(xiàng)目的方法。掌握云服務(wù)部署H5項(xiàng)目的方法。掌握uni-app項(xiàng)目發(fā)布到微信小程序的方法。能夠使用HBuilderX發(fā)布uni-app項(xiàng)目到H5。能夠使用HBuilderX發(fā)布uni-app項(xiàng)目到微信小程序。

11.4知識(shí)儲(chǔ)備-uni-app項(xiàng)目發(fā)布

使用uni-app發(fā)布項(xiàng)目流程如下：（1）確保項(xiàng)目已經(jīng)開發(fā)完成，并且通過(guò)測(cè)試。（2）打開uni-app項(xiàng)目所在的文件夾，找到項(xiàng)目的根目錄。（3）在根目錄下找到manifest.json文件。（4）在manifest.json文件中找到發(fā)布平臺(tái)特有配置字段（如：App平臺(tái)為app-plus，H5平臺(tái)為h5，微信小程序平臺(tái)為mp-weixin），該字段用于配置uni-app的擴(kuò)展功能。（5）在發(fā)布平臺(tái)特有配置字段下添加需要發(fā)布的平臺(tái)的相關(guān)配置。（6）根據(jù)各個(gè)平臺(tái)的發(fā)布流程，進(jìn)行項(xiàng)目的提交和審核。（7）等待審核通過(guò)后，即可發(fā)布uni-app應(yīng)用。

11.5任務(wù)實(shí)施11.5.1發(fā)布到H5步驟一：配置項(xiàng)目信息h5配置

11.5任務(wù)實(shí)施11.5.1發(fā)布到H5步驟二：打包項(xiàng)目發(fā)布到網(wǎng)站-H5手機(jī)版單擊HBuilderX工具欄【發(fā)行】->選擇【網(wǎng)站-H5手機(jī)版】，即可生成項(xiàng)目H5打包文件，文件保存于unpackage目錄

11.5任務(wù)實(shí)施11.5.1發(fā)布到H5步驟三：部署項(xiàng)目準(zhǔn)備服務(wù)器首先準(zhǔn)備一臺(tái)用來(lái)部署項(xiàng)目的服務(wù)器，可以自行搭建服務(wù)器，但是為了方便部署和管理推薦使用運(yùn)營(yíng)商提供云服務(wù)器。安裝Nginx上傳項(xiàng)目文件配置域名解析登錄服務(wù)器安裝Nginx，Nginx版本選擇最新版，安裝完成后配置網(wǎng)站信息。將項(xiàng)目文件上傳到服務(wù)器Nginx項(xiàng)目目錄中，啟動(dòng)Nginx，然后通過(guò)IP訪問(wèn)網(wǎng)站。如果想通過(guò)域名訪問(wèn)網(wǎng)站，則需要購(gòu)買域名并進(jìn)行備案。

11.5任務(wù)實(shí)施11.5.2發(fā)布到微信小程序步驟一：部署后端服務(wù)

在實(shí)際開發(fā)中，后端程序的部署一般由后端開發(fā)人員或運(yùn)維人員完成，前端開發(fā)者無(wú)需太多關(guān)注后端部署。但是需要注意，基于安全考慮，微信小程序要求所有后端請(qǐng)求方式必須使用HTTPS協(xié)議，因此還需要為后端服務(wù)配置SSL安全證書，否則前端將不能成功請(qǐng)求接口。

1.5任務(wù)實(shí)施1.5.2發(fā)布到微信小程序

單擊HBuilderX工具欄【發(fā)行】->【小程序-微信】，輸入小程序名稱和appid單擊發(fā)行即可。

如果選擇手動(dòng)發(fā)行，單擊發(fā)行按鈕后，會(huì)在項(xiàng)目的unpackage/dist/build/mp-weixin目錄中生成微信小程序項(xiàng)目代碼。在微信小程序開發(fā)者工具中，導(dǎo)入生成的微信小程序項(xiàng)目，測(cè)試項(xiàng)目代碼運(yùn)行正常后，單擊“上傳”按鈕，之后按照【提交審核】->【發(fā)布】小程序標(biāo)準(zhǔn)流程逐步操作即可。步驟二：發(fā)布項(xiàng)目

11.6任務(wù)測(cè)試測(cè)試條目是否通過(guò)使用HBuilderX打開“啟嘉校園”項(xiàng)目配置文件，配置H5端項(xiàng)目信息

使用HBuilderX成功打包“啟嘉校園”項(xiàng)目文件

將打包的“啟嘉校園”項(xiàng)目部署到云服務(wù)器上，通過(guò)服務(wù)器IP成功訪問(wèn)項(xiàng)目

使用HBuilderX成功發(fā)布“啟嘉校園”項(xiàng)目到微信小程序

11.7自學(xué)評(píng)價(jià)評(píng)價(jià)內(nèi)容是否了解/掌握是否了解uni-app項(xiàng)目發(fā)布流程

是否掌握uni-app項(xiàng)目的配置方法

是否掌握HBuilderX打包項(xiàng)目的方法

是否掌握云服務(wù)部署H5項(xiàng)目的方法

是否掌握uni-app項(xiàng)目發(fā)布到微信小程序的方法

11.8課后練習(xí)？1.選擇題（1）在uni-app項(xiàng)目中，通過(guò)（）文件可以配置項(xiàng)目的基本信息？A.manifest.jsonB.pages.jsonC.vue.config.jsD.index.html（2）在HBuilderX中發(fā)布uni-app項(xiàng)目到H5需要選擇什么菜單？A.發(fā)行B.構(gòu)建C.部署D.發(fā)布（3）在manifest.json文件中，以下哪個(gè)字段可以設(shè)置需要發(fā)布的平臺(tái)的相關(guān)配置？A.globalB.appC.pagesD.app-plus2.填空題（1）hash模式則是通過(guò)監(jiān)聽____對(duì)象的變化實(shí)現(xiàn)。（2）打包uni-app項(xiàng)目生成H5打包文件的位置是____目錄。3.簡(jiǎn)答題（1）簡(jiǎn)述HBuilderX發(fā)布uni-app項(xiàng)目的步驟。

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

除了發(fā)布項(xiàng)目到H5和微信小程序之外，還可以將uni-app項(xiàng)目發(fā)布到其他平臺(tái)，如APP、百度小程序、支付寶小程序等等，具體的發(fā)布方式會(huì)根據(jù)目標(biāo)平臺(tái)的不同而