微信小程序面试总结

高台树色
250 阅读6分钟

小程序官方文档：微信开放文档

核心知识点

  1. 小程序与普通网页的区别（双线程架构、沙箱机制）

      小程序与普通网页在架构和运行机制上有显著区别，主要体现在双线程架构和沙箱机制上：

      1. 双线程架构

      小程序采用双线程架构，分为逻辑层和视图层，分别运行在不同的线程中：

    • 逻辑层（App Service） ：

      • 负责处理业务逻辑、数据请求等。
      • 运行在独立的 JavaScript 线程中，与视图层分离。
      • 通过 API 与视图层通信，确保逻辑处理不影响界面渲染。

    • 视图层（View） ：

      • 负责界面渲染和用户交互。
      • 运行在 WebView 线程中，通过 WXML 和 WXSS 构建界面。
      • 通过事件机制与逻辑层通信，响应用户操作。

      优势：

    • 性能提升：逻辑层与视图层分离，避免阻塞，提升流畅度。
    • 安全性增强：逻辑层无法直接操作 DOM，减少安全风险。
      2. 沙箱机制

      小程序的 JavaScript 运行在沙箱环境中，与普通网页的 JavaScript 有以下区别：

    • 受限的 DOM/BOM 访问：

      • 小程序逻辑层无法直接操作 DOM 或 BOM，只能通过 API 间接操作。
      • 普通网页的 JavaScript 可以自由操作 DOM 和 BOM。

    • 受限的网络请求：

      • 小程序的网络请求需通过特定 API 进行，且受域名白名单限制。
      • 普通网页可以自由发起网络请求。

    • 受限的存储访问：

      • 小程序的本地存储通过 API 进行，数据隔离，避免冲突。
      • 普通网页的 localStorage 和 IndexedDB 可自由访问。

      优势：

    • 安全性：限制敏感操作，防止恶意代码破坏。
    • 稳定性：隔离运行环境，避免冲突，提升稳定性。

      总结

      小程序的双线程架构和沙箱机制使其在性能、安全性和稳定性上优于普通网页，适合轻量级、高频次的应用场景。参考资料：理解微信小程序的双线程模型

  1. Skyline 渲染引擎

      当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。

      在 Skyline 环境下，我们尝试改变这一情况：Skyline 创建了一条渲染线程来负责 Layout, Composite 和 Paint 等渲染任务，并在 AppService 中划出一个独立的上下文，来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。这种新的架构相比原有的 WebView 架构，有以下特点：

    • 界面更不容易被逻辑阻塞，进一步减少卡顿
    • 无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销
    • 框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销
    • 框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销

      而与此同时，这个新的架构能很好地保持和原有架构的兼容性，基于 WebView 环境的小程序代码基本上无需任何改动即可直接在新的架构下运行。WXS 由于被移到 AppService 中，虽然逻辑本身无需改动，但询问页面信息等接口会变为异步，效率也可能有所下降；为此，我们同时推出了新的 Worklet 机制，它比原有的 WXS 更靠近渲染流程，用以高性能地构建各种复杂的动画效果。

      新的渲染流程如下图所示：

  1. 小程序的生命周期（App/Page/Component）

      详细请看官方文档or底部参考资料

      应用生命周期 | 页面生命周期 | 组件生命周期

  1. 数据通信：setData 原理及优化

      参考资料：合理使用 setData | setData调用频率&setData数据大小

      数据双向绑定+diff算法，结合双线程架构和沙箱机制，事件通道

  1. 提升小程序性能

    • 减少 setData 频率和数据量
    • 图片懒加载与压缩
    • 使用分包加载（subpackages）
    • 利用骨架屏（skeleton screen）提升用户体验

  1. 微信小程序授权登录流程

      微信小程序授权登录流程如下：

    • 用户点击小程序页面中的授权登录按钮。
    • 小程序调用 wx.login API 获取用户的临时登录凭证code。
    • 小程序将code发送到开发者服务器。
    • 开发者服务器调用微信登录凭证校验API（api.weixin.qq.com/sns/jscode2…
    • 开发者服务器生成自己的登录态（例如token），并将token、openid等信息保存到自己的数据库中。
    • 开发者服务器将token返回给小程序。
    • 小程序使用token发起后续的业务请求。

      需要注意的是，小程序只能获取到用户的openid等基本信息，不能获取到用户的其他信息，如昵称、头像等。如果需要获取其他信息，需要引导用户进行微信公众号授权。

      另外，为了保证用户信息的安全性，开发者在实现小程序授权登录功能时，需要注意以下几点：

    • 不能直接将用户的openid等信息保存在小程序端，必须将其保存在开发者服务器上。
    • 需要对用户的信息进行加密，保证其不被篡改。
    • 需要设置有效期，定期更新token，避免被恶意利用。

  1. 其他

相关问题

  • 小程序的生命周期函数有哪些？
  • WXML 和 HTML 的区别是什么？
  • 如何实现页面间传参？
  • 解释小程序的双线程模型（渲染层 vs 逻辑层）。
  • setData 的工作原理是什么？如何优化其性能？ 谈谈数据缓存策略？
  • 如何实现自定义 tabBar？
  • 小程序如何实现国际化（i18n）？
  • 谈谈你对小程序分包加载的理解。
  • 如何实现一个实时搜索功能（防抖/节流）？
  • 如何在小程序中集成微信支付？
  • 请简述小程序登录授权流程
  • 遇到白屏问题，如何排查和解决？
  • 请谈谈Skyline 渲染引擎
  • 小程序与 Taro、UniApp 等跨端框架的异同
  • 开发微信小程序相关项目遇到的最大挑战是什么
  • 订阅消息
  • 分享功能实现
  • 如何提升小程序性能

PS：小程序相关全部总结在此贴中，持续迭代

参考资料：微信小程序基础面试题

avatar
文章
阅读
粉丝