小程序官方文档:微信开放文档
核心知识点
-
小程序与普通网页的区别(双线程架构、沙箱机制)
小程序与普通网页在架构和运行机制上有显著区别,主要体现在双线程架构和沙箱机制上:
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 可自由访问。
优势:
- 安全性:限制敏感操作,防止恶意代码破坏。
- 稳定性:隔离运行环境,避免冲突,提升稳定性。
总结
小程序的双线程架构和沙箱机制使其在性能、安全性和稳定性上优于普通网页,适合轻量级、高频次的应用场景。参考资料:理解微信小程序的双线程模型
-
-
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 更靠近渲染流程,用以高性能地构建各种复杂的动画效果。
新的渲染流程如下图所示:
-
数据通信:
setData
原理及优化参考资料:合理使用 setData | setData调用频率&setData数据大小
数据双向绑定+diff算法,结合双线程架构和沙箱机制,事件通道
-
提升小程序性能
- 减少
setData
频率和数据量 - 图片懒加载与压缩
- 使用分包加载(subpackages)
- 利用骨架屏(skeleton screen)提升用户体验
- 减少
-
微信小程序授权登录流程
微信小程序授权登录流程如下:
- 用户点击小程序页面中的授权登录按钮。
- 小程序调用 wx.login API 获取用户的临时登录凭证code。
- 小程序将code发送到开发者服务器。
- 开发者服务器调用微信登录凭证校验API(api.weixin.qq.com/sns/jscode2…
- 开发者服务器生成自己的登录态(例如token),并将token、openid等信息保存到自己的数据库中。
- 开发者服务器将token返回给小程序。
- 小程序使用token发起后续的业务请求。
需要注意的是,小程序只能获取到用户的openid等基本信息,不能获取到用户的其他信息,如昵称、头像等。如果需要获取其他信息,需要引导用户进行微信公众号授权。
另外,为了保证用户信息的安全性,开发者在实现小程序授权登录功能时,需要注意以下几点:
- 不能直接将用户的openid等信息保存在小程序端,必须将其保存在开发者服务器上。
- 需要对用户的信息进行加密,保证其不被篡改。
- 需要设置有效期,定期更新token,避免被恶意利用。
-
其他
- 自定义 tabBar
- 路由管理
- 微信支付 微信小程序基础面试题 第35项
- 分包加载
- 明文 URL Scheme 分享中转页面 custom&小房子返回首页
- 自己实现国际化(i18n):全局变量+注意在切换语言时在tabbar页面更新tabbar text
- 自定义头部导航栏custom webview页面鉴权分享登录重新加载&session cookie相关问题
相关问题
- 小程序的生命周期函数有哪些?
- WXML 和 HTML 的区别是什么?
- 如何实现页面间传参?
- 解释小程序的双线程模型(渲染层 vs 逻辑层)。
setData
的工作原理是什么?如何优化其性能? 谈谈数据缓存策略?- 如何实现自定义 tabBar?
- 小程序如何实现国际化(i18n)?
- 谈谈你对小程序分包加载的理解。
- 如何实现一个实时搜索功能(防抖/节流)?
- 如何在小程序中集成微信支付?
- 请简述小程序登录授权流程
- 遇到白屏问题,如何排查和解决?
- 请谈谈Skyline 渲染引擎
- 小程序与 Taro、UniApp 等跨端框架的异同
- 开发微信小程序相关项目遇到的最大挑战是什么
- 订阅消息
- 分享功能实现
- 如何提升小程序性能
PS:小程序相关全部总结在此贴中,持续迭代
参考资料:微信小程序基础面试题