Web前端应用开发项目式教程（基于uni-app框架） 课件 任务1、2　项目开发准备、制作个人中心页

任务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任务拓展任务拓展

除了本任务讲解的项目开发准备外，在实际工作中为了确保项目顺利进行，还需要的准备工作一般包括：（1）制定项目计划；

（2）风险管理;

（3）质量管理;

（4）沟通协调;

（5）培训和技术支持;

（6）文档管理;

（7）环境安全;

（8）反馈和持续改进。

这些准备工作对于项目的成功至关重要，需要认真对待每一个环节，确保项目能够按时、按要求完成。任务2：制作个人中心页Web前端应用开发项目式教程（基于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)未登录状态b)已登录状态c)“联系我们”模态框

2.3学习目标能力目标素养目标知识目标通过给新建变量、类选择器等命名树立规范命名的编程意识。通过项目使用的国产跨平台移动应用开发框架uni-app，培养学习者的爱国情怀，增强科技创新的自信心。

通过以学生社交生态为主题的项目开发，提高学习者科技赋能数字生活的意识。通过任务拓展“二手”功能的实现培养学习者树立坚持节约优先，持续发展的理念。了解移动端尺寸单位。掌握页面路由和自定义导航栏的配置。掌握uni-appview视图容器组件的使用。掌握uni-apppopup弹出层组件的使用。掌握uni-apptext基础内容组件的使用。掌握uni-app扩展组件的使用。掌握Sass基础语法。能够使用MasterGo查看设计图标注信息。能够使用uni-app视图容器组件搭建静态页面结构。能够使用Sass预处理器修饰页面样式。

2.4知识储备scroll-view视图容器组件scroll-view是uni-app框架中的一个组件，用于创建可滚动的视图区域。触摸事件touch在uni-app中，可以使用touch事件来监听触摸屏幕的交互操作，如滑动、按下、松开等，可以针对这些事件进行相应的响应操作。页面生命周期在uni-app中，页面生命周期指的是页面从创建到销毁的整个过程所经历的一系列事件。导航栏uni-app支持使用原生导航栏和自定义导航栏两种方式来展示页面导航信息，下面分别介绍这两种方式。底部tabbartabBar是移动端应用常见的标签栏，用于实现页面之间的快速切换，小程序中通常将其分为底部tabBar和顶部tabBar。

2.5任务实施新建页面文件“my”运行结果2.5.1页面结构分析与搭建

2.5任务实施页面结构分为3部分2.5.1页面结构分析与搭建

2.5任务实施引入字体图标设计图分析代码实现通过HBuilderX下载和安装uni-ui组件库中的组件uni-icons，用来展示我们之前引入的字体图标。2.5.2制作头部区域

2.5任务实施注意：在同一个项目中，所有页面都会遵循同一个设计规范，如规定的主题色系、标题字号、正文字号、元素间距等等，一般在开发中会将这些规范样式定义成变量或方法，CSS本身并不支持定义变量和方法，但是可以使用Sass预处理器去实现，

a)login为tureb)login为false公共样式文件目录2.5.2制作头部区域

2.5任务实施原生导航栏文件路径：/pages.json："globalStyle":{"navigationStyle":"custom"},自定义导航栏2.5.3制作自定义导航栏

2.5任务实施胶囊按钮和设备状态栏发生了重叠

头部区域距顶部存在一段距离，为小程序胶囊按钮和设备状态栏的高度之和。this.topPadding=statusBarHeight+titleBarHeight;导航栏高度适配2.5.3制作自定义导航栏

2.5任务实施弧形区域是使用直径420px的椭圆制作的，可换算为840rpx。结合屏幕宽度750rpx，弧形区域需向左偏移45rpx，以达到居中效果。2.5.4制作圆弧及功能列表区域

2.5任务实施

如何实现拖动下拉时，圆弧与功能列表位置下移，结束拖动下拉时，圆弧与功能列表回归原位？

通过监听用户触摸屏幕事件，获取用户拖动位移的数值。当位移的数值超过指定大小时，通过改变圆弧及功能列表区域包裹容器的纵向平移属性translateY实现拖动下拉效果。2.5.4制作圆弧及功能列表区域

2.5任务实施文件路径：/pages.json：{"tabBar":{"color":"#999999",//文字颜色"selectedColor":"#000",//选中状态下文字颜色

"borderStyle":"black",//上边框颜色，可选值：black、white"backgroundColor":"#ffffff",//背景颜色"list":[{

//tab列表"pagePath":"pages/community/community",//页面路径"text":"社区",//文本内容"iconPath":"static/tab-icons/community.png",//图标路径

//选中状态下图片路径"selectedIconPath":"static/tab-icons/community-active.png"},/*省略其余代码*/]}}2.5.5制作底部标签栏区域

2.5任务实施模态框的uni-popup弹出层组件：<uni-popupref="contact"><view><image

src="/static/cat.png"mode="widthFix"></image><view>

<text>联系我们</text>

<text>QQ：1020304050</text>

<text>微信：changewechat</text></view></view></uni-popup>2.5.6制作“联系我们”模态框

2.5任务实施

JavaScript部分：

通过$refs获取名为contact的弹出层组件并调用open方法，打开弹出层。handleOpenContact(){this.$refs.contact.open()}2.5.6制作“联系我们”模态框

2.6任务测试测试