微信小程序 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_

小伙计们甩开膀子学起来吧。坚持就是胜利~