uniapp开发微信小程序教程（二）实现一个页面

---

本文项目源码地址：https://gitee.com/caojianbang168/bi-demo.git

拿到需求原型并分析

原型如下所示：

一、设计页面结构：

小程序页面结构大体由3部分构成：顶部导航栏 + 内容区 + 底部导航栏。
我们要做的页面：顶部导航栏 + 内容区。
顶部导航栏从左到右包括：图标 + 返回按钮
内容区从上到下包括：时间选择组件 + tab切换组件 + 块状条形内容 + 分为三块的块状条形内容 + 饼图。

二、UI框架介绍及ColorUI

1. UI是什么
   先来说下 UI，这俩字母是 User Interface 的缩写，一般翻译成“用户界面”。UI最主要的功能就是建立用户和系统后台之间的联系，系统后台通过 UI 把数据转换成可视化的内容展示给用户，同时用户也要通过 UI 把操作指令（包括数据）传给系统后台。
   UI 应该是负责“交互”和“视觉”这两方面的工作，这两部分内容构成了产品的用户体验。
   用户体验里最重要的应该是这个产品好不好用，也就是“交互”这部分，这其中包括产品功能是否完善，产品流程是否设计的合理，使用是否方便，操作是否流畅等。
2. UI框架是什么
   简单点来讲就是一些常用的组件的集合，包括按钮、输入框、表单等等这些按照某种风格被做成了一套拿来即用的素材库。
3. ColorUI介绍
   ColorUI是一款比较常用的、漂亮的移动端UI框架，组件相对来说比较齐全，而且简单易用（页面的布局、顶部导航栏、时间选择控件、按钮、图标使用了ColorUI）。

三、在项目中引入用到的组件

组件和插件的区别：插件指的是现成的东西，比如说tab切换插件、卡片等等，组件就是我们项目中用的插件。比如说一扇门叫做插件，那么在我们的房子中，我会给门贴上对联，换上密码锁，这扇经过改造后的门就成了我们房子的组件。

1. uniapp引入ColorUI
   1）复制colorui文件到项目中
   2）App.vue中编写全局的适配变量、引入colorui全局样式
   3）main.js中引入并注册顶部导航栏组件custom
   4）pages.json将全局导航栏的样式定义为custom
   5）页面使用custom，页面声明custom组件高度
2. uniapp在插件市场引入需要的插件，以tab切换组件为例

四、开发页面

1. 内容布局
   1）时间选择组件
   参考colorui布局页面中的头部组件，固定在页面头部，不随页面滑（原因是按时间查询是核心查询条件，无论页面在何处都应可以随时切换时间）。具体操作是组件使用colorui页头固定样式，使用动态样式计算导航栏高度CustomBar，保证组件的贴合，声明变量queryDate，注册事件：前一天click_goBackDay，切换时间click_changeDate，后一天click_goNextDay。

   2）tab切换组件
   从插件市场引入该组件，页面引入并且声明变量items，注册tab切换的事件click_changeTab.

   3）块状条形内容
   两行文字的排列方式为垂直排列，文字居中，背景颜色为绿色.

   4）分为三块的块状条形内容，这里和下方的饼图都有一样的特征，那就是内容区外层是标题和内容区 + 边框，这样联想到使用card插件，引入card插件，使用卡片标题+额外信息类型的card，内外边距都设为0。
   三块内容使用colorui比例布局，平均分三份，每个小内容区参照块状条形内容.

   5）饼图
   说起图表，大家比较了解的是Echarts，Echarts不支持移动端，目前插件市场中用的最多的是ucharts，和Echarts相比来说，支持的可配置功能较少。后续如果有需求实现不了，可以使用webview使用Echarts。
   从插件市场引入该组件，页面引入并且声明变量chartData，在官网使用在线生成工具生成一个拼图的源码。根据原型构造展示数据。

2. 页面渲染
   在页面初始化的时候，请求后台接口，获得数据并渲染到页面上。页面初始化分为多个步骤，专业术语叫页面生命周期
   经过考虑屋面在onShow中执行请求数据的操作，原因是每次回到页面的时候，存在查询时间是当前日期的情况，这种情况就需要查询实时数据。
   在onShow方法里调用请求接口数据方法api_getOutPatientStatistics，查询时间默认为是昨天2021-12-22

3. 请求数据
   请求使用uniapp提供的API，一般都会二次封装一下，全局处理请求，错误统一处理，在main.js中引入common.js，注册全局属性$Common
   注册请求接口数据方法api_getOutPatientStatistics，将数据渲染到页面上{{}}

4. 更换时间后查询数据
   这里使用点击前一天举例子，在点击前一天的事件方法click_goBackDay中。第一步是将查询时间减一天，第二步调用api_getOutPatientStatistics

本文项目源码地址：https://gitee.com/caojianbang168/bi-demo.git