# 微信小程序开发资源汇总 ## 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) - [解决微信小程序组件所在页面无返回按钮的问题](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 影单的微信小程序