• 🔥 双架构设计 - 前端小程序 + 后端云函数一体化开发
• 💪 TypeScript 支持 - 完整的类型安全和 IntelliSense 支持
• 🎨 TDesign UI 组件 - 企业级设计语言和组件库
• ⚡ Skyline 渲染 - 新一代渲染引擎，更流畅的用户体验
• 🛠️ Less 预处理 - 更强大的样式编写能力
• 📦 按需加载 - 组件懒加载，优化包体积
• 🔧 开发工具链 - ESLint + Prettier + Husky，确保代码质量
• 🌐 云开发集成 - 内置微信云开发支持

weapp-template/
├── miniprogram/                # 小程序前端
│   ├── components/            # 自定义组件
│   │   └── navigation-bar/    # 自定义导航栏组件
│   ├── pages/                 # 页面文件
│   │   ├── index/            # 首页
│   │   ├── logs/             # 日志页
│   │   └── helloworld/       # 示例页
│   ├── utils/                # 工具函数
│   ├── app.ts                # 应用入口
│   ├── app.json              # 应用配置
│   └── app.less              # 全局样式
├── cloudfunctions/           # 云函数后端
│   └── minicloud/           # 云函数实现
│       ├── src/             # TypeScript 源码
│       └── dist/            # 编译输出
├── typings/                 # 类型定义
├── project.config.json      # 项目配置
└── tsconfig.json           # TypeScript 配置

• 微信开发者工具 - 最新版本
• Node.js - 版本 >= 16.0.0
• npm - 版本 >= 8.0.0

# 安装前端依赖
npm install

# 安装云函数依赖
cd cloudfunctions/minicloud
npm install
cd ../..

1. 使用微信开发者工具打开项目

   • 选择小程序项目
   • 填入你的 AppID 或使用测试号
   • 项目目录选择本项目根目录

2. 配置云开发环境

   // miniprogram/app.ts
   wx.cloud.init({
     env: 'your-cloud-env-id', // 替换为你的云开发环境 ID
     traceUser: true,
   });
   

3. 启动开发

   • 前端开发：直接在微信开发者工具中预览和调试
   • 云函数开发：使用监听模式进行热重载开发

   cd cloudfunctions/minicloud
   npm run build:watch
   

# 代码检查
npm run lint

# 自动修复代码问题
npm run lint:fix

# 格式化代码
npm run format

# 完整构建（推荐用于生产部署）
npm run build

# 快速开发构建
npm run build:dev

# 监听模式开发（支持热重载）
npm run build:watch

# 类型检查
npm run type-check

# 清理构建缓存
npm run clean

本模板集成了 TDesign 小程序组件库，提供丰富的企业级组件：

<!-- 在页面中使用 TDesign 组件 -->
<t-button type="primary" size="large">主要按钮</t-button>
<t-cell title="单元格" arrow />
<t-input placeholder="请输入内容" />

组件支持按需引入和懒加载：

// app.json 或页面 json 文件
{
  "usingComponents": {
    "t-button": "/miniprogram_npm/tdesign-miniprogram/button/button",
    "t-cell": "/miniprogram_npm/tdesign-miniprogram/cell/cell"
  }
}

# 在 miniprogram/components/ 目录下创建组件
mkdir miniprogram/components/my-component

组件结构：

my-component/
├── my-component.ts     # 组件逻辑
├── my-component.wxml   # 组件模板
├── my-component.less   # 组件样式
└── my-component.json   # 组件配置

// my-component.ts
Component({
  properties: {
    title: {
      type: String,
      value: ''
    }
  },
  data: {
    // 组件数据
  },
  methods: {
    // 组件方法
  }
});

// cloudfunctions/minicloud/src/index.ts
interface CloudEvent extends Record<string, unknown> {
  // 事件参数
}

interface CloudContext {
  requestId: string;
  functionName: string;
  functionVersion: string;
}

// 云函数入口
exports.main = async (event: CloudEvent, context: CloudContext) => {
  return {
    success: true,
    data: event
  };
};

1. 在微信开发者工具中右键云函数目录
2. 选择"上传并部署：云端安装依赖"
3. 等待部署完成

• 严格模式 - 启用所有严格类型检查
• 目标版本 - ES2020 (前端) / ES2018 (云函数)
• 模块系统 - CommonJS
• 类型定义 - 包含微信小程序 API 类型

• 预处理器 - Less
• 缩进 - 2 空格
• 自动编译 - 微信开发者工具自动编译 .less 为 .wxss

• 渲染引擎 - Skyline（需要基础库 3.0.0+）
• 组件框架 - glass-easel
• 按需加载 - 启用组件懒加载

模板包含自适应导航栏组件，自动处理：

• iOS/Android 平台差异
• 不同设备的安全区域
• 状态栏高度适配

支持不同屏幕尺寸的适配：

• rpx 单位自动缩放
• flex 布局响应式
• 安全区域处理

• ESLint - 代码规范检查
• Prettier - 代码格式化
• TypeScript - 类型检查

使用 Husky + lint-staged 在提交前自动：

• 运行 ESLint 修复
• 格式化代码
• 类型检查

pages/
├── module/           # 按功能模块划分
│   ├── list/        # 列表页面
│   ├── detail/      # 详情页面
│   └── edit/        # 编辑页面

• 页面组件：kebab-case (如：user-profile)
• 组件文件：与组件名一致
• 样式类名：BEM 规范

// 简单状态使用 globalData
getApp().globalData.userInfo = userInfo;

// 复杂状态可以使用 Observable 模式

• 单一职责：每个云函数只处理一类业务
• 错误处理：统一的错误返回格式
• 参数校验：使用 TypeScript 类型约束

A: 检查 tsconfig.json 配置，确保包含所有必要的类型定义文件。

A: 确认 .less 文件已被微信开发者工具正确编译为 .wxss 文件。

A: 检查云函数代码是否通过 TypeScript 编译，dist 目录是否包含编译后的 js 文件。

A: 运行 npm install 后，在微信开发者工具中选择"工具 -> 构建 npm"。

MIT License

欢迎提交 Issue 和 Pull Request 来完善这个模板！

• 微信小程序官方文档
• TDesign 小程序组件库
• TypeScript 官方文档

---