{SKILLS分享}分享微信小程序开发全面指南SKILLS

技巧分享
1

# 微信小程序开发全面指南SKILLS

trae技巧便利店

简介
专注提供微信小程序定制开发、技术指导、问题排查与优化升级一站式解决方案，覆盖从需求梳理、架构设计、代码编写到上线运营全流程。

深耕小程序开发实战，精通页面搭建、数据交互、自定义组件、微信授权、支付接入、云开发集成等核心功能，遵循官方规范与性能最佳实践，保障小程序稳定流畅、体验优质、安全合规。

可为个人开发者、初创团队及企业提供：零基础入门指导、现有项目 bug 修复、性能瓶颈优化、功能迭代升级，助力快速打造适配多场景、易用高效的微信小程序，实现线上服务与业务价值落地。

这是制作的微信小程序：“马年祝福语福气满满”，已上线。现在更新的第二个版本V1.1.0,欢迎大家微信扫码查看，有好的建议帮忙评论，我更新到下一个版本。

gh_34f3edb89e2b_344 (1)
gh_34f3edb89e2b_344 (1)344×344 61.3 KB

结尾有SKILLS，发给trae就可以添加。

一、基础开发入门

1. 项目初始化与核心结构

微信小程序的核心目录结构遵循固定规范，以下是最简且规范的项目结构：
```
├── pages/ # 页面目录（每个页面一个子文件夹）
│ ├── index/ # 首页
│ │ ├── index.js # 页面逻辑
│ │ ├── index.json # 页面配置
│ │ ├── index.wxml # 页面结构
│ │ └── index.wxss # 页面样式
├── app.js # 全局逻辑
├── app.json # 全局配置（页面路由、窗口样式等）
└── app.wxss # 全局样式
```

**核心配置示例（app.json）**：
```json
{
“pages”: [
“pages/index/index”, // 首页（第一个为默认启动页）
“pages/form/form” // 表单页
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “小程序示例”,
“navigationBarTextStyle”: “black”
},
“sitemapLocation”: “sitemap.json”
}
```

2. 页面生命周期（核心）

每个页面的 `js` 文件中需定义生命周期函数，关键函数及执行顺序：
```javascript
Page({
// 页面加载时执行（仅触发一次）
onLoad(options) {
// options 可获取页面跳转传参，如：/pages/detail/detail?id=1
console.log(‘页面参数：’, options.id);
},
// 页面显示/切回前台时执行
onShow() {},
// 页面初次渲染完成后执行
onReady() {},
// 页面隐藏/切后台时执行
onHide() {},
// 页面卸载时执行（如返回上一页）
onUnload() {}
});
```

二、常用功能实现

1. 表单实现（最常用）

**WXML（结构）**：
```xml

姓名： 手机号： 提交 \`\`\`

**JS（逻辑）**：
```javascript
Page({
formSubmit(e) {
// 获取表单数据
const formData = e.detail.value;
console.log(‘表单数据：’, formData);

// 数据校验
if (!formData.name) {
  wx.showToast({ title: '请输入姓名', icon: 'none' });
  return;
}
if (!/^1\[3-9\]\\d{9}$/.test(formData.phone)) {
  wx.showToast({ title: '手机号格式错误', icon: 'none' });
  return;
}

// 提交到后端（示例）
wx.request({
  url: 'https://your-api.com/submit',
  method: 'POST',
  data: formData,
  success(res) {
    wx.showToast({ title: '提交成功' });
  },
  fail() {
    wx.showToast({ title: '提交失败', icon: 'none' });
  }
});

}
});
```

2. 网络请求（wx.request）

**封装通用请求函数（推荐，便于维护）**：
```javascript
// utils/request.js
const baseUrl = ‘https://your-api.com’;

export const request = (options) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseUrl + options.url,
method: options.method || ‘GET’,
data: options.data || {},
header: {
‘Content-Type’: ‘application/json’,
// 可添加token等自定义头
‘token’: wx.getStorageSync(‘token’) || ‘’
},
success(res) {
// 统一处理业务错误
if (res.data.code !== 200) {
wx.showToast({ title: res.data.msg || ‘请求失败’, icon: ‘none’ });
reject(res.data);
return;
}
resolve(res.data);
},
fail(err) {
wx.showToast({ title: ‘网络异常，请稍后重试’, icon: ‘none’ });
reject(err);
}
});
});
};

// 页面中使用
import { request } from ‘../../utils/request’;

Page({
async getList() {
try {
const res = await request({
url: ‘/list’,
data: { page: 1, size: 10 }
});
console.log(‘列表数据：’, res.data);
} catch (err) {
console.error(‘请求失败：’, err);
}
}
});
```

3. 本地存储（wx.getStorage/wx.setStorage）

```javascript
// 存储数据（异步，推荐）
wx.setStorage({
key: ‘userInfo’,
data: { name: ‘张三’, age: 20 },
success() {
console.log(‘存储成功’);
}
});

// 读取数据（异步）
wx.getStorage({
key: ‘userInfo’,
success(res) {
console.log(‘读取数据：’, res.data);
}
});

// 同步方法（适合简单场景）
wx.setStorageSync(‘token’, ‘abc123’);
const token = wx.getStorageSync(‘token’);

// 删除数据
wx.removeStorageSync(‘userInfo’);
```

三、性能优化最佳实践

1. 基础优化

  1. **减少首屏加载时间**：
    • 非首屏页面使用「分包加载」，拆分大体积代码
    • 图片使用 `wx:lazy-load` 懒加载：``
  2. **优化渲染性能**：
    • 避免频繁 setData（单次 setData 合并多字段，减少调用次数）
    • 减少 WXML 中不必要的节点嵌套，避免使用 `display: none` 隐藏大量节点
  3. **网络优化**：
    • 接口请求添加缓存（避免重复请求）
    • 压缩接口返回数据体积（如只返回必要字段）

2. 分包加载配置（app.json）

```json
{
“pages”: [“pages/index/index”],
“subpackages”: [
{
“root”: “packageA”,
“pages”: [“pages/detail/detail”]
}
]
}
```

四、常见问题排查

1. API 调用失败

  • **原因1**：未配置合法域名（小程序后台 → 开发管理 → 开发设置 → 服务器域名）
  • **原因2**：API 入参格式错误（如必填参数缺失、类型不匹配）
  • **原因3**：网络请求未使用 HTTPS（微信强制要求）

2. setData 不生效

  • 检查数据路径是否正确（如 `this.setData({ ‘list[0].name’: ‘李四’ })`）
  • 避免直接修改 data 后调用 setData（如 `this.data.list = []` 无效，需 `this.setData({ list: [] })`）

3. 页面跳转失败

  • 检查 `app.json` 中是否配置该页面路径
  • 避免多层 `navigateTo` 跳转（最多十层，建议用 `redirectTo` 或 `switchTab`）

五、开发工具与调试

  1. **官方开发者工具**：[下载地址]( 微信开放文档 )
    • 支持代码编辑、模拟器预览、真机调试、性能分析
  2. **调试技巧**：
    • 使用 `console.log` 打印日志（工具控制台查看）
    • 真机调试：点击工具「预览」→ 扫码在手机上调试
    • 开启「调试器」→「AppData」查看页面 data 实时数据

总结

  1. **核心基础**：小程序开发需遵循固定目录结构，重点掌握页面生命周期和 `setData` 数据更新逻辑。
  2. **功能实现**：表单、网络请求等常用功能建议封装通用函数，提升代码复用性和可维护性。
  3. **优化重点**：通过分包加载、懒加载、减少 setData 调用次数等方式提升小程序性能，排查问题优先检查域名配置、参数格式和数据更新方式。

以下为SKILLS，不知道为啥上传不了压缩包，只能上传图片，大家复制发给trae或者创建个.MD文件复制进去，用trae导入，在TRAE的设置-规则和技能-技能-创建-导入

wechat-miniprogram-dev

Provides guidance and best practices for WeChat Mini Program development. Invoke when user needs help with WeChat Mini Program coding, architecture, or troubleshooting.

WeChat Mini Program Development

This skill provides comprehensive guidance for WeChat Mini Program development, including best practices, architecture design, and troubleshooting solutions.

Usage

To use this skill, ask questions related to WeChat Mini Program development, such as:

  • How to implement specific features in WeChat Mini Programs
  • Best practices for WeChat Mini Program architecture
  • Troubleshooting common issues in WeChat Mini Programs
  • Optimization techniques for WeChat Mini Programs

Example

  • “How to implement a form in WeChat Mini Program”
  • “Best practices for WeChat Mini Program state management”
  • “How to optimize WeChat Mini Program performance”
  • “Troubleshooting WeChat Mini Program API errors”

Features

  • Provides step-by-step guides for common WeChat Mini Program features
  • Offers best practices for code structure and architecture
  • Includes troubleshooting tips for common issues
  • Covers performance optimization techniques
  • Provides examples of common use cases

Common Topics

1. Basic Structure

  • Project initialization and setup
  • Page lifecycle management
  • Component development
  • Data binding and event handling

2. API Usage

  • wx.request for network requests
  • wx.getStorage for local storage
  • wx.navigateTo for page navigation
  • wx.showToast for user feedback

3. Advanced Features

  • Cloud functions integration
  • WeChat Pay integration
  • Real-time data synchronization
  • Custom components development

4. Performance Optimization

  • Code splitting and lazy loading
  • Image optimization
  • Network request optimization
  • Rendering performance improvement

5. Best Practices

  • Code organization and structure
  • Error handling and debugging
  • Security considerations
  • User experience design

Troubleshooting

Common Issues

  • API call failures
  • Page loading errors
  • Performance bottlenecks
  • Compatibility issues across devices

Solutions

  • Check API documentation for correct usage
  • Use try-catch blocks for error handling
  • Implement proper error messages for users
  • Test across different devices and WeChat versions

Resources

This skill is regularly updated to include the latest WeChat Mini Program development practices and features.

1 个赞
2

小程序挺好的

1 个赞
3

厉害啊 :woman_mechanic: