学习目标:
一、首页模块
在首页面中能够查看医疗相关知识的相关文章列表以及关注科室医生。
1.1 布局模板
首先在配置文件中将首页面的导航栏设置为自定义的导航栏:
接下来是布局结构相关的代码:
最后是布局样式相关的代码:
1.1.1 custom-tabs
按 组件规范新建组件,该组件的交互逻辑在前面阶段已经完成了,将其拷贝过来即可。
1.1.2 custom-sticky
最后将两个组件引入到首页中
1.2 知识列表
知识列表分为关注、推荐、减脂和饮食4个类别,每个类别的布局结构是一致的,只是数据各不相同。
1.2.1 布局模板
不同类型的知识列表的布局结构是一致的,我们将其封装成一个公共的组件:
1.2.2 组件交互
切换标签页时,每个标签页对应了一个数据列表,这些数据列表要满足以下要求:
为此我们要构造一个数据结构:
在这个数据结构的基础上根据索引值的变化来获取当前标签页对应的数据:
以上代码中要关注的重点:
1.2.3 获取数据
根据接口文档封装调用接口的方法,地址在这里。
接下来在页面中调用方法获取数据并渲染。
在上述代码中大家要注意三点:
最后将请求的数据渲染到页面当中:
在渲染文章数据时内容字数太多了,结合 css 只保留 3 行,多余的部分用省略号代替,这段 css 代码我们已经封装到 sass 中了。
1.2.4 分页数据
在移动设备分页请求数据常常结合的交互是滚动加载或者叫上拉加载,实现这个交互需要做到3点:
上述监听滚动时并未做防抖的处理,大家自已来完善一下。
1.3 医生列表
获取推荐的医生列表,允许用户关注医生。
1.3.1 布局模板
1.3.2 获取数据
根据接口文档的要求封装调用接口的方法,地址在这里。
接下来调用接口获取数据
数据渲染相关的代码如下:
1.3.3 关注医生
根据接口文档的要求封装调用接口的方法,的地址在这里。
然后调用接口关注医生,并变更按钮的样式。
二、极速问诊
按如下配置文件的分包配置创建页面,共4个页面,要先创建好页面,再去添加配置文件。
2.1 问诊类型
问诊类型分为三甲图文和普通图文两种。
2.1.1 布局模板
2.2.2 传递参数
在页面跳转的过程需要跨页面传递数,可以使用地址参数或者 Pinia 来实现跨页面数的共享。
接收地址的参数,并继续传到下一个页面,到此总计有两个参数,参数的名称及含义都是由接口规定好的:
2.2 选择科室
选择问诊医生的科室,分为一级科室和二级科室
2.2.1 布局模板
2.2.2 获取数据
根据接口文档的要求封装调用接口的方法,地址在这里。
然后在页面中调用接口获取科室数据列表
2.2.3 标签切换
在点击一级科室时被点击的一级科室要被高亮显示,即添加 类名:
2.2.4 二级科室
分析返回的数据后发现,二级科室的数据和一级科室数据是嵌套的关系,因此可根据一级科室的索值来获取相应的二级科室数据。
2.2.5 传递参数
接收地址中的参数并继续传递到下一个页面,到此总计有 3 个参数,参数的名称及含义是由接口规定的:
2.3 病情描述
对病情进行简短的描述,包括是否就诊、患病时长等信息。
2.3.1 布局模板
2.3.2 病情数据
2.3.3 uniCloud
扩展组件 uni ui 提供了文件上传的 ,通过该组件可以轻松的将图片上传到云空间,在使用 组件之前先来开通免费的云空间。
在上述代码中关键的部分如下:
2.3.4 数据验证
要求病情描述、患病时长、是否就诊必填。
2.3.5 数据缓存
此处特意做出说明,地址中的 、、 三个参数,将来会和病情描述的数据一起来创建问诊订单,并且这些数据全都是要跨页面来使用,因此配合 Pinia 将其缓存到本地。
那为什么一开始不使用 Pinia 而是通过地址传参的呢?