微信小程序面试总结

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:小程序相关全部总结在此贴中,持续迭代

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