uni-app（优医咨询）项目实战 - 第 10 天

优医咨询 - 面试题

围绕着优医咨询相关业务实现展开的面试问题，因此需要大家一定要对项目中每一个业务的实现都必须要事先掌握，下面整理的面试题是可能会被问的内容，在这里帮大家做一个梳理。

01. 请整体介绍一下优医咨询项目

产品方面：优医咨询是基于 uni-app 开发的跨平台的在线医疗项目，支持 H5、小程序和 Android 3 个平台，包含有医生、患者、药品、百科、订单等多个功能模块。

技术栈层面：uni-app 跨平台框架、Vue3 和 Pinia 。

业务功能层面：有即时通讯、云存储、云函数、在线支付、地图服务等。

02. 举例说明优医咨询项目中应用到哪些技术点?

项目中有应用到了许多的技术点，我来列举一些主要的：

  1. 腾讯位置服务，结合云函数实现了查询物流信息（路线规划）的功能
  2. uni ui 组件库，时间日期组件、倒计时组件、表单组件、文件上传组件、侧滑组件等，获取良好用户体验的同时提升开发项目的效率
  3. 基于 Socket.IO 实现了医生与患者的即时通讯
  4. 解决了在小程序中无法使用多色图标的缺陷
  5. Pinia 管理数据状态并进行持久化处理

03. 有没有使用过分包？如果有，介绍分包的使用方式及及意义

使用过小程序的分包，在使用分包时将具有关联性的页面和资源放到独立的目录中，然后在 pages.json 中配置该分包的目录位置及访分包中所包含的页面，这样便完成小程序分包的使用。

使用分包的意义在于分包能够优化小程序的性能，配置了分包后只有分包的页面被访问时才会被下载下来相当于实现了按需加载的功能，避免一次性下载全部小程序代码，用户可以更快速的打开小程序。

在配置了分包后还可以结合分包预加载进一步优化分包的加载，在访问某个页面时提前去加载一个即将被访问的分包。

使用分包还有一个原因就是小程序限制单个包的文件体积不能超过 2M，如果超过 2M 的情况下可以通过分包的方式来解决。

04. 介绍一下 uni-app 中跨端兼容的处理方案并举例说明

在开发过程中要处理不同平台的兼容时可以使用 uni-app 提供的条件编译功能，条件编译从语法上看是代码注释，但在打包代码会根据该注释为不同的平台生成不同的代码。

我在项目中实际的应用：

  1. 在样式方面，处理不同平台的样式兼容及异形屏（刘海屏）安全区域。
  2. 在页面结构方面，在不同的平台展示或隐藏某些功能，如在线支付时不同的平台支持不同的支付渠道
  3. 在逻辑方式，在不同的平台调用不同的 API，如实人认证的功能只能在 APP 端生效

05. 在项目中有没有使用状态管理，如何使用的？

在项目中使用 Pinia 做为状态管理的库，在 uni-app 中使用 Pinia 只能支持 Vue3 版本，使用的步骤:

  1. 安装 Pinia 并在入口 main.js 导入
  2. 调用 createPinia 创建 Pinia 实例
  3. 使用 defineStore 定义 Store，使用组件 API 定义响应式数据并 return
  4. 在 Vue 组件中引入并调用定义好的 Store

06. 在 uni-app 项目中有哪些常见的组件库？说明使用步骤

uni-app 官方提供了 uni ui 组件库，该组件库可以 uni-app 的插件市场下载，该组件库符合官方的 easycom 规范，因此无需要全局注册即可直接使用。

除了 uni ui 组件库外在 uni-app 项目经常用到的组件库还有 uView、uView Plus 等，在使用 uView 或 uView Plus 时步骤较多，一般会参照文档来操作。

07. 如何在 uni-app 项目中对标签列表进行缓存？

在 Vue 中可以借助 component 组件和 keep-alive 来对组件进行缓存，然而在 uni-app 中无法跨平台兼容 keep-alive 和 component，为了解决这个问题，在项目中我是配合 v-show 和 v-if 来实现的，v-if 保证列表组件只被创建 1 次，v-show 实现切换标签时显示 / 隐藏列表组件。

08. 在优医咨询项目中即时通讯的功能是如何实现的？

在项目中医生和患者在线能够发送文字和图片消息，该功能是使用 Socket.IO 即时通讯库来实现的，使用 on 方法监听事件来获取数据，使用 emit 触发事件来发送数据，但是 Socket.IO 不能支持原生小程序，解决这个问题使用了另一个即时通讯库 @hyoga/uni-socket.io 该组件库是在 Socket.IO 的基础上做的二次封装。

09. 在小程序中能否使用多色图标，如果能，是如何实现的？

原生小程序不支持使用 svg ，因此无法直接使用多色图标，为了解决这个问题使用工具 iconfont-tools 将多色字体图标转换成 base64 格式的图片，虽然是图片形式存在的，但是能够像使用字体图标一样来使用，即一个类名对应一个图标。

10. 介绍实现下拉刷新和上拉分页的实现方式

在小程序中实现下拉刷新和上拉分页有两种情形：

  1. 整个页面中实现下拉刷新和上拉分页
    • 配置项 enablePullDownRefresh 启用下拉刷新交互
    • 在页面中监听 onpulldownrefresh 事件，等待用户执行下拉操作
    • 调用 wx.stopPullDownRefresh 停止下拉动画交互
    • 上拉分页时监听 onReachBottom 事件，待等页面滚动到底部
  2. 在 scroll-view 中实现下拉刷新和上拉分页
    • 通过 refresher-enabled启用下拉刷新的交互
    • 监听 refresherrefresh 事件，等待用户执行下拉操作
    • 设置 refresher-triggered 值为 false 停止下拉交互
    • 上拉分页时监听 scrolltolower 事件，等待滚动内容到达 scroll-view 底部

11. 介绍说明在优医咨询项目中的支付实现流程？

在项目中实现在线支付的大致流程如下：

  1. 注册支付平台账号，常见的有微信支付平台、支付宝支付平台
  2. 后端程序员根据支付平台的文档对接微信支付或支付宝支付，对接完毕后提供接口供前端调用
  3. 前端调用由后端程序员提供的支付接口，传递订单号、支付金额待关键参数
  4. 获取支付接口返回的参数，并引导用户完成支付，在 H5 端会跳转 url 引导用户支付、小程序会调用 uni.requestPayment 来引导用户支付
  5. 支付完毕后返回项目的页面

12. 优医项目中 QQ 登录是如何实现的，请说明其流程

QQ 登录功能的实现分成以下几个步骤：

  1. 注册 QQ 互联账号并创建应用，获取 appid 配置回调地址 recirect_uri
  2. 在页面中放置 QQ 登录按钮，点击按钮后跳转到 QQ 登录页面，链接地址是由 QQ 平台提供的，需要拼接上申请的 appid
  3. 登录成功后会获取 access_token ，以地址参数据的方式传给开发者
  4. 使用 access_token 和 appid 获取用户 openid，使用 openid 进行登录

13. 在 uni-app 项目中有没有使用过云开发，实现过哪些功能？

在项目中使用过云开发，主要是云函数和云存储，实现过的功能包括 QQ 登录、实人认证、地图服务、统一支付等功能。

14. 在优医咨询项目地图服务实现了哪个功能，如何实现的？

优医咨询项目中查看药品订单物流信息时用到了地图服务的功能，实现的步骤：

  1. 注册腾讯地图服务账号并创建应用（WebService 方式）
  2. 在云函数中请求腾讯地图提供的 API 获取运输轨迹的经纬度坐标
  3. 在 map 组件中通过 polyline 来渲染出运输路径
  4. 使用 markers 标记运输车辆的当前位置

15. 介绍一下 uni-app 项目中实人认证的实现步骤？

实人认证的实现步骤：

  1. 在 uniCloud 平台开通实人认证服务
  2. 开启 uni-app 项目的实人认证模块
  3. 在客户端获取设备的信息，在云函数创建实人认证的实例
  4. 调用实人认证实例方法并传入姓名、身份证号等参数
  5. 在客户端打开实人认证摄像头进行认证
  6. 获取实人认证的结果