微信小程序

Appearance

小程序基础 - 面试题 ​

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

01. 请整体介绍一下享+生活小程序项目 ​

产品方面：享+生活是一个服务于社区业主的小程序项目，为业主提供房屋管得、在线报修、访客邀请等主要功能，是业主与物业高效沟通的桥梁。

技术栈层面：享+生活是一个微信小程序项目，采用原生小程序技术来实现的。

业务功能层面：有文件上传、路线规划、逆地址解析、地点搜索、位置选择、短信验证码、自定义分享、相册访问、拍照、数据存储等。

第三方解决方案：腾讯位置服务、Vant 组件库、wechat-http 网络请求、wechat-validate 数据验证码

02. 举例说明享+生活项目中应用到哪些技术点? ​

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

  1. 腾讯位置服务，结合用户的位置实现地点搜索、逆地址解析、路线规划等功能
  2. Vant 组件库，时间日期组件、倒计时组件、表单组件、文件上传组件、侧滑组件等，获取良好用户体验的同时提升开发项目的效率
  3. 封装组件实现用户登录状态的检测，将检测登录的逻辑封装到组件当中
  4. 使用到 wechat-http 来进行网络请求，wechat-validate 来实现表单数据的验证
  5. 借助于页面栈来实现跨页数据的共享和操作

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

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

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

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

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

04. 在项目如何全局检测用户的登录状态？ ​

在项目开发的过程中尝试过多种方式来实现全局检测用户的登录状态，最终的解决方案是将检测登录的逻辑封装到组件当中，这种方式对原页面的影响最小（几乎不影响）。

具体的实现思路：

  1. 在组件中定义一个插槽，且只有用户是处于登录状态时才会显示插槽，目的是保证用户未登录时页面内容不显示。
  2. 在组件生命周期中通过全局实例或本地存储读取用到的登录状态（一般是 token），没有检测到登录状态的情况跳转到页面到登录页面。
  3. 在跳转登录页面时获取当前页面的路径（通过页面栈来获取），并将该路径传给登录页面，目的是保证登录成功后能够跳回原来的页面
  4. 覆盖页面的生命周期 onLoad 和 onShow，保证未登录的情况下页面不执行任务业务逻辑，如网络请求等
  5. 在需要检测用户登录状态的应用中应用该组件即可

05. 在项目中如何实现跨页面的数据通信？ ​

在小程序开发过程中实现跨页面数据通信的场景挺多的，比如在设置用户头像和昵称时就用到了：

  1. 最容易理解的方式是使用本地存储，setStorageSync 和 getStorageSync
  2. 也可以通过 getApp 获取应用实例来实现跨页面的数据共享
  3. 还可以使用 eventChannel 来实现，但是这种方式我应用的比较少
  4. 最后就是通过页面栈来获取页面实例的方式来实现，这种方式不仅能够跨页面访问数据，还能够跨页面对页面进行重新渲染（调用 setData）

在项目开发过程中除了 eventChannel 外其它的方式都应用到了

06. 在项目中有没有过组件库？说明使用步骤 ​

用到过，小程序官方的 WeUI 和 Vant 是我经常使用的组件库，在享+生活小程序中使用的是 Vant 组件库。

如果使用的是 WeUI 组件可以不用安装直接使用，需要在 app.json 中配置 useExtendedLib，这种方式的优点是 WeUI 组件不占用小程序的文件体积，再通过 usingComponents 来注册组件就可以了。

如果使用的是 Vant 组件库，需要通过 npm install 进行安装，安装完成后还必须要构建 npm ，构建完成后同样的也需要通过 usingComponents 注册后再使用。

关于 WeUI 的使用说明见文档

07. 你会如何设计关于网络请求的封装？ ​

小程序中网络请求使用 wx.request 但是一般需要进行二次封装后再使用它，我一般会从这几个方面进行封装：

  1. 使用支持 Promise，再配置 async/await 来调用接口
  2. 支持配置全局配置接口基础路径，即 baseURL
  3. 支持定义请求和响应拦截器，方便统计控制网络的请求及响应逻辑
  4. 将封装的逻辑挂载到全局对象 wx 上来全局使用（不必每个页面都要导入模块了）

在开发中为了保证开发效率通过会使用现成的第三方模块，享+生活中使用的是 wechat-http 它包含了我刚列举的这些功能点。

08. 在项目中有没有使用过 Behaviors？ ​

使用过，behaviors 的功能类似于 Vue2 中的 mixin 的用法，可以将页面或组件的公共逻辑提取出来，进行实现复用，通常是定义一些公共的数据和公共的方法。

在使用时分成两个步骤：

  1. 先通过 Behaviors 函数来定义公共的逻辑
  2. 然后在页面或组件中通过 behaviors 属性来引用封装好的 Behaviors 逻辑

在开发中我常常将表单数据验证的逻辑封装到 Behaviors 当中，享+生活中使用的 wechat-validate 模块就是封装了 Behaviors 实现的。

09. 列举在项目中所使用到的小程序的 API ​

在享+生活项目中用到的 API 有：

  1. wx.showLoading
  2. wx.hideLoading
  3. wx.showToast
  4. wx.getStorageSync
  5. wx.setStorageSync
  6. wx.request
  7. wx.uploadFile
  8. wx.getImageInfo
  9. wx.chooseMedia
  10. wx.saveImageToPhotosAlbum
  11. wx.getLocation
  12. wx.chooseLocation
  13. wx.navigateTo
  14. wx.redirectTo
  15. wx.navigateBack
  16. wx.reLaunch
  17. wx.setNavigationBarTitle
  18. wx.getSystemInfoSync
  19. wx.setClipboardData
  20. wx.getClipboardData

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

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

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

11. 如何在小程序中渲染富文本的内容？ ​

小程序中提供了 rich-text 组件来对富文件的内容进行渲染，富文本的内容常常会包含 html 标签，将富文本的内容赋值给 nodes 属性即可，一般文章详情或商品详情会用到富文本的数据。

12. 列举一个在项目中优化小程序的技术点 ​

小程序中调用 setData 不恰当会导致性能有所损耗，针对这一点做了如下优化处理：

  1. 减少 setData 的调用次数，尽量将多次数据的更新合并成一次
  2. 减少单次 setData 数据量的大小，理论值不超过 256KB（实际开发中没有遇到过规模较大的数据）
  3. 在频繁调用 setData 的情况下，如监听了滚动事件，封装节流函数控制调用的频次
  4. 单纯只是数据更新，不涉及页面渲染的数据不调用 setData，而是将其定义为全局数据或直接挂载到页面实例 this 上

13. 如何获取微信用户的头像和昵称？ ​

在小程序中获取微信用户的头像和昵称不再需要调用 wx.getUserInfo 了，现在小程序提出了新的解决方案：

  1. 获取头像
    • 必须要使用 button 组件
    • 设置 open-type 属性值为 chooseAvatar
    • 监听 chooseavatar 事件
  2. 获取昵称
    • 必须使用 input 组件
    • 设置 type 属性值为 nickname
    • 监听 blur 事件
  3. 头像和昵称数据都是通过事件对象来获取的

14. 如何在小程序中实现文件的上传？ ​

小程序中实现文件上传需要 3 个关键的步骤，以图片为例：

  1. 首先要在小程序管事后台配置接口服务器域名
  2. 调用 wx.chooseMedia 获取相册或拍照的图片
  3. 调用 wx.uplpadFile 将图片上传到服务器

在这个过程中 wx.chooseMedia 获取的图片路径是临时路径，只能在小程序内使用，必须要通过 wx.uploadFile 上传到自已服务器。

15. 享+生活中腾讯位置服务中如何使用的？ ​

  1. 注册账号成为开发者
  2. 在管理后创建应用并申请 key，在申请 key 的时候勾选 WebServiceAPI 和 域名白名单
  3. 在小程序管理后台添加服务器域名 https://apis.map.qq.com
  4. 下载微信小程序 JavaScriptSDK
  5. 实例 SDK 并传入申请到的 key
  6. 调用 SDK 提供的方法获取相应的结果

根据 MIT 许可证发布

Copyright © 2023 黑马程序员