# fengger_bugs_demo

**Repository Path**: fengger1102/fengger_bugs_demo

## Basic Information

- **Project Name**: fengger_bugs_demo
- **Description**: 这是一个微信小程序功能案例库，收集了开发中常见的各种功能实现。从基础的日历、轮播图，到复杂的动画效果、Canvas绘制，基本覆盖了小程序开发的常见场景。
- **Primary Language**: Unknown
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 34
- **Forks**: 31
- **Created**: 2025-12-17
- **Last Updated**: 2026-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fengGer的bug - 微信小程序实用案例集合

> 一个包含200+实用案例的微信小程序示例集合项目

## 📖 项目介绍

这是一个微信小程序功能案例库，收集了开发中常见的各种功能实现。从基础的日历、轮播图，到复杂的动画效果、Canvas绘制，基本覆盖了小程序开发的常见场景。

项目采用分包加载策略，结构清晰，每个案例都是完整可运行的代码，可以直接参考使用。

## ✨ 核心特性

- 📦 **200+实用案例**：覆盖小程序开发的各个场景
- 🎯 **分类清晰**：按照功能模块进行分类，便于查找
- 💻 **代码完整**：每个案例都是完整可运行的代码
- 🚀 **性能优化**：考虑了性能问题，不是只实现功能
- 📱 **持续更新**：项目持续维护，会不断添加新案例

## 🎨 案例分类

### 1. 经典动效案例
- Loading动画集合（17个、15个、20个等多种）
- 拟物态设计
- 小程序启动页面动画
- Canvas海报生成
- 五福合成效果
- 卡片翻转动画
- 自定义input输入框

### 2. 经典案例集合
- 物流页面（带skeleton骨架屏）
- 日历组件（4种样式）
- 滑动删除
- 自定义指示点
- 图片上传
- 图表展示（echarts）

### 3. 交互性案例
- 自定义导航栏
- 瀑布流布局
- 滚动吸顶
- 文字展开收起
- 自定义弹窗
- 下拉刷新

### 4. CSS特效案例
- 圆锥渐变
- 充电动画
- 能量球动画
- 旋转字符
- 渐变字体
- 雪花飘落
- 流星雨
- 冰墩墩/雪容融

### 5. 工具类案例
- 搜索历史
- 关键字高亮
- 打卡功能
- 抽奖活动（转盘、九宫格）
- 图片自适应
- 日期选择器
- 城市选择器
- 地图定位

### 6. 特效案例
- 仿古灯笼
- 红包雨
- 拆红包
- 刮刮乐
- 大转盘

### 7. API演示案例
- 加速度计
- Canvas转图片
- 图形验证码
- 用户信息获取
- 位置服务

### 8. 实用性案例
- 列表页
- 拖拽功能
- 返回顶部
- 步骤条
- 进度条
- 倒计时
- 课程表

## 🚀 快速开始

### 环境要求

- 微信开发者工具
- Node.js (用于安装依赖)

### 安装步骤

1. 克隆项目
```bash
git clone [https://gitee.com/fengger1102/fenggers_mini_demo]
```

2. 安装依赖
```bash
npm install
```

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

4. 在微信开发者工具中点击"构建npm"

5. 运行项目

## 📁 项目结构

```
fengger_bugs_demo/
├── app.js                 # 小程序入口文件
├── app.json               # 小程序配置文件
├── app.wxss               # 全局样式
├── components/            # 公共组件
│   ├── calendar/         # 日历组件
│   ├── ec-canvas/        # echarts画布组件
│   └── navBar/           # 导航栏组件
├── pages/                 # 页面目录
│   ├── index/            # 首页
│   ├── another/          # 交互性案例（分包）
│   ├── cssCase/          # CSS特效案例（分包）
│   ├── jsCase/           # 工具类案例（分包）
│   ├── wxCase/           # 小程序API案例（分包）
│   ├── effects/          # 特效案例（分包）
│   ├── apiDemo/          # API演示案例（分包）
│   ├── actualPage/       # 实用性案例（分包）
│   └── subPack/          # 经典动效案例（分包）
├── utils/                # 工具函数
│   ├── util.js           # 通用工具函数
│   ├── tool.js           # 工具函数
│   ├── http.js           # 网络请求
│   └── ...
└── img/                  # 图片资源
```

## 🛠 技术栈

- 微信小程序原生框架
- [@vant/weapp](https://github.com/vant-ui/vant-weapp) - 小程序UI组件库
- [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) - 微信小程序图表库

## 💡 使用说明

1. **按需查找**：需要什么功能，直接去对应的分类找
2. **理解代码**：不要直接复制，看看是怎么实现的，理解原理
3. **结合实际改**：根据自己项目的需求，改改样式和逻辑
4. **收藏备用**：遇到新需求，先来这里看看有没有现成的

## 📝 技术亮点

### 分包加载优化
项目采用小程序分包加载策略，将不同模块的页面分别打包，有效控制主包大小，提升小程序启动速度。

### 组件化开发
项目中的日历组件、导航栏组件等都采用组件化开发，便于复用和维护。

### 工具函数封装
项目封装了常用的工具函数，如时间格式化、图片保存、手机号验证等，提高开发效率。

### 性能优化
- 图片懒加载
- 动画性能优化
- 列表虚拟滚动
- Canvas同层渲染

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

如果你有好的案例或者发现了问题，欢迎：
- 提交 Issue 反馈问题
- 提交 PR 贡献代码
- 分享给其他开发者

ISC

## 👤 作者

fengGer

## 🙏 致谢

感谢所有使用和贡献这个项目的开发者！

---

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！

## 💰 打赏支持

如果这个项目对你有帮助，欢迎在微信公众号文章[https://mp.weixin.qq.com/s/vDRJjpnqE9KMfhAnBfx9xQ]底部进行打赏支持一下，你的支持是我持续更新的动力！