Web前端应用开发项目式教程（基于uni-app框架）最新章节_高秀艳著

2.5 任务实施

2.5.1 页面结构分析与搭建

1.新建页面文件

在pages目录下新建Vue文件，文件命名为“my”，在新建文件时勾选“创建同名目录”和“在pages.json中注册”两个复选框，如图2-3所示。

图2-3 新建“my”页面

在勾选“创建同名目录”复选框后，会在创建文件的同时自动创建一个与文件同名的目录，这样做的原因是该目录中可能还会存放其他相关联的目录或代码文件（如子级页面目录，以及JavaScript、JSON和CSS等文件），将这些相关联的目录或文件放到同一个目录中会使项目目录结构更加清晰，方便开发者管理维护。

在勾选“在pages.json中注册”复选框后，会在pages.json配置文件的pages数组（页面配置数组，用于配置每个页面的路由、样式等内容）下新增一个页面对象，其中path用于配置页面路径，style用于配置页面的样式，如状态栏、导航栏、标题、窗口背景色等，如图2-4所示。

图2-4 pages.json默认配置项

pages数组中的第一项代表应用的启动页，“启嘉校园”项目的启动页为个人中心页，因此需要将个人中心页对应的页面对象移动到pages数组的第一项，如图2-5所示。

图2-5 pages.json配置项位置调整后

（1）代码实现

为了更加直观地预览启动页效果，在my.vue文件中写入如下代码。

文件路径：/pages/my/my.vue

运行项目，即可在微信开发工具中看到，应用启动页变成了个人中心页。

（2）运行效果

运行效果如图2-6所示。

2.搭建页面结构

前端工程师的一项重要工作是将项目的设计图按1:1比例转换成网页，此过程在开发中俗称为“切图”。前端工程师在切图前首先要明确项目的设计规范（如主题颜色、尺寸单位、基础间距等），从而做好切图前的准备工作（如抽离公共样式变量、方法等），然后分析设计图中页面结构和动态交互效果，通过代码将设计图制作成网页。

“启嘉校园”设计图使用MasterGo软件制作，生成了可导出图片，可查看页面元素样式标注的在线设计图地址，为开发者制作静态页面提供了极大便利。在线设计图可通过本书配套资源网站“启嘉书盘”（http://book.change.tm）上对应课程资源列表中的“设计图”进行查看。

在分析设计图时，可以按照页面内容和交互效果的关联度将页面划分为整体和局部区域，关联程度大的局部区域共同组成一个整体区域，这样划分页面不仅方便布局，还能够精简代码，使代码结构更加清晰。由于设计图中无法展示动态的交互效果，“启嘉校园”项目中涉及的动态交互效果会在分析设计图时通过文字进行描述。

图2-6 启动页运行效果

（1）设计图分析

设计图分析可以帮助开发人员在开发早期理解和预测可能出现的问题，从而优化设计，减少后期的修改和调试工作，提高软件开发的效率。

“启嘉校园”属于移动端应用，页面整体以纵向布局为主。通过个人中心页设计图可知个人中心页由用户个人信息、个人数据、功能列表和底部标签栏等内容组成，其中个人信息和个人数据位置较近且有相同的背景色，可作为头部区域；个人数据下方圆弧与功能列表存在一个联动的拖动下拉动态效果，可作为圆弧及功能列表区域；底部标签栏位于页面底部，悬浮置顶（z-index顶层）显示，可作为底部标签栏区域，如图2-7所示。

除此之外，设计图中还存在设备状态栏、Home Indicator（底部黑色横条），以及小程序胶囊按钮三个未划分的区域，它们分别是手机设备和小程序自带的功能，不需要通过代码实现，在不同设备和不同小程序平台中的样式也不尽相同，这里在设计图中展示是为了方便开发时能够将设计图与实际运行效果做对比。

图2-7 个人中心页结构分析

分析项目设计图

（2）代码实现

uni-app提供了一个类似HTML中div的视图容器组件view，在本任务及后面其他任务中会经常使用view组件搭建页面。关键代码如下。

文件路径：/pages/my/my.vue

从上面的代码中可以看出，底部标签栏区域并没有体现在代码中，这是因为底部标签栏是通过uni-app的配置文件来实现的，详细内容将在子任务2.5.5中讲解。

2.5.2 制作头部区域

1.搭建页面结构

（1）设计图分析

前面已经介绍过如何划分页面结构，按上一步骤中的分析逻辑，可将头部区域继续划分为个人信息和个人数据两部分，如图2-8所示。

个人信息部分为左右结构，登录状态下左侧展示用户的头像、昵称和ID，右侧展示个人资料入口；未登录状态下左侧展示默认头像和“未登录”按钮，右侧为空。

个人数据部分为横向三等分结构，分别为“我的文章”“我的粉丝”和“我的关注”数据。

图2-8 头部区域结构分析

不难发现，头部区域还可以继续向下划分，比如个人信息中用户头像、昵称和ID组成的局部区域还可以划分为左、右两部分（左侧为用户头像，右侧为用户昵称和ID），此时或在遇到层级更多的嵌套结构时，只需要根据划分页面结构的原则逐层划分。本书中为了避免出现过多的分析性内容，不会在分析设计图时对页面结构进行逐层拆分讲解。

（2）引入字体图标

字体图标是现在的开发中常用来展示页面中图标（如图2-8头部区域中的右箭头图标）的一种形式，其原理是将图标制作成矢量字体文件，使用时如同在CSS中引入字体文件一样引入字体图标文件。相比于传统的通过图片形式展示图标，字体图标使用起来更加简单、快捷。

本项目使用的字体图标文件可通过“启嘉书盘”对应课程资源列表中的“字体图标”进行下载。下载的字体图标文件和CSS样式文件分别存放到项目的静态资源目录static与公共目录common（common目录一般用于存放公共样式与公共方法文件）中。在根目录下创建common/css目录，放入iconfont.css文件；在static目录下创建font目录，放入iconfont.ttf文件，如图2-9所示。

图2-9 字体图标相关文件存放目录

（3）代码实现

除view组件以外，uni-app还提供了更多与HTML标签功能类似的组件，比如用于展示图片的image组件、展示文本的text组件等，相比于普通的HTML标签，这些组件的功能更加丰富，在开发中使用会更加方便、高效。另外，uni-app还推出了一套基于Vue和Flex布局的跨端UI框架uni-ui，它具备高性能、跨全端、可扩展等特点，内含众多UI组件，方便开发者快速实现一些比较复杂的页面样式或效果，比如用来展示之前引入的字体图标的组件uni-icons。

在使用uni-ui组件库中的组件时，需要通过HBuilderX下载和安装组件，打开DCloud插件市场官网，搜索“uni-icons”，进入组件详情页，单击页面右侧“使用HBuilderX导入插件”，安装组件时需要登录DCloud和HBuilderX账号。

在完成组件安装后，可直接使用，无须注册和导入（import）。关键代码如下。

文件路径：/pages/my/my.vue

Template部分

CSS部分

JavaScript部分

2.使用Sass预处理器

在同一个项目中，所有页面都会遵循同一个设计规范，如规定的主题色系、标题字号、正文字号、元素间距等，一般在开发中会将这些规范样式定义成变量或方法，这样当设计规范需要调整时，直接修改定义好的相关变量或方法即可，无须对代码进行大面积修改。CSS本身并不支持定义变量和方法，但是可以使用Sass预处理器去实现，从某种程度上来讲，Sass可以使CSS变得像JavaScript一样使用。

在本项目中，将主题色系、字号等规范样式抽离到common/css目录下的Sass文件中，按照内容和功能将Sass文件分类，如color.scss用于存放颜色样式变量、iconfont.scss用于存放字体图标样式等，然后创建index.scss来作为样式集中的引入文件，引入那些分类的公共Sass文件，如图2-10所示。

图2-10 公共样式文件目录

注意，需要将iconfont.css改为iconfont.scss，否则无法在index.scss中通过相对路径引用字体图标样式文件。

（1）代码实现

在color.scss中设置主题色变量，代码如下。

文件路径：common/css/color.scss

在index.scss中引入color.scss和iconfont.scss，代码如下。

文件路径：common/css/index.scss

在项目入口文件App.vue中引入index.scss，使index.scss中引入的样式在所有页面中生效。

文件路径：/App.vue

将my.vue中设置主题颜色的属性值替换为Sass变量“@theme-color”。

文件路径：/pages/my/my.vue

（2）运行效果

运行效果如图2-11所示。

图2-11 头部区域运行效果

2.5.3 制作自定义导航栏

1.搭建页面结构

从图2-11中可以看出，个人中心页头部区域上方还有一块背景为黑色的区域，该区域为uni-app原生导航栏。uni-app原生导航栏可以通过pages.json配置页面标题、背景色、阴影和标题颜色等样式。

uni-app原生导航栏可以实现的功能比较简单，在项目中使用存在一定的局限性，例如无法拓展类似搜索框、选项栏之类的功能，不能满足一些特定的产品需求（在“启嘉校园”项目中便是如此），这种情况下可以选择使用自定义导航栏来解决这个问题。自定义思想强调不依赖于惯性思维或通用的解决方案，而是根据特定情况自主创造适合的解决方法，这要求开发者在工作中要保持思维的灵活性和创新性。

（1）代码实现

自定义导航栏可以通过pages.json进行配置，配置分为全局配置和单页面配置两种，通过全局样式配置属性globalStyle可进行全局配置，通过页面数组属性pages可进行单页面配置。“启嘉校园”项目中的所有页面均需要使用自定义导航栏，因此需要通过globalStyle属性进行全局配置，关键代码如下。

制作自定义导航栏

文件路径：/pages.json

（2）运行效果

运行效果如图2-12所示。

图2-12 配置自定义导航栏后的运行效果

2.导航栏高度的适配

从图2-12中可以看出，配置完自定义导航栏后，头部区域上方黑色背景区域消失了。但是此时头部区域与小程序右上角的胶囊按钮和设备状态栏发生了重叠，设计图中头部区域与顶部还应存在一段距离，这段距离为小程序胶囊按钮和设备状态栏的高度之和。因为不同小程序平台的胶囊按钮的高度不同，不同设备的状态栏高度也不相同，所以需要借助JavaScript动态获取小程序胶囊按钮和设备状态栏的高度。

（1）代码实现

在my.vue中添加JavaScript代码实现自定义导航栏在不同设备下的适配。关键代码如下。

文件路径：/pages/my/my.vue

Template部分

JavaScript部分

（2）运行效果

运行效果如图2-13所示。

在图2-13中可以看到，头部区域与顶部产生了一段间距，并且这段间距是动态设置的，所以当尝试运行项目到其他小程序平台或在其他设备上查看时，会发现运行效果是相同的。

2.5.4 制作圆弧及功能列表区域

1.搭建页面结构

（1）设计图分析

在子任务2.5.1的设计图分析中，提到了圆弧及功能列表区域存在一个联动的拖动下拉动态效果，其内部又可分为纵向排列的圆弧区域、功能列表和退出按钮三部分，如图2-14所示。

图2-13 自定义导航栏运行效果

图2-14 圆弧及功能列表区域结构分析

（2）代码实现

通常情况下功能列表可以使用view组件作为包裹容器，但是考虑到在分辨率较低的设备中功能列表可能不会完整显示，因此可以使用uni-app的可滚动视图容器组件scroll-view作为功能列表的包裹容器，使功能列表可以滚动显示。在iOS平台，小程序页面默认存在下拉效果，但本页面不需要下拉功能，为了实现不同平台间的兼容统一，故使用scroll-view和修改页面配置来达到此效果，关键代码如下。

文件路径：/pages/my/my.vue

Template部分

CSS部分

2.实现拖动下拉效果

圆弧及功能列表的静态页面效果已经实现，接下来实现拖动下拉的动态效果。拖动下拉时，圆弧与功能列表位置下移；结束拖动下拉时，圆弧与功能列表回归原位。实现该功能后可以通过监听用户触摸屏幕事件，获取用户拖动位移的数值。当位移的数值超过指定大小时，通过改变圆弧及功能列表区域包裹容器的纵向平移属性translateY实现拖动下拉效果，关键代码如下。

文件路径：/pages/my/my.vue

Template部分