141 lines
3.4 KiB
Markdown
141 lines
3.4 KiB
Markdown
|
---
|
|||
|
|
name: miniprogram-expert
|
|||
|
|
description: >
|
|||
|
|
小程序开发专家。当用户需要微信小程序、支付宝小程序、抖音小程序开发，
|
|||
|
|
Taro、uni-app 跨端框架，云开发、云函数、分包优化、setData 优化、
|
|||
|
|
登录授权、支付功能、审核上架，或说 "小程序"、"Taro" 时使用此技能。
|
|||
|
|
allowed-tools: Read, Glob, Grep, Edit, Write, Bash
|
|||
|
|
maturity: stable
|
|||
|
|
last-reviewed: 2026-02-18
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 小程序开发专家 (Mini Program Expert)
|
|||
|
|
|
|||
|
|
> **Output Style**: 本技能使用内联输出规范
|
|||
|
|
|
|||
|
|
专注于微信/支付宝/抖音等平台小程序开发，以及 Taro、uni-app 跨端开发。
|
|||
|
|
|
|||
|
|
## 触发关键词
|
|||
|
|
|
|||
|
|
- **平台**: `微信小程序`, `支付宝小程序`, `抖音小程序`, `百度小程序`
|
|||
|
|
- **框架**: `Taro`, `uni-app`, `Remax`
|
|||
|
|
- **功能**: `云开发`, `小程序登录`, `小程序支付`, `分享`
|
|||
|
|
- **优化**: `分包`, `性能优化`, `启动优化`
|
|||
|
|
|
|||
|
|
## 核心能力
|
|||
|
|
|
|||
|
|
- **原生开发**: 微信、支付宝、抖音、百度小程序
|
|||
|
|
- **跨端框架**: Taro 3.x、uni-app
|
|||
|
|
- **云开发**: 云函数、云数据库、云存储
|
|||
|
|
- **性能优化**: 启动、渲染、包体积优化
|
|||
|
|
- **核心功能**: 登录授权、支付、分享
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
### 微信小程序
|
|||
|
|
```
|
|||
|
|
miniprogram/
|
|||
|
|
├── app.js / app.json / app.wxss
|
|||
|
|
├── pages/
|
|||
|
|
│ └── index/
|
|||
|
|
│ ├── index.js / index.json
|
|||
|
|
│ ├── index.wxml / index.wxss
|
|||
|
|
├── components/
|
|||
|
|
├── utils/
|
|||
|
|
│ ├── request.js
|
|||
|
|
│ └── auth.js
|
|||
|
|
├── services/
|
|||
|
|
└── packageA/ # 分包
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Taro 项目
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── app.tsx / app.config.ts
|
|||
|
|
├── pages/
|
|||
|
|
│ └── index/
|
|||
|
|
│ ├── index.tsx
|
|||
|
|
│ └── index.config.ts
|
|||
|
|
├── components/
|
|||
|
|
├── hooks/
|
|||
|
|
├── store/
|
|||
|
|
└── services/
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 页面模板
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
Page({
|
|||
|
|
data: { list: [], loading: false },
|
|||
|
|
|
|||
|
|
onLoad(options) { this.init(options) },
|
|||
|
|
onShow() { },
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
this.loadData().then(() => wx.stopPullDownRefresh())
|
|||
|
|
},
|
|||
|
|
onReachBottom() { this.loadMore() },
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
return { title: '分享', path: '/pages/index/index' }
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async init(options) {
|
|||
|
|
this.setData({ loading: true })
|
|||
|
|
try {
|
|||
|
|
const data = await this.fetchData()
|
|||
|
|
this.setData({ list: data })
|
|||
|
|
} finally {
|
|||
|
|
this.setData({ loading: false })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## setData 优化
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// ❌ 全量更新
|
|||
|
|
this.setData({ list: this.data.list })
|
|||
|
|
|
|||
|
|
// ✅ 路径更新
|
|||
|
|
this.setData({
|
|||
|
|
'list[0].name': '新名称',
|
|||
|
|
[`list[${i}].done`]: true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// ✅ 合并更新
|
|||
|
|
const updates = {}
|
|||
|
|
items.forEach((item, i) => { updates[`list[${i}].checked`] = true })
|
|||
|
|
this.setData(updates)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 性能优化清单
|
|||
|
|
|
|||
|
|
**启动优化**
|
|||
|
|
- 主包 < 2MB，分包加载
|
|||
|
|
- `"lazyCodeLoading": "requiredComponents"`
|
|||
|
|
- 骨架屏
|
|||
|
|
|
|||
|
|
**渲染优化**
|
|||
|
|
- 减少 setData 频率和数据量
|
|||
|
|
- 长列表用虚拟列表
|
|||
|
|
- 图片懒加载
|
|||
|
|
|
|||
|
|
## 参考文档
|
|||
|
|
|
|||
|
|
详细API和代码请查阅:
|
|||
|
|
- `references/wx-api.md` - 微信小程序API速查
|
|||
|
|
- `references/taro-guide.md` - Taro跨端开发指南
|
|||
|
|
- `references/cloud-dev.md` - 云开发完整指南
|
|||
|
|
- `references/optimization.md` - 性能优化详解
|
|||
|
|
- `scripts/request.js` - 请求封装模板
|
|||
|
|
- `scripts/auth.js` - 登录授权模板
|
|||
|
|
|
|||
|
|
## 输出规范
|
|||
|
|
|
|||
|
|
- 中文回复，注释中文
|
|||
|
|
- 代码完整可运行
|
|||
|
|
- 说明平台兼容性差异
|
|||
|
|
- 提供性能优化建议
|
|||
|
|
- 避免废弃API
|
|||
|
|
- 不在setData传大量数据
|