Web前端应用开发项目式教程（基于uni-app框架） 课件 任务11　项目部署与发布

任务11项目部署与发布Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS0111.5任务实施11.7学习自评Part111.1任务描述11.2任务效果11.4知识储备-uni-app项目发布11.8课后练习11.9任务拓展11.3学习目标11.6任务测试

本任务将使用HBuilderX完成“启嘉校园”项目的发布，以发布到H5端和微信小程序端为例，讲解uni-app项目发布的操作步骤和相关注意事项。

11.1任务描述

11.2任务效果小程序版本管理

11.3学习目标能力目标素养目标知识目标通过讲解uni-app项目发布，培养学习者的目标导向和执行力，能够坚定不移的执行计划，确保任务圆满完成。通过讲解uni-app多端发布，提高学习者遵守规则的意识，培养良好的开发习惯。

了解uni-app项目发布流程。掌握uni-app项目的配置方法。掌握HBuilderX打包项目的方法。掌握云服务部署H5项目的方法。掌握uni-app项目发布到微信小程序的方法。能够使用HBuilderX发布uni-app项目到H5。能够使用HBuilderX发布uni-app项目到微信小程序。

11.4知识储备-uni-app项目发布

使用uni-app发布项目流程如下：（1）确保项目已经开发完成，并且通过测试。（2）打开uni-app项目所在的文件夹，找到项目的根目录。（3）在根目录下找到manifest.json文件。（4）在manifest.json文件中找到发布平台特有配置字段（如：App平台为app-plus，H5平台为h5，微信小程序平台为mp-weixin），该字段用于配置uni-app的扩展功能。（5）在发布平台特有配置字段下添加需要发布的平台的相关配置。（6）根据各个平台的发布流程，进行项目的提交和审核。（7）等待审核通过后，即可发布uni-app应用。

11.5任务实施11.5.1发布到H5步骤一：配置项目信息h5配置

11.5任务实施11.5.1发布到H5步骤二：打包项目发布到网站-H5手机版单击HBuilderX工具栏【发行】->选择【网站-H5手机版】，即可生成项目H5打包文件，文件保存于unpackage目录

11.5任务实施11.5.1发布到H5步骤三：部署项目准备服务器首先准备一台用来部署项目的服务器，可以自行搭建服务器，但是为了方便部署和管理推荐使用运营商提供云服务器。安装Nginx上传项目文件配置域名解析登录服务器安装Nginx，Nginx版本选择最新版，安装完成后配置网站信息。将项目文件上传到服务器Nginx项目目录中，启动Nginx，然后通过IP访问网站。如果想通过域名访问网站，则需要购买域名并进行备案。

11.5任务实施11.5.2发布到微信小程序步骤一：部署后端服务

在实际开发中，后端程序的部署一般由后端开发人员或运维人员完成，前端开发者无需太多关注后端部署。但是需要注意，基于安全考虑，微信小程序要求所有后端请求方式必须使用HTTPS协议，因此还需要为后端服务配置SSL安全证书，否则前端将不能成功请求接口。

1.5任务实施1.5.2发布到微信小程序

单击HBuilderX工具栏【发行】->【小程序-微信】，输入小程序名称和appid单击发行即可。

如果选择手动发行，单击发行按钮后，会在项目的unpackage/dist/build/mp-weixin目录中生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，单击“上传”按钮，之后按照【提交审核】->【发布】小程序标准流程逐步操作即可。步骤二：发布项目

11.6任务测试测试条目是否通过使用HBuilderX打开“启嘉校园”项目配置文件，配置H5端项目信息

使用HBuilderX成功打包“启嘉校园”项目文件

将打包的“启嘉校园”项目部署到云服务器上，通过服务器IP成功访问项目

使用HBuilderX成功发布“启嘉校园”项目到微信小程序

11.7自学评价评价内容是否了解/掌握是否了解uni-app项目发布流程

是否掌握uni-app项目的配置方法

是否掌握HBuilderX打包项目的方法

是否掌握云服务部署H5项目的方法

是否掌握uni-app项目发布到微信小程序的方法

11.8课后练习？1.选择题（1）在uni-app项目中，通过（）文件可以配置项目的基本信息？A.manifest.jsonB.pages.jsonC.vue.config.jsD.index.html（2）在HBuilderX中发布uni-app项目到H5需要选择什么菜单？A.发行B.构建C.部署D.发布（3）在manifest.json文件中，以下哪个字段可以设置需要发布的平台的相关配置？A.globalB.appC.pagesD.app-plus2.填空题（1）hash模式则是通过监听____对象的变化实现。（2）打包uni-app项目生成H5打包文件的位置是____目录。3.简答题（1）简述HBuilderX发布uni-app项目的步骤。

11.9任务拓展任务拓展

除了发布项目到H5和微信小程序之外，还可以将uni-app项目发布到其他平台，如APP、百度小程序、支付宝小程序等等，具体的发布方式会根据目标平台的不同而