# wechat-weapp-union

**Repository Path**: davidfdw/wechat-weapp-union

## Basic Information

- **Project Name**: wechat-weapp-union
- **Description**: 汇聚了原创性小程序源码、精品小程序源码及分析、由浅入深的系列精品教程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-19
- **Last Updated**: 2025-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序 学习资料收集                                                        

 微信小程序是一个前景广阔的新兴技术，但是目前市面上的资料比较少。

 我们汇聚了原创性小程序源码、精品小程序源码、由浅入深的系列教程供大家学习参考，也希望更多的同学加入我们。
 
 我们会一直更新维护这个仓, 同时也欢迎更多的微信小程序开发者将自己常用的工具、学习资料、学习心得等分享上来, 我们将定期筛选整理, 希望我能与大家一起学习进步, 谢谢.
 
## 目录

- [小程序精品源码](#小程序精品源码)
- [小程序联盟成员源码](#小程序联盟成员源码)
- [小程序精品开发教程](#小程序精品开发教程)
- [十大小程序开发IDE](#十大小程序开发IDE)
- [小程序开发者联盟](#小程序开发者联盟)
- [社区](#社区)
- [贡献者](#贡献者)
- [License](#license)

=============================================================

## 小程序精品源码

本模块成员所有源码皆为从Github收集，链接到各个开源地址，没有授权请勿转载。

*分类*|*小程序名称*|*推荐理由*|*推荐指数*
---------|--------|--------|--------
视频|[芒果TV](https://github.com/web-Marker/wechat-Development)|风格是模仿芒果TV的风格和几个展示公开接口，对应的最新视频并不能观看(请自行下载芒果tv App观看)|⭐️⭐️⭐️⭐️⭐️
视频|[豆瓣电影](https://github.com/zce/weapp-demo)|使用豆瓣电影接口，实现榜单、搜索、我的、排行榜等功能。可以学习开发阶段与生产阶段分离、boilerplate开发框架等知识|⭐️⭐️⭐️⭐️
阅读|[知乎&豆瓣](https://github.com/oopsguy/WechatSmallApps)|知乎日报和豆瓣电影两个案例，知乎日报包含了非常详细的功能。可以学习，接口调用、文章详情、分享、评论等知识|⭐️⭐️⭐️⭐️⭐️
工具|[简易计算器](https://github.com/dunizb/wxapp-sCalc)|微信小程序版，适合入门，由于重点不是实现计算器具体功能，主要是为了学习微信小程序开发|⭐️⭐️⭐️⭐️
工具|[番茄时钟](https://github.com/kraaas/timer)|最基础的例子，番茄时钟做个定时器可以简单学习|⭐️⭐️⭐️
社交|[手机QQ](https://github.com/xiehui999/SmallAppForQQ)|实现聊天列表、联系人、音乐等功能。可以学习list、音乐api等知识|⭐️⭐⭐️⭐️⭐️
社交|[v2ex](https://github.com/jectychen/wechat-v2ex)|v2ex数据api基本上使用了samuel1112的仓库v2er里封装的方法，实现最新、最热、帖子详情等功能。可以学习接口调用、tab使用、图文混排等知识|⭐️⭐️⭐️
社交|[微信](https://github.com/liujians/WeApp)|整合了ionic的样式库和weui的样式库。超级推荐的学习案例，丰富功能请到github页面学习查看|⭐️⭐️⭐️⭐️⭐️
社交|[HiApp](https://github.com/BelinChung/wxapp-hiapp)|'炸裂推荐'如果要做通讯小程序的话这个的学习必不可少|⭐️⭐️⭐️⭐️⭐️
音乐|[音乐播放器](https://github.com/eyasliu/wechat-app-music)|音乐播放类小程序，实现了大部分核心功能值得学习|⭐️⭐️⭐️⭐️⭐️
音乐|[全民k歌](https://github.com/imhuster/kg)|和音乐播放器差不多，可以对比学习|⭐️⭐️⭐️⭐️
购物|[移动端商城](https://github.com/liuxuanqiang/wechat-weapp-mall)|通过球球小镇公众号的接口，实现首页、分类、购物车、我的等功能。可以学习接口调用、tab使用、加载等待、轮播图等知识|⭐️⭐️⭐️⭐️⭐️
购物|[购物车DEMO](https://github.com/SeptemberMaples/wechat-weapp-demo)|和移动端商城差不多，可以对比学习|⭐️⭐️⭐️⭐️⭐️
出行|[地图定位](https://github.com/giscafer/wechat-weapp-mapdemo)|使用了LBS地图定位功能，可以扩展成打车等应用|⭐️⭐️⭐️
生活|[艺术设计平台](https://github.com/SuperKieran/weapp-artand)|比较完整的一个生活类app，推荐学习参考|⭐️⭐️⭐️⭐️⭐️
生活|[小熊の日记](https://github.com/harveyqing/BearDiary)|这个是记录生活的点点滴滴，可以参考里边的文本处理方式|⭐️⭐️⭐️
健康|[健康菜谱](https://github.com/bestTao/Caipu_weixin)|是关于菜谱的小程序，用到了图文混排的功能|⭐️⭐️⭐️⭐️
办公|[教务系统](https://github.com/zh-h/student-information-system-wechat-applet)|办公应用类小程序|⭐️⭐️⭐️
学习|[github](https://github.com/zhengxiaowai/weapp-github)|调用Github接口实现基本Github小程序，逼格满满|⭐️⭐️⭐️⭐️
学习|[Gank客户端](https://github.com/lypeer/wechat-weapp-gank)|Gank客户端，你懂得|⭐️⭐️⭐️
学习|[分答](https://github.com/davedavehong/fenda-mock)|分答一个付费回答的小程序|⭐️⭐️⭐️⭐️
娱乐|[微票](https://github.com/wangmingjob/weapp-weipiao)|通过微票的公开接口，实现了小程序员版本的微票，包含正在上映和放映影院两个功能。以学习接口调用、tab使用、页面跳转等知识|⭐️⭐️⭐️
娱乐|[开心一刻](https://github.com/zhijieeeeee/wechat-app-joke)|笑话对就是笑话|⭐️⭐️⭐️⭐️
新闻|[今日头条](https://github.com/CrazyCodes/WeiXin-SmallApps-Information)|不好意思，我用微信小程序做了一个今日头条|⭐️⭐️⭐️⭐️
游戏|[2048小游戏](https://github.com/natee/wxapp-2048)|微信也能做游戏？对看看这款2048体验怎么样？|⭐️⭐️⭐️⭐️⭐
游戏|[LOL战绩查询](https://github.com/xiaowenxia/weapp-lolgame)|使用了微信小程序的网络功能进行LOL战绩查询|⭐️⭐️⭐️⭐️

## 小程序联盟成员源码

本盟成员所有源码皆为原创，没有授权请勿转载，如要入盟请到最下方查看入盟方式。

*分类*|*小程序名称*|*推荐理由*|*推荐指数*
---------|--------|--------|--------
阅读|[图灵大盗-水浒传](https://github.com/leesx/shuihu-xcx)|使用小程序实现了水浒传人物图谱，功能基本实现可以学习tab、多页面切换等功能|⭐️⭐️⭐️
阅读|[刘彩和-知乎日报](https://github.com/LiuCaiHe/wechat-app-sample)|调用知乎日报Api实现了知乎日报的基本功能，可以学习Api的调用以及数据的处理|⭐️⭐️⭐️⭐️
社交|[QWERT-cnnode社区客户端](https://github.com/SZzzzz/wehcat-weapp-cnode)|微信小程序版的cnode社区客户端|⭐️⭐️⭐️⭐️
社交|[徐程亮-v2ex](https://github.com/dily3825002/wechat-weapp-union/tree/master/v2ex)|使用了v2ex的接口，实现了v2ex的基本功能|⭐️⭐️⭐️⭐️
工具|[A闪-汇率计算器](https://github.com/dily3825002/wechat-weapp-union/tree/master/huilv)|调用汇率公共接口生成的汇率计算器方便使用，UI简洁大方|⭐️⭐️⭐️⭐️⭐️
工具|[方涛-智能机器人](https://github.com/dily3825002/wechat-weapp-union/tree/master/zndg)|调用了百度的机器人接口，虽然界面粗糙但是智能机器人的想法非常好|⭐️⭐️⭐️⭐️
工具|[叶健铭-天气](https://github.com/dily3825002/wechat-weapp-union/tree/master/weather)|通过公共的天气Api制作的天气类小程序，也是小程序官方鼓励的类型|⭐️⭐️⭐️⭐️
工具|[周国威-计时器](https://github.com/dily3825002/wechat-weapp-union/tree/master/myTimer)|小工具类型的小程序|⭐️⭐️⭐️⭐️⭐️
娱乐|[Dily-豆瓣电影](https://github.com/dily3825002/wechat-weapp-union/tree/master/movie)|UI界面还原度最好的小程序之一，可以学习|⭐️⭐️⭐️⭐️⭐️
娱乐|[丛九九-哔哩哔哩排行榜](https://github.com/congjiujiu/bilibiliRank)|哔哩哔哩的排行榜功能|⭐️⭐️⭐️⭐️⭐️
娱乐|[大鹏-豆瓣电影调用](https://github.com/dily3825002/wechat-weapp-union/tree/master/diaoyongdy)|实现最多的豆瓣电影，还有一个是知乎日报|⭐️⭐️⭐️⭐️⭐️
游戏|[突然下雨-贪吃蛇大作战](https://github.com/dily3825002/wechat-weapp-union/tree/master/snake)|使用小程序实现的贪吃蛇游戏，效率很低但是想法很有意思|⭐️⭐️⭐️⭐️⭐️
购物|[pod4g-有调商城](https://github.com/pod4g/wxapp)|一个基本的商城Demo，学习商城的源码可以查看学习|⭐️⭐️⭐️⭐️⭐️
购物|[龙瑞陈-XY商城](https://github.com/dily3825002/wechat-weapp-union/tree/master/shop)|一个基本的商城Demo，学习商城的源码可以查看学习|⭐️⭐️⭐️⭐️⭐️
购物|[小岩-商城](https://github.com/rocktyy/small_application)|购物商城实现|⭐️⭐️⭐️⭐️⭐️
购物|[小猴土豆-商城](https://github.com/johnwang77/SmallApp)|和上边一样购物商城|⭐️⭐️⭐️⭐️⭐️
购物|[白天不懂夜的黑-黑市商城](https://github.com/dily3825002/wechat-weapp-union/tree/master/wxApp)|和上边一样购物商城|⭐️⭐️⭐️⭐️⭐️
工具|[icindy-wxParse](https://github.com/icindy/wxParse)|微信小程序富文本解析自定义组件，支持HTML及markdown解析|⭐️⭐️⭐️⭐️⭐️

## 小程序精品开发教程

### 一. 小程序开发入门教程

> 首先大家肯定需要学习微信官方的文档以及工具介绍

1. [小程序开发文档](https://mp.weixin.qq.com/debug/wxadoc/dev/index.html)
2. [小程序设计指南](https://mp.weixin.qq.com/debug/wxadoc/design/index.html)
3. [小程序开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)

### 二. 小程序开发中级教程

> 然后大家需要学习的是HTML和CSS等基础知识。

1. [HTML 教程](http://www.w3cschool.cn/html/html-tutorial.html)
2. [CSS 教程](http://www.w3cschool.cn/css)
3. [JavaScript 教程](http://www.w3cschool.cn/javascript)

> 视频教程

1. [微信小程序开发实战 一](http://edu.csdn.net/course/detail/3011)
2. [微信小程序开发实战 二](http://edu.csdn.net/course/detail/3045)
3. [微信小程序开发实战 三](http://www.howzhi.com/course/15035/)
4. [微信小程序开发实战 四](http://www.jikexueyuan.com/zhiye/course/34.html?type=8&utm_source=jike&utm_medium=www_index_cf&utm_campaign=wechat_app&utm_content=0930)
5. [微信小程序开发实战 五](http://edu.51cto.com/course/course_id-7242.html)

### 三. 小程序开发高级教程

> 学习了官方文档，又学习了HTML的基础知识，咱们可以拿实例教程学习了。

1. 名片盒小程序开发教程合集

- [第一弹](http://www.diycode.cc/topics/311)
- [第二弹](http://www.diycode.cc/topics/312)
- [第三弹](http://www.diycode.cc/topics/316)
- [第四弹](http://www.diycode.cc/topics/325)
- [第五弹](http://www.diycode.cc/topics/328)

2. 微信小程序剖析

- [「官方示例代码」浅析](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974082&idx=1&sn=47c7f672caf629cd846e315b8df2b1c5&scene=21#wechat_redirect)
- [（一）：运行机制](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974093&idx=1&sn=0570a243304ea8bb7d1b636624886fb1&scene=21#wechat_redirect)
- [（二）：框架原理](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974111&idx=1&sn=93a868cdb59b5dd77c65c7a5303e6e31#rd)
- [（三）：让小程序运行在Chrome浏览器上](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974133&idx=1&sn=3b67419e8ac0bb8262ca4c1e3cdabb35#rd)
- [（四）：原生的实时DOM转Virtual DOM](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974146&idx=1&sn=52041fdca4245e8f4b670ed20efa77de#rd)
- [（五）：创建一个兼容「微信小程序」的Web框架](http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652974149&idx=1&sn=3efe5e6ee479ad6cbddc0a607cd40411#rd)

3. 微信小程序架构分析

- [微信小程序架构分析(上)](https://zhuanlan.zhihu.com/p/22754296)
- [微信小程序架构分析(中)](https://zhuanlan.zhihu.com/p/22765476)
- [微信小程序架构分析(下)](https://zhuanlan.zhihu.com/p/22932309)
- [首个微信小程序开发教程(掘金)](http://gold.xitu.io/entry/57e34d6bd2030900691e9ad7)
- [微信小程序开发教程！(稀土区)](http://xituqu.com/508.html)

## 十大小程序开发IDE

 环境/工具 | 简述 | 是否支持小程序开发
 -------- | -------- | --------
[官方工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html) | 微信小程序有自己的开发工具，是基于nw.js写的。做的比较简洁，基本的代码编辑、智能提示、调试等功能都有|不好的地方也很明显，不支持查看引用，不支持代码重构，最可恶的是居然不支持自家api的智能提示,写起代码来不够畅快
[Egret Wing](http://egret.com/products/wing.html) | 首款支持微信小程序开发的IDE。代码着色、代码提示、实时预览、调试程序、项目模板等功能，帮助开发者提升效率。|支持
[Sublime Text 3](http://www.sublimetext.com/3) | Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。不支持微信小程序的代码着色、代码提示和补全。|需要[插件](https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3)并且不支持实时预览
[Webstorm](http://www.jetbrains.com/webstorm/) | WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。|需要[插件](https://github.com/lypeer/Matchmaker)并且不支持实时预览
[vscode](https://code.visualstudio.com/) | VS Code（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。|需要[插件](https://github.com/hellopao/wx.d.ts)并且不支持实时预览
[vim](http://www.vim.org/) | Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性。|需要[插件](https://github.com/chemzqm/wxapp.vim)并且不支持实时预览
[WEPT](https://github.com/chemzqm/wept) | 实时更新，支持 wxml wxss javascript json;更加稳定，不像官方工具经常出错;没有限制，无需联网，无需后端配置 CORS ，支持移动浏览器调试|没有IDE工具，需要第三方代码编辑器支持
[atom](https://atom.io/) | Atom 比 Vim 更 Vim，比 Emacs 更 Emacs，同样，比 Sublime 更 Sublime|不支持
[TextMate](http://macromates.com/) | Mac OS 版本的 IDE，目前没有 windows 版本。功能强劲，易学易用|不支持
[IDEA](https://www.jetbrains.com/idea/) | 作为Jetbrain所有ide的爸爸，当然也是webstorm的爸爸，加之超丰富的插件支持，MEAN全栈，Java全家桶，php，python写起来都非常爽|不支持


## 社区

 名称 | 简介
 ---- | ----
[很快小程序社区](http://www.henkuai.com/forum-56-1.html) | 微信公众号小程序、微信小程序开发、微信应用号，小程序开发交流版块，提供各类小程序开发工具及开发教程，交流探讨小程序开发问答。
[SegmentFault](https://segmentfault.com/t/%E5%B0%8F%E7%A8%8B%E5%BA%8F/blogs) | SegmentFault 是一个专注于解决编程问题, 提高开发技能的社区
[CSDN](http://www.csdn.net/tag/%E5%B0%8F%E7%A8%8B%E5%BA%8F) | CSDN 是全球最大中文IT技术社区
[掘金](http://gold.xitu.io/tag/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F) | 高质量的技术分享社区
[diyCode](http://www.diycode.cc/topics/node49) | DiyCode是一个优雅、极客、创意、分享、美好的开发社区。
[青雀论坛](http://bbs.larkapp.com/forum-52-1.html) | 国内领先的小程序开发创建平台


## Tips

<p align="center">
都看到这里了不关注公众号么<br/>「这里文章不正经」<br/><br/>
    <img src="./wechat.jpg"
         height="130">
</p>

## License

以上内容均手工整理, 未经许可请勿转载, 版权归本人及所有贡献者所有