zouyu
know

小程序

# 1. 为什么小程序里拿不到 dom 相关的 api？

微信小程序采用了类似于 Web 的 WXML 和 WXSS 语言来描述页面结构和样式，但是却没有提供直接操作 DOM 的 API。

这是因为小程序本身是在一个 JavaScript 环境中运行的，其选用的是 JavaScriptCore 引擎，而不是浏览器中常见的 V8 引擎。

# 2. 小程序的双线程分别做的什么事情？

  1. 渲染线程：负责渲染界面，包括解析 WXML 和 WXSS、样式计算、布局排版和绘制视图等操作。

  2. 逻辑线程：负责运行 JavaScript 代码，包括数据绑定、事件处理、路由跳转等操作。

    通过双线程协同工作，可以实现小程序的高性能和流畅体验。当界面需要进行更新时，渲染线程会优先响应，避免造成卡顿；而逻辑线程则负责处理复杂的业务逻辑，不会对界面渲染产生影响。这种设计可以有效地提高小程序的运行效率，同时也能够更好地满足用户对于小程序的使用需求。

# 3. 小程序的性能优化有哪些方法？

  1. 减少网络请求：小程序的性能瓶颈主要是网络请求，因此减少网络请求是提升性能的关键。
  2. 压缩代码：小程序的体积一般在 1M 左右，因此压缩代码可以有效减少体积。
  3. 优化图片：小程序中使用了大量的图片，因此优化图片可以有效减少体积。
  4. 避免频繁的 setData 调用：setData 是小程序中最常用的 API，频繁调用会导致渲染线程频繁切换，影响性能。
  5. 避免过多的计算：小程序的运行环境是 JavaScriptCore，因此避免过多的计算可以提升性能。
  6. 避免过大的动画：小程序的动画效果一般都比较简单，因此避免过大的动画可以提升性能。
  7. 避免过大的 Canvas 绘制：Canvas 绘制的性能瓶颈主要是渲染线程，因此避免过大的 Canvas 绘制可以提升性能。
  8. 避免过大的本地存储：小程序的本地存储大小一般在 10M 左右，因此避免过大的本地存储可以提升性能。
  9. 避免过大的内存占用：小程序的内存占用一般在 10M 左右，因此避免过大的内存占用可以提升性能。

# 4. 微信小程序的架构?

微信小程序主要采用的是 MVVM（Model-View-ViewModel）架构模式 微信小程序的架构分为四层：

  1. 视图层：负责渲染页面，包括 WXML 和 WXSS。
  2. 逻辑层：负责运行 JavaScript 代码，包括数据绑定、事件处理、路由跳转等。
  3. 运行环境：包括 JavaScriptCore 引擎、Webview 内核、Webview 容器等。
  4. 网络层：负责网络请求，包括 XMLHttpRequest、WebSocket 等。

微信小程序架构图

# 5. 小程序的生命周期?

微信小程序的生命周期分为三个阶段：

# 6. 小程序页面间有哪些传递数据的方法？

  1. 页面跳转参数传递 使用 wx.navigateTo、wx.redirectTo 等跳转页面时，可以通过 url 的 query 参数传递数据。目标页面可在 onLoad 方法的参数中获取。

  2. 全局变量（App 实例） 可以将数据存储在 App() 实例上，通过 getApp() 获取全局数据，实现页面间共享。

  3. 本地存储 使用 wx.setStorageSync、wx.getStorageSync 等 API，将数据存储到本地，其他页面可随时读取。

  4. 事件总线（自定义事件） 通过第三方库（如 mitt、eventemitter3）或自定义事件机制，实现页面间的消息通知和数据传递。

  5. 页面栈直接访问 通过 getCurrentPages() 获取页面栈，可以直接访问前一个页面的实例，进而操作其数据。

  6. 全局状态管理 使用如 MobX、Redux 等状态管理库，将数据统一管理，实现多页面间的数据同步。

  7. 云开发数据库 通过云开发数据库存储和读取数据，实现页面间的数据共享（适合复杂场景）。

常用场景举例：

  • 页面跳转时传递简单参数：用 URL 参数。
  • 多页面共享用户信息：用全局变量或本地存储。
  • 页面间通知刷新：用事件总线或页面栈访问。

# 7. 微信小程序 bindtap 和 catchtap 区别？

相同点： 都是点击事件 不同点： bindtap 不会阻止冒泡，catchtap 可以阻止冒泡。

# 8. 小程序 WXSS 与 CSS 的区别？

  1. 单位支持不同 WXSS 新增了 rpx（响应像素）单位，适配不同屏幕宽度，CSS 没有 rpx 单位。

  2. 兼容性不同 WXSS 只支持 CSS 的部分语法和属性，不支持如伪类选择器（:hover）、部分高级选择器等。

  3. 全局样式与局部样式 小程序支持全局样式（app.wxss）和页面级样式（每个页面的 wxss），而 CSS 没有这种强制区分。

  4. 样式隔离机制 小程序每个页面的 WXSS 默认样式隔离，互不影响；CSS 默认是全局作用域。

  5. @import 语法 WXSS 支持 @import 导入其他 wxss 文件，CSS 也支持，但 WXSS 只支持本地文件，不支持网络文件。

  6. 部分属性不支持 WXSS 不支持部分 CSS3 新属性，如动画、部分布局属性等。

  7. WXSS 选择器支持差异 不支持属性选择器 不支持级联选择器（如 div p） 通配符 '*' 作用范围有限 预处理器 WXSS 不支持 Sass/Less 等预处理语法（需依赖构建工具转换）

总结： 小程序 WXSS (WeiXin Style Sheets) 与标准 CSS 在核心概念上保持一致，但在具体实现上有一些差异。 1rpx ≈ 0.5px @750px 设计稿标准

# 9. 小程序如何实现 rpx 到 px 的转换？如何适配不同屏幕密度设备？

  1. rpx 转 px 原理

    • rpx（responsive pixel）是微信小程序的自适应单位。
    • 1rpx = 屏幕宽度 / 750。例如，iPhone 6 屏幕宽度为 375px，则 1rpx = 0.5px。

  2. 适配不同屏幕密度

    • 小程序运行时会自动根据设备屏幕宽度计算 rpx 对应的 px。
    • 在高密度屏（如 Retina）下，实际物理像素会更多，但开发者只需按设计稿（一般 750px 宽）用 rpx 编写样式即可。
    • 小程序框架会自动适配不同分辨率和密度，无需手动处理。

总结： 开发时统一用 rpx，微信小程序会自动转换为对应设备的 px，实现多屏幕和高密度设备的适配。

上次更新: