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

任务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任务测试测试条目是否通过比对开发页面和设计图，核对字号、颜色、间距等设计参数

修改login变量布尔值，实现个人中心页登录和未登录状态的切换

点击”联系我们“按钮，弹出模态框；点击遮罩层关闭模态框

点击底部标签栏，实现页面切换；选中的tab高亮显示

拖动时圆弧及功能列表区域可实现下拉效果

2.7自学评价评价内容是否了解/掌握是否了解移动端尺寸单位的换算规则

是否掌握自定义导航栏配置

是否掌握如何分析设计图

是否掌握flex布局的应用

是否掌握Sass的使用

2.8课后练习？1.选择题（1）在uni-app中，以下哪个组件可以用于自定义导航栏？A.viewB.popupC.textD.navigationBar（2）在uni-app中，以下哪个组件可以用于创建弹出层？A.viewB.popupC.textD.navigationBar（3）在uni-app中，以下哪个语法可以用于定义Sass变量？A.$var:valueB.#var:valueC.var:valueD.@var:value2.填空题（1）在uni-app中