README.md

# 微信小程序开发资源汇总

## QQ交流群

- [微信小程序1号群](https://jq.qq.com/?_wv=1027&k=5vqgNd0)：593495800 （已满）
- [微信小程序2号群](https://jq.qq.com/?_wv=1027&k=5DYIJtv)：139122611
- [微信小程序3号群](https://jq.qq.com/?_wv=1027&k=5pNiKHt)：682463867

## 目录

- [官方文档](#官方文档)
- [工具](#工具)
- [插件](#插件)
- [教程](#教程)
- [视频教程](#视频教程)
- [文章](#文章)
- [组件](#组件)
- [Demo](#Demo)

## 置顶

- [WePY：组件化的小程序开发框架](https://github.com/Tencent/wepy) :100:
- [WePY 开发资源汇总](https://github.com/aben1188/awesome-wepy) :100:
- [ZanUI-WeApp: 高颜值、好用、易扩展的微信小程序 UI 库，Powered by 有赞](https://github.com/youzan/zanui-weapp) :100:

## 官方文档

- [小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/index.html)
- [小程序开发教程](https://developers.weixin.qq.com/miniprogram/dev/)
- [小程序框架](https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html)
- [小程序组件](https://developers.weixin.qq.com/miniprogram/dev/component/)
- [小程序 API](https://developers.weixin.qq.com/miniprogram/dev/api/)
- [小程序开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)

## 工具

- [WePY ★10k+](https://github.com/Tencent/wepy) -  支持组件化的小程序开发框架
- [mpvue ★8.7k](https://github.com/Meituan-Dianping/mpvue) - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
- [Labrador ★1.5k](https://github.com/maichong/labrador) - 支持 ES6/7 的微信小程序组件化开发框架
- [wept ★1.8k](https://github.com/chemzqm/wept) - 微信小程序实时运行环境
- [wafer ★1.6k](https://github.com/tencentyun/wafer) - 快速构建具备弹性能力的微信小程序
- [wechat_web_devtools ★600+](https://github.com/cytle/wechat_web_devtools) -  Linux 下微信开发者工具
- [tina ★300+](https://github.com/tinajs/tina) - 轻巧的渐进式微信小程序框架
- [xpmjs ★100+](https://github.com/xpmjs/xpmjs) - 微信小程序云端增强 SDK
- [WeApp-Workflow ★100+](https://github.com/Jeff2Ma/WeApp-Workflow) -  基于 Gulp 的微信小程序前端开发工作流
- [gulp-wxa-copy-npm](https://github.com/mdsb100/gulp-wxa-copy-npm) - 微信小程序 gulp 插件，解决 npm 包管理和 babel-runtime
- [weact](https://github.com/haojy/weact) - 用 JSX 快速开发小程序
- [socket.io-mp-client](https://github.com/cytle/socket.io-mp-client) - 微信小程序 socket.io 客户端
- [wxa](https://github.com/Genuifx/wxa) - 方便的小程序开发框架
- [px2rpx](https://github.com/allanguys/px2rpx) - Px 转 Rpx 在线工具
- [wxml-parser](https://github.com/seanlong/wxml-parser) -  JavaScript WXML parser
- [weappx](https://github.com/tolerance-go/weappx) - 基于 redux 的数据层管理框架
- [weapp-start](https://github.com/tolerance-go/weapp-start) - 一个命令行工具，改善原生小程序开发体验
- [Egret Wing](http://developer.egret.com/cn/github/egret-docs/Wing/update/update320/index.html) - 支持微信小程序实时预览的 IDE

## 插件

- [wxapp.vim](https://github.com/chemzqm/wxapp.vim) - 提供微信小程序开发全方位支持的 vim 插件
- [weapp-snippet-for-sublime-text-2-3](https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3) - 为 sublime text 2&3 准备的微信小程序 snippet(停更)
- [Matchmaker](https://github.com/lypeer/Matchmaker) - IntelliJ IDEA 插件，注入方法
- [wechatCode-complete](https://github.com/qbright/wechatCode-complete) - webstorm 插件（代码提示）
- [wxapp](https://github.com/FloydaGithub/wxapp) - sublime plugin
- [vscode 插件(代码提示)](https://segmentfault.com/a/1190000007132719)

## 教程

- 全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！
  - [第一弹](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)
- 微信小程序剖析(微信公众号)
  - [「官方示例代码」浅析](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)
- [微信小程序架构分析(上)](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)
- [hello-weapp 微信小程序最简示例教程(dingyiming/weapp-example)](https://github.com/dingyiming/weapp-example)
- [微信小应用 IDE 的安装以及安装过程的常见问题(champion32/WeAppIdeIssue)](https://github.com/champion32/WeAppIdeIssue)
- [分享我用 cnode 社区 api 做微信小应用的入门过程(CNode)](https://cnodejs.org/topic/57ea257b3670ca3f44c5beb6)
- [微信小程序开发教程-从零开始(简书)](http://www.jianshu.com/p/aaef5ceb3936)
- [我所理解的小程序 - 小程序真机调试(seahub)](https://seahub.github.io/2016/10/09/%E6%88%91%E6%89%80%E7%90%86%E8%A7%A3%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F/)
- [微信小程序集成 Redux(Segmentfault)](https://segmentfault.com/a/1190000007107646)
- [在微信小程序里实现图片预加载组件(凹凸实验室)](https://aotu.io/notes/2017/01/06/wxapp-img-loader/)

## 视频教程

- [微信小程序开发视频教程](https://www.youtube.com/playlist?list=PLXbU-2B80FvA5bNILAS8-zY3_KkE-PVn0) (youtube)

## 文章

- [未来是 h5 的：写在微信应用号发布之际(CNode)](https://cnodejs.org/topic/57e330d07d8293463a01e7e0)
- [微信“小程序”让我脑洞大开(简书)](http://www.jianshu.com/p/60c8fd8d6862)
- [关于微信小程序（应用号）的底层逻辑分析和拥抱建议(知乎专栏)](https://zhuanlan.zhihu.com/p/22565340)
- [微信小程序和谷歌 PWA 有什么关系？(微信公众号)](http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652039482&idx=2&sn=778e1313ebbd832b590b81a8088b63db#rd)
- [在微信小程序里，我们要怎样做数据分析（上）(微信公众号)](http://mp.weixin.qq.com/s?__biz=MzI0ODU0MDg0Mw==&mid=2247483754&idx=1&sn=9578311da11d1fd3889e0829505c3993&scene=2&srcid=0924io6H1CmEPGYJxmEQVtlA)
- [一张图看微信小程序(前端之路 - DRY)](http://zhenhua-lee.github.io/manmage/wx.html)
- [微信小程序要这样解读(CSDN)](http://blog.csdn.net/yanzhenjie1003/article/details/52698184)
- [一名 Android 开发者的微信小程序填坑之路(1)](http://blog.csdn.net/luoyanglizi/article/details/52681245)
- [小程序开发利器：Matchmaker(CSDN)](http://blog.csdn.net/luoyanglizi/article/details/52711634)
- [微信小程序开发三宗罪和解决方案(SegmentFault)](https://segmentfault.com/a/1190000007017985)
- [使用 Labrador 0.3 构建 ES6/ES7 标准模块化微信小程序(SegmentFault)](https://segmentfault.com/a/1190000007109050)
- [微信小程序真机测试多个 DEMO)(微信公众号)](http://mp.weixin.qq.com/s?__biz=MzA5NTQ4NjkyMQ==&mid=2650723004&idx=1&sn=a6bcbf354beca3e745c47e542e119e5c&chksm=88b4e41abfc36d0c547698b6f4f3669b1aa351a879332c2848ffd6618dbf23cb41316dca570a&scene=0#rd)
- [微信小程序真机测试视频源文件](https://github.com/bestony/WeApp-Demo)
- [WordPress 网站基于 REST API 开发“微信小程序”实战](https://devework.com/wordpress-rest-api-weixin-weapp.html)
- [WordPress 网站开发“微信小程序“实战(二)](https://devework.com/wordpress-weapp-2.html)
- [WordPress 网站开发“微信小程序“实战(三)](https://devework.com/wordpress-weapp-3.html)
- [解决微信小程序<web-view>组件所在页面无返回按钮的问题](https://segmentfault.com/a/1190000013448739)

## 组件

- [weui-wxss ★5000+](https://github.com/Tencent/weui-wxss) - 同微信原生视觉体验一致的基础样式库
- [zanui-weapp ★4000+](https://github.com/youzan/zanui-weapp) - 高颜值、好用、易扩展的微信小程序 UI 库
- [wxParse ★3000+](https://github.com/icindy/wxParse) - 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析
- [wx-charts ★1000+](https://github.com/xiaolin3303/wx-charts) - 微信小程序图表 charts 组件
- [wux ★1000+](https://github.com/skyvow/wux) - 微信小程序自定义组件
- [wemark ★400+](https://github.com/TooBug/wemark) - 微信小程序 Markdown 渲染库
- [wxapp-img-loader ★400+](https://github.com/o2team/wxapp-img-loader) - 微信小程序图片预加载组件
- [we-cropper ★400+](https://github.com/we-plugin/we-cropper) -  微信小程序图片裁剪工具
- [WeZRender ★300+](https://github.com/guyoung/WeZRender) - 微信小程序 Canvas 开发
- [wx_calendar ★300+](https://github.com/treadpit/wx_calendar) - 小程序日历
- [wxapp ★300+](https://github.com/youzouzou/wxapp) - 微信小程序组件 
- [Wa-UI ★200+](https://github.com/liujians/Wa-UI) - 针对微信小程序整合的一套 UI 库
- [wxSearch ★200+](https://github.com/icindy/wxSearch) - 微信小程序优雅的搜索框
- [wx-scrollable-tab-view ★200+](https://github.com/zhongjie-chen/wx-scrollable-tab-view) - 小程序可滑动得 tab-view
- [wetoast ★100+](https://github.com/kiinlam/wetoast) - 微信小程序 toast 增强插件
- [wx-alphabetical-listview ★100+](https://github.com/zhongjie-chen/wx-alphabetical-listview) - 微信小程序带字母滑动的 listview
- [wx-drawer ★100+](https://github.com/zhongjie-chen/wx-drawer) - 小程序模仿 QQ6.0 侧滑菜单
- [wxapp-charts ★100+](https://github.com/hawx1993/wxapp-charts) - 微信小程序图表 charts 组件
- [chartjs-wechat-mini-app ★100+](https://github.com/xiabingwu/chartjs-wechat-mini-app) - chartjs 微信小程序适配 
- [wx-promise-request ★100+](https://github.com/JoeZheng2015/wx-promise-request) -  微信小程序请求队列管理库
- [we-swiper ★100+](https://github.com/we-plugin/we-swiper) - 微信小程序触摸内容滑动解决方案
- [wxDraw ★100+](https://github.com/bobiscool/wxDraw) - 微信小程序 2D 动画库
- [citySelect ★100+](https://github.com/chenjinxinlove/citySelect) ★42 - 微信小程序城市选择器 
- [WeiXinProject](https://github.com/lidong1665/WeiXinProject) - 微信小程序列表上拉刷新和上拉加载 
- [wepy-com-charts](https://github.com/CalvinHong/wepy-com-charts) - 微信小程序 wepy 图表控件
- [wxapp-lock](https://github.com/demi520/wxapp-lock) - 微信小程序手势解锁 
- [weapp.socket.io](https://github.com/weapp-socketio/weapp.socket.io) - socket.io 风格的 websocket 类库
- weapp-polyfill](https://github.com/leancloud/weapp-polyfill) - [w3c 标准 API polyfill
- [wxPromise](https://github.com/youngjuning/wxPromise) - 微信小程序 Promise 库
- [wxMD5](https://github.com/youngjuning/wxMD5) - 微信小程序 MD5 库
- [wxBase64](https://github.com/youngjuning/wxBase64) -  微信小程序base64 库
- [xing-weapp-component](https://github.com/ianho/xing-weapp-component) - 微信小程序基础组件扩展
- [wx-statuslayout](https://github.com/ZzjBeatYou/wx-statuslayout) -  小程序页面状态切换组件
- [minapp-api-promise](https://github.com/bigmeow/minapp-api-promise) - 微信小程序所有 API promise 化
- [minapp-slider-left](https://github.com/bigmeow/minapp-slider-left) - 微信小程序左划删除组件

## Demo

- [EastWorld/wechat-app-mall ★3000+](https://github.com/EastWorld/wechat-app-mall) - 微信小程序商城
- [tumobi/nideshop-mini-program ★2000+](https://github.com/tumobi/nideshop-mini-program) - 基于 Node.js + MySQL 开发的开源微信小程序商城
- [RebeccaHanjw/weapp-wechat-zhihu ★800+](https://github.com/RebeccaHanjw/weapp-wechat-zhihu) - 仿知乎
- [lypeer/wechat-weapp-gank ★600+)](https://github.com/lypeer/wechat-weapp-gank) - Gank 客户端
- [wangmingjob/weapp-weipiao ★300+](https://github.com/wangmingjob/weapp-weipiao) - 微票
- [charleyw/wechat-weapp-redux ★300+](https://github.com/charleyw/wechat-weapp-redux) - Redux 绑定库
- [jectychen/wechat-v2ex ★300+)](https://github.com/jectychen/wechat-v2ex) - V2EX
- [18380435477/WeApp ★300+](https://github.com/18380435477/WeApp) - 仿微信
- [zce/weapp-boilerplate ★300+](https://github.com/zce/weapp-boilerplate) - 微信小程序快速开发骨架 
- [bayetech/wechat_mall_applet ★300+](https://github.com/bayetech/wechat_mall_applet) - 电商平台
- [lanshan-studio/wecqupt ★300+](https://github.com/lanshan-studio/wecqupt) - We 重邮
- [myronliu347/wechat-app-zhihudaily ★200+](https://github.com/myronliu347/wechat-app-zhihudaily) - 知乎日报
- [harveyqing/BearDiary ★200+](https://github.com/harveyqing/BearDiary) - 小熊の日记
- [leancloud/leantodo-weapp ★200+](https://github.com/leancloud/leantodo-weapp) - 集成 LeanCloud 实现的 Todo list
- [SuperKieran/weapp-artand ★200+](https://github.com/SuperKieran/weapp-artand) - Artand
- [dongweiming/weapp-zhihulive ★200+](https://github.com/dongweiming/weapp-zhihulive) - 知乎 Live
- [eyasliu/wechat-app-music ★200+](https://github.com/eyasliu/wechat-app-music) - 音乐播放器
- [ahonn/weapp-one ★200+](https://github.com/ahonn/weapp-one) - 仿 ONE
- [giscafer/wechat-weapp-mapdemo ★200+](https://github.com/giscafer/wechat-weapp-mapdemo) - 地图导航、marker标注 （不再维护）
- [hilongjw/weapp-gold ★100+](https://github.com/hilongjw/weapp-gold) - 掘金主页信息流
- [zce/weapp-douban ★100+](https://github.com/zce/weapp-douban) - 豆瓣电影
- [hingsir/weapp-douban-film ★100+](https://github.com/hingsir/weapp-douban-film) - 豆瓣电影
- [kunkun12/weapp](https://github.com/kunkun12/weapp) - 小程序 hello world 尝鲜
- [natee/wxapp-2048 ★100+](https://github.com/natee/wxapp-2048) - 2048 小游戏
- [SeptemberMaples/wechat-weapp-demo ★100+](https://github.com/SeptemberMaples/wechat-weapp-demo) - 购物车
- [hijiangtao/weapp-newsapp](https://github.com/hijiangtao/weapp-newsapp) - 公众号热门文章信息流
- [charleyw/wechat-weapp-redux-todos ★100+](https://github.com/charleyw/wechat-weapp-redux-todos) - 集成 Redux 实现的Todo list
- [kraaas/timer ★100+](https://github.com/kraaas/timer) - 番茄时钟
- [ericzyh/wechat-chat ★100+](https://github.com/ericzyh/wechat-chat) - 聊天室
- [BelinChung/wxapp-hiapp ★100+](https://github.com/BelinChung/wxapp-hiapp) - HiApp
- [hardog/wechat-app-flexlayout ★100+](https://github.com/hardog/wechat-app-flexlayout) - flexlayout
- [dunizb/wxapp-sCalc ★100+](https://github.com/dunizb/wxapp-sCalc) - 简易计算器
- [litt1e-p/weapp-girls ★100+](https://github.com/litt1e-p/weapp-girls) - 豆瓣美女/妹子图
- [liumulin614/BeautifulGirl](https://github.com/liumulin614/BeautifulGirl) - 美女模特
- [romoo/weapp-demo-breadtrip ★100+](https://github.com/romoo/weapp-demo-breadtrip) - 面包旅行
- [zhuweiyou/fetop100 ★100+](https://github.com/zhuweiyou/fetop100) - 前端TOP100
- [vace/wechatapp-news-reader ★100+](https://github.com/vace/wechatapp-news-reader) - 新闻阅读器
- [Symous/WechatApp-BaisiSister](https://github.com/Symous/WechatApp-BaisiSister) - 百思不得姐
- [DengKe1994/weapp-calculator](https://github.com/DengKe1994/weapp-calculator) - IOS 计算器
- [monkindey/wx-github](https://github.com/monkindey/wx-github) - GitHub 简历
- [fluency03/weapp-500px](https://github.com/fluency03/weapp-500px) - 国外摄影社区 500px
- [weapp-film](https://github.com/luuman/weapp-film) - 淘票票
- [xujinyang/CoderCalendar-WeApp](https://github.com/xujinyang/CoderCalendar-WeApp) - 程序员老黄历
- [zhengxiaowai/weapp-github](https://github.com/zhengxiaowai/weapp-github) - github
- [Seahub/PigRaising](https://github.com/SeaHub/PigRaising) - PigRaising
- [brucevanfdm/WeChatMeiZhi](https://github.com/brucevanfdm/WeChatMeiZhi) - 妹子图
- [zhijieeeeee/wechat-app-joke](https://github.com/zhijieeeeee/wechat-app-joke) - 开心一刻
- [uniquexiaobai/wechat-app-githubfeed](https://github.com/uniquexiaobai/wechat-app-githubfeed) - GitHubFeed
- [zce/weapp-todos](https://github.com/zce/weapp-todos) - TODOS 任务清单
- [yaoshanliang/weapp-ssha](https://github.com/yaoshanliang/weapp-ssha) - 企业宣传小程序
- [bruintong/wechat-webapp-douban-movie](https://github.com/bruintong/wechat-webapp-douban-movie) - 豆瓣电影
- [bruintong/wechat-webapp-douban-location](https://github.com/bruintong/wechat-webapp-douban-location) - 豆瓣同城
- [arkilis/weapp-jandan](https://github.com/arkilis/weapp-jandan) - 煎蛋
- [bodekjan/wechat-weather](https://github.com/bodekjan/wechat-weather) - 微信天气
- [jasscia/ChristmasHat](https://github.com/jasscia/ChristmasHat) - 我要圣诞帽
- [yaoshanliang/weapp-jump](https://github.com/yaoshanliang/weapp-jump) - 跳一跳
- [nanwangjkl/sliding_puzzle](https://github.com/nanwangjkl/sliding_puzzle) - 滑块拼图
- [yaoshanliang/weapp-monument-valley](https://github.com/yaoshanliang/weapp-monument-valley) - 纪念碑谷
- kaiwu/weui-scalajs](https://github.com/kaiwu/weui-scalajs) - 使用Scala.js开发
- [tinajs/tina-hackernews](https://github.com/tinajs/tina-hackernews) - Hacker News 热点
- [mohuishou/scuplus-wechat](https://github.com/mohuishou/scuplus-wechat) - We 川大
- [hankzhuo/wx-v2ex](https://github.com/hankzhuo/wx-v2ex) - v2ex
- [Hongye567/weapp-mark](https://github.com/Hongye567/weapp-mark) - 仿 Mark 影单的微信小程序