| name | miniprogram-architect |
| description | 提供微信小程序架构设计、项目结构优化、代码规范制定和组件库建立支持。当用户需要搭建新的微信小程序项目、重构现有项目结构或建立组件库时调用。 |
name: "miniprogram-architect"
description: "提供微信小程序架构设计、项目结构优化、代码规范制定和组件库建立支持。当用户需要搭建新的微信小程序项目、重构现有项目结构或建立组件库时调用。"
微信小程序架构师
功能介绍
本技能专注于微信小程序的架构设计和项目管理,为用户提供以下支持:
- 微信小程序项目结构设计和优化
- 代码规范和目录分割标准制定
- 组件库建立和复用策略
- 性能优化和最佳实践
- 项目架构文档编写
- 网络请求与API封装标准化
- 用户授权与隐私合规开发
适用场景
当用户需要:
- 新建微信小程序项目并搭建完整目录结构
- 重构现有小程序项目结构
- 制定团队开发规范和标准
- 建立可复用的组件库
- 优化小程序性能和加载速度
项目架构
目录结构
miniprogram-architect/
├── api/ # API相关文件
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ └── styles/ # 样式文件
├── pages/ # 页面文件
│ ├── index/ # 首页
│ └── tabBar/ # 底部导航栏页面
├── utils/ # 工具函数
├── app.js # 小程序入口文件
├── app.json # 小程序配置文件
├── app.wxss # 全局样式文件
├── project.config.json # 项目配置文件
├── project.private.config.json # 项目私有配置文件
└── sitemap.json # 小程序站点地图
技术栈
- 微信小程序原生开发
- WXML + WXSS + JavaScript
- WeUI组件库
- 微信官方API
使用指南
项目初始化
- 目录结构搭建:创建标准的小程序目录结构
- 配置文件设置:配置app.json、project.config.json等文件
- 基础文件创建:创建app.js、app.wxss等基础文件
代码规范
- 命名规范:文件、变量、函数的命名规则(It is not allowed to use Chinese naming.)
- 代码风格:缩进、注释、代码组织方式
- 目录分割:页面、组件、工具函数的目录划分标准
模块导出规范(ES6 export * as)
在小程序项目中,可使用 ES2020 的 命名空间重导出 来统一导出路径配置、路由映射等,便于集中管理和复用:
export const home = 'pages/index/index'
export const about = 'pages/about/index'
export * as paths from './variable';
console.log(paths.home)
import { home } from './variable';
console.log(home)
组件库建立
- 组件设计:设计可复用的组件结构
- 组件规范:组件命名、参数传递、事件处理
- 组件文档:编写组件使用说明和示例
性能优化
- 代码体积优化:减少小程序包大小
- 加载性能优化:提高页面加载速度
- 运行性能优化:优化小程序运行时性能
最佳实践
目录结构最佳实践
- 模块化:按功能模块划分目录
- 组件化:将可复用部分抽象为组件
- 工具函数:将通用功能封装为工具函数
代码规范最佳实践
- 命名规范:使用驼峰命名法,避免使用拼音
- 注释规范:关键代码添加注释,说明功能和实现思路
- 代码组织:逻辑清晰,结构合理
性能优化最佳实践
- 按需加载:使用lazyCodeLoading和componentPlaceholder
- 图片优化:使用合适的图片格式和大小
- 网络请求优化:合理使用缓存,减少请求次数
示例
项目结构示例
├── api/ # API相关文件
│ ├── env.js # 环境配置(开发/测试/生产环境)
│ ├── dome.js # 功能相关API (根据实际项目功能设计API文件,如用户、商品、订单等模块)
│ └── fetch.js # 网络请求封装 (封装网络请求:支持请求拦截、响应拦截、错误处理token刷新、中断请求任务等功能)
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ └── styles/ # 样式文件
├── pages/ # 页面文件
│ ├── index/ # 启动页
│ └── tabBar/ # 底部导航栏页面
│ ├── home/ # 首页
│ ├── folder/ # 档案夹
│ └── mine/ # 我的
├── utils/ # 工具函数
│ ├── request.js # 请求工具 (封装网络请求:wx.request、wx.downloadFile、wx.uploadFile参照axisos封装,支持请求拦截、响应拦截、错误处理等功能)
│ ├── util.js # 通用工具
│ └── version.js # 版本工具
├── app.js # 小程序入口文件
├── app.json # 小程序配置文件
├── app.wxss # 全局样式文件
├── project.config.json # 项目配置文件
├── project.private.config.json # 项目私有配置文件
└── sitemap.json # 小程序站点地图
配置文件示例
- 说明:iconPath、selectedIconPath路径需要根据实际项目资源路径调整,确保图标资源正确加载。
{
"pages": [
"pages/index/index",
"pages/tabBar/home/home",
"pages/tabBar/folder/folder",
"pages/tabBar/mine/mine"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTitleText": "miniprogram-architect",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#666666",
"selectedColor": "#4A76F3",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
注意事项
- 严格遵循微信小程序官方开发规范,确保代码符合平台审核标准;
- 严控代码体积,主包大小不超过 2MB,合理采用分包加载策略拆分非核心功能(如详情页、工具页),分包单个体积不超过 20MB、总体积不超过 200MB;
- 保障 API 调用安全,所有接口请求采用 HTTPS 协议,敏感接口添加签名 / Token 校验,避免明文传输用户信息;
- 优化页面性能与用户体验,包括但不限于:减少首屏加载时间、优化渲染逻辑、避免频繁 setData、添加加载态 / 空态提示;
- 提升代码可维护性与可扩展性,采用模块化 / 组件化开发,统一代码规范(如 ESLint),预留功能扩展接口;
- 分包管理需遵循 “核心功能主包、非核心功能分包” 原则,优先加载用户高频访问模块,降低初始加载压力。
分包配置(app.json)
{
"pages": [
"pages/index/index",
"pages/home/home"
],
"subpackages": [
{
"root": "packageA",
"pages": [
"pages/detail/detail",
"pages/comment/comment"
],
"independent": false
},
{
"root": "packageB",
"pages": [
"pages/activity/activity"
],
"independent": true
}
关键说明
- independent: true 适用于无需主包资源的页面(如活动页),可单独打开,降低主包加载压力;
- preloadRule 按需预加载常用分包,平衡 “初始加载速度” 与 “后续体验”。
体积优化补充技巧
- 主包仅保留核心逻辑 + 高频页面,静态资源(如图片、大体积 JSON)优先放分包或 CDN;
- 使用微信开发者工具的「代码依赖分析」功能,清理未使用的代码 / 资源;
- 第三方库按需引入(如仅引入 Vant Weapp 的部分组件),避免全量导入。
(如果不能按需引入,建议使用WEUI组件库,官方支持useExtendedLib不占用小程序的包体积或者把第三方库放在分包中,减少主包体积)
{
"useExtendedLib": {
"weui": true
}
}
总结
- 体积管控核心:主包严控 2MB,通过分包加载拆分非核心功能,配合预加载优化体验;
- 安全与性能:API 调用需 HTTPS + 签名校验,页面优化聚焦首屏加载与渲染效率;
- 可维护性:模块化开发 + 分包合理划分,兼顾代码扩展与平台规范。