wechat-miniprogram.mdc

---
description: 微信小程序开发的最佳实践和常见模式
globs: "**/*.wxml", "**/*.wxss", "**/*.js", "**/*.json"
---

# 微信小程序最佳实践

## 项目结构
- 使用分包加载（Subpackages）来优化首次启动速度
- 将公共组件放在根目录的 `components` 文件夹中
- 将工具函数放在 `utils` 文件夹中
- 将图片等静态资源放在 `static` 或 `assets` 文件夹中

## WXML (视图层)
- 使用 `<block>` 标签进行条件渲染或循环，它本身不会被渲染
- 优先使用数据绑定，避免直接操作 DOM
- 使用 `<template>` 来复用代码片段

## WXSS (样式层)
- 使用 `rpx` (responsive pixel) 单位来适配不同屏幕尺寸
- 将全局样式定义在 `app.wxss` 中
- 使用 `@import` 导入外部样式表
- 启用并使用组件样式隔离（`styleIsolation`）

## JavaScript (逻辑层)
- **`setData` 优化**: 
  - 避免频繁调用 `setData`，合并多次调用
  - 只传递需要变更的数据，不要传递整个 `data` 对象
  - 避免传递过大的数据
- **生命周期**: 充分理解页面和组件的生命周期函数，在合适的时机执行操作
- **模块化**: 使用 ES6 模块化（`import`/`export`）来组织代码
- **异步操作**: 使用 Promise 或 `async/await` 处理异步 API（如 `wx.request`）

## 组件化开发
- 将可复用的 UI 元素封装为自定义组件
- 使用 `properties` 定义组件的外部数据
- 使用 `triggerEvent` 与父页面进行通信
- 使用 `behaviors` 来共享组件间的逻辑

## 状态管理
- 对于简单的全局状态，使用 `app.js` 的 `globalData`
- 对于复杂应用，引入第三方状态管理库（如 `mobx-miniprogram`）

## 性能优化
- 使用骨架屏（Skeleton Screen）或加载提示改善用户体验
- 对图片进行压缩，并使用 CDN
- 启用按需注入，减少不必要的代码和组件加载
- 及时清理定时器和事件监听器