收藏=学会 前端小程序开源项目121个
微信小程序 Demo 案例
大厂资源开源项目
- weapp-demo ★852 - 仿豆瓣电影微信小程序
- wechat-weapp-gank ★567 - Gank微信小程序
- wechat-weapp-mall ★531 - 微信小程序移动端商城
- SmallAppForQQ ★492 - 微信小程序高仿QQ应用
- weapp-wechat-zhihu ★348 - 微信中的知乎
- 仿芒果TV ★289 - 微信小程序demo
- weChatApp-Run ★202 - 跑步微信小程序Demo
- wechat-v2ex ★193 - 简单的v2ex微信小程序
- wechat-weapp-taobao ★180 - 微信小程序demo 仿手机淘宝
- weapp-weipiao ★166 - 微信小程序-微票
- weapp-boilerplate ★150 - 一个为微信小程序开发准备的基础骨架
- 腾讯云微信小程序 ★149 - 一站式解决方案客户端示例
- wechat-app-zhihudaily ★149 - 微信小程序-知乎日报
- wechat_mall_applet ★145 - 巴爷微信商城的简单版本
- m-mall ★134 - 实现一个移动端小商城
- fenda-mock ★134 - 使用微信小程序实现分答这款APP的基础功能
- wechat-app-music ★110 - 微信小程序： 音乐播放器
- wechat-weapp-movie ★107 - 微信小程序 - 电影推荐
- wechat-weapp-mapdemo ★91 - 微信小程序开发demo-地图定位
- weapp-douban-film ★75 - 微信小程序 - 豆瓣电影
- wechat-weapp-redux-todos ★74 - 微信小程序集成Redux实现的Todo list
- Artand ★70 - 微信小程序
- weapp-one ★66 - 仿 「ONE · 一个」 的微信小程序
- weapp-demo-session ★62 - 微信小程序示例一笔到底
- wepy-wechat-demo ★60 - wepy仿微信聊天界面
- BearDiary ★57 - 微信小程序之小熊の日记
- wxflex ★51 - 微信小程序的Flex布局demo
- 番茄时钟 ★50 - 番茄时钟微信小程序版
- wechat-chat ★49 - 微信小程序版聊天室
- wxapp-sCalc ★46 - 微信小程序版简易计算器，适合入门练手
- wechat-weapp-demo ★46 - 一个简单的微信小程序购物车DEMO
- weapp-newsapp ★41 - 微信小程序-公众号热门文章信息流
- weapp-girls ★39 - 通过Node.js实现的妹子照片爬虫微信小程序
- wechatapp-news-reader ★38 - 新闻阅读器
- wxapp-hiapp ★38 - HiApp 微信小程序版
- netmusic-app ★36 - 仿网易云音乐APP的微信小程序
- weapp-node-server-demo ★36 - Wafer 服务端 Demo
- wechat-app-flexlayout ★36 - 从FlexLayout布局开始学习微信小程序
- weapp-demo-breadtrip ★35 - 基于面包旅行 API 制作的微信小程序示例
- weapp-github ★35 - 微信小程序的简单尝试
- weapp-V2ex ★33 - V2ex 微信小程序版
- wechat-app-xiaoyima ★26 - 仿大姨妈的微信小程序
- yiyaowang-wx ★25 - 医药网原生APP的微信小程序DEMO
- WXBaiSi ★22 - 微信小程序仿百思不得姐
- weapp-500px ★22 - 微信小程序
- hotapp-notepad ★21 - 微信小程序HotApp云笔记
- weapp ★21 - 小程序 hello world 尝鲜
- WeChatMeiZhi ★21 - 微信小程序版妹纸图
- WechatApp-BaisiSister ★20 - 微信小程序版百思不得姐
- wxapp-2048 ★20 - 微信小程序2048
- wxreading ★19 - 微信小程序跟读
- WxMasonry ★18 - 微信小程序瀑布流布局模式
- GankCamp-WechatAPP ★16 - 微信小程序版干货集中营
- PigRaising ★16 - 专注管理时间的微信小程序
- weapp-douban-movie ★15 - 微信小程序版豆瓣电影
- weapp-lolgame ★14 - 英雄联盟(LOL)战绩查询
- doule ★13 - 微信小程序逗乐
- WexinApp_1024 ★13 - 简单的实现了1024的游戏规则
- wechat-app-githubfeed ★12 - 微信小程序试玩
- wxApp ★12 - 一步步开发微信小程序
- jspapa-wx ★11 - jspapa微信小程序版本
- wejoke ★10 - 微笑话微信小程序
- caipu_weixin ★10 - 微信小程序健康菜谱
- wxSortPickerView ★10 - 微信小程序首字母排序选择表
- CNodeJs-WXAPP ★10 - 微信小程序版的CNodeJs中文社区
- wx-mime ★10 - 微信小程序版的扫雷
- weapp-LeanCloud ★10 - LeanCloud 的微信小程序用户登陆Demo
- wx-mina-meteor ★10 - 一个 meteor 的 React todo list 例子
- liwushuoapp ★9 - 微信小程序开发的App
- labrador_mobx_example ★1 - 基于Labrador和mobx构建的小程序开发demo
UI组件
- weui-wxss ★1110 - 同微信原生视觉体验一致的基础样式库
- wx-charts ★178 - 微信小程序图表工具
- zanui-weapp ★149 - 好用易扩展的小程序 UI 库
- Wa-UI ★137 - 针对微信小程序整合的一套UI库
- wemark ★95 - 微信小程序Markdown渲染库
- wx-scrollable-tab-view ★75 - 小程序可滑动得tabview
- WeZRender ★57 - 微信小程序Canvas增强组件
- wx-alphabetical-listview ★52 - 带字母可滑动的列表小程序
- wx-drawer ★52 - 小程序模仿QQ6侧滑菜单
- wetoast ★45 - 仿照微信小程序提供的showToast功能
- wxapp-img-loader ★34 - 微信小程序的图片预加载组件
- wxapp ★33 - 微信小程序组件
- WeiXinProject ★28 - 列表的上拉刷新和上拉加载
- wxapp-charts ★26 - 微信小程序图表charts组件
- citySelect ★24 - 微信小程序城市选择器
- chartjs-wechat-mini-app ★20 - chartjs微信小程序适配
开发框架
- wepy ★552 - 小程序组件化开发框架
- Labrador ★534 - 微信小程序模块化开发框架
- wxapp-devFrame ★36 - 小程序基本的开发框架
实用库
- wxParse ★603 - 微信小程序富文本解析自定义组件
- wechat-weapp-redux ★136 - 微信小程序Redux绑定
- wxapp-socket-io ★79 - 微信小程序的SocketIO客户端
- wilddog-weapp ★52 - 野狗微信小程序客户SDK
- wafer-client-sdk ★52 - 微信小程序客户端腾讯云增强 SDK
- wxapp-google-analytics ★51 - 让微信小程序支持谷歌统计
- WxNotificationCenter ★46 - 微信小程序通知广播模式类
- wx-query ★45 - 微信小程序仿jQuery插件
- wxstream ★14 - 微信小程序的响应式编程类库封装
开发工具
- wept ★900 - 实时微信小程序开发工具
- weapp-quick ★304 - “微信Web开发者”拷贝工具
- Wxapp.vim ★175 - 微信小程序开发 Vim 插件
- miniapps ★113 - 小程序项目脚手架工具
- Matchmaker ★97 - 专为微信小程序开发的插件
- wechat_web_devtools ★91 - 微信开发者工具Linux版
- wecos ★30 - 微信小程序 COS 瘦身解决方案
服务端
- NAMI ★45 - 专为小程序而生的服务端开发容器
- m-mall-admin ★44 - 创建REST API的样板应用
- xpmjs ★39 - 小程序云端增强 SDK
- weapp-node-server-demo ★36 - Wafer 服务端 Demo
- Wafer 服务端 SDK - Java ★36 - 企业级微信小程序全栈方案
- weapp-php-server-sdk ★30 - 腾讯云微信小程序云端解决方案
其他
- wxapp-redux-starter ★83 - 提供方便快捷的微信小程序开发环境
项目实例
- wecqupt ★255 - 在微信内被便捷地获取和传播
- 豆瓣电影项目 ★66 - 微信小程序豆瓣电影项目
以上整理来源：知乎开源指南
前端自学路线
第一阶段：前端入门HTML5 +Css3+电商网页制作
课程内容：
1、HTML5 是网页开发的基础，从最简单的网页开发基础入手，使用常见的标签制作网页内容
2、Css3通过浮动、定位、Flex 精细控制网页布局，通过背景、圆角、阴影、渐变等美装饰美化网页内容，结合转换、过渡、动画高级特性增强用户体验，能够编写大型综合性网页。
3、电商网页制作，基于设计稿编写网页，确保网页布局的高还原度，综合运用 HTML、CSS 的基础知识，归纳使用技巧，提升综合实战水平，借助蓝湖协同平台，体验真实团队开发流程。
☛开始学习：Web前端入门教程，零基础前端视频教程pink老师_html5+css3_
第二阶段：JavaScript系列
JavaScript 基础语法
了解语言的基本概念，熟识语法规则，培养语言基础逻辑能力，建立良好的编程思维，具有一定的语言驾驭能力。
☛开始学习：JavaScript全套教程_零基础入门JavaScript，Web前端必学的JS教程
WebAPI/Dom Bom操作方法
学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。
☛开始学习：前端基础教程-JavaScript核心教程，JS必会的DOM BOM操作_pink老师
jQuery
借助 jQuery 提升开发的效率，同时借鉴和学习 jQuery 的封装实现思想，巩固面向对象的相关知识，加深对面象对象的理解。
☛开始学习：前端基础必备教程|jQuery网页开发案例精讲
数据可视化 ECharts 实战
综合 JavaScript、HTML、CSS 所学的知识，针对企业现实开发需求，基于 ECharts 数据可视化插件归纳数据可视化领域解决方案，提升知识综合运用水平。
☛开始学习：用最流行的图表引擎ECharts来展示电商平台数据，是不是超级酷炫
第三阶段 服务端编程
Ajax
系统的学习网页数据交互的 Ajax 技术，建立前后端交互的知识体系，为学生夯实网络编程的基础，为后期高级课程的学习做好铺垫。
☛开始学习：前端基础教程Ajax零基础入门_上部
☛开始学习：前端基础教程Ajax零基础入门_下部
Git
借助 Git 对项目进行版本控制，掌握实际开发中那些必知必会的 Git 操作。
☛开始学习：Git零基础入门到实战详解
nodejs基础
全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。
☛开始学习：4天精通Nodejs教程
MySQL
了解后端数据库的基本使用，能够使用常见的 SQL 语句操作数据库，并且能够使用 MySQL 模块在项目中操作 MySQL 数据库，为实现从前端程序员进阶到全栈程序员做准备。
☛开始学习：6天掌握mysql基础视频
第四阶段 Vue.js
满足前端工程师的岗位要求，重中之重，也是主流框架之一，必会技能。
☛开始学习：前端基础教程-4个小时带你快速入门vue
☛开始学习：前端开发利器vue，微信小程序快速开发实战
第五阶段 小程序
小程序基础+电商项目
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
☛开始学习：Web前端教程_零基础玩转微信小程序_
uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
☛开始学习：前端开发利器vue，微信小程序快速开发实战
第六阶段 React.js 基础
深入理解组件化和模块化开发思想，三大主流框架之一，满足企业招聘中的岗位要求。
☛开始学习：黑马程序员Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等
TypeScript 基础+高级
☛开始学习：2020年前端热门教程推荐|五天从零基础学会TypeScript_
小伙计们甩开膀子学起来吧。坚持就是胜利~