收藏=学会 前端小程序开源项目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_

小伙计们甩开膀子学起来吧。坚持就是胜利~
收藏=学会 前端小程序开源项目121个_第1张图片

 

你可能感兴趣的:(前端,前端,小程序)