作为一个从事微信小程序开发6年的程序员,我来说说如何学习小程序开发,在学习过程中遇到的问题以及阶段,我都亲自整理了一份超4万字的详细小程序学习指南,非常值得您收藏。
小程序学习指南大纲,包含以下几大部分,可以按步骤逐一学习:
一.小程序学习路线
主要介绍学习小程序前,需要掌握的基本知识,罗列出小程序文档当常用到的知识点,整理出小程序学习的三个阶段,循序渐进学习,从入门、进阶、高级学习什么知识都逻辑出来,让大家少走弯路,学习起来也不费劲有目标。
二.小程序官方资源
学习小程序开发,官方资源文档是必看必查的。小程序相关的官方资料,我都一一列了出来。
三.小程序框架
用原生小程序开发效率慢,很多非常成熟、跨平台、跨语言的小程序框架,生态丰富。介绍了热门和成熟的第三方小程序框架,让大家找到合适自己的框架。这部分我也细分为:开发框架工具、插件、功能组件。
四.小程序开源源码
学习小程序的基本知识和小程序框架是远远不够的,闭门造车还不如站在大佬的肩膀上成长,这一部分我总结了上百个开源源码项目,按行业类目进行细分,要学习开发哪个行业的小程序项目,都能快速找到。
五.小程序项目源码
开源项目作为学习提升,但还不能产生价值,开源源码也不是很完善。这一步会介绍一些完整的项目源码。
六.小程序运营
学习小程序开发能提升你的技能,如何运营一个小程序,这是踏出商业化道路的第一步,只会开发小程序,不能推广运营小程序,只能当一个工具人。
七.小程序赚钱案例
微信小程序已经是一个成熟的生态,每个行业都需要小程序,这一步是剖析成功的小程序商业案例,这些小程序有什么功能,如何推广,准对的是什么用户群体,如何盈利等,有技能会运营,还需要提升我们的认知,具备商业思维。
八.小程序流量主
流量主是小程序盈利最为常见的,也是被动收入的一种方式。如何开通流量主、流量主能赚多少钱,这部分会意义介绍。
这份学习路线并不完美,还在持续更新,与时俱进,与时代同行。
一.小程序学习路线
1.什么是小程序?
微信小程序无需下载、触手可及、用完即走、无需卸载
2.前言 – 学编程需要的特质
- 定目标
- 拼命执行
- 不半途而废
3.学小程序前需要的知识基础
- 💬 描述:前端知识是小程序开发的基础,不需要你有多熟练,起码有了解,建议把小程序经常用到的知识点学好,再入门小程序会容易很多。
- 📚 前端资源:
- 阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend
- W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/
- pink老师前端入门教程:https://www.bilibili.com/video/BV14J4114768
📚 小程序经常用到的前端知识点:
HTML
- 💬 描述:用于定义一个网页结构的基本技术。
- 📚 资源:https://developer.mozilla.org/zh-CN/docs/Learn/HTML
CSS
- 💬 描述:层叠样式表,用于设计风格和布局。
- 📚 资源:✅弹性盒子布局flex:https://www.shuzhiduo.com/A/RnJWoL1BJq/
Javascript
- 💬 描述:具有函数优先的轻量级,解释型或即时编译型的编程语言。
- 📚 资源:回调函数 : https://www.bilibili.com/read/cv11101111/:
- 阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend
- W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/
- pink老师前端入门教程:https://www.bilibili.com/video/BV14J4114768
4.如何学习微信小程序
多看官方文档,多看几遍,遇到问题时再看
- 1.基础知识要过关,如:时间绑定、ajax请求、异步回调,搞清楚小程序外是怎么交换
- 2.通读一遍官方文档,看看都有哪些东西,都能干什么
- 3.多敲代码,看到例子、别人的demo下载下来运行,看原理和结构
- 4.多写多看、熟能手巧
5.开发前必读
- 1.开发前需要了解禁止类目和资质,看一下运营规范
- 2.微信小程序需要https请求,需要准备备案域名:由于备案需要一定时间,要事先准备
- 3.SSL证书准备
- 4.服务器
6.小程序学习阶段
⭐️ 开发工具
- 微信开发者工具(推荐) https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- HBuilder X https://www.dcloud.io/hbuilderx.html
6.1.小程序入门
6.1.1资源
- 小程序开发起步(官方视频教程)https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d
- 小程序基础开发之架构、框架、组件(官方视频教程)https://developers.weixin.qq.com/community/business/course/000ca4b0990a9087193d27b905780d
- 微信开发者工具系列课程(官方视频教程)https://developers.weixin.qq.com/community/business/course/000884131701789a46acb81f85140d
6.1.2常用知识要点
- 小程序框架
- 全局配置和页面配置 JSON配置构成
- 页面生命周期
- WXML模板
- WXSS样式
- JS逻辑交互
- 渲染层与逻辑层
- 小程序的结构目录
- 全局配置文件-pages字段
- 全局配置文件-window字段
- 全局配置文件-tabbar字段
- rpx单位
- 小程序组件
- view 视图容器
- 简单双向绑定
- 数据绑定
- 流程控制
- 条件语句 if 和 else
- 循环语句 for
- swiper轮播图组件
- button组件
- checkbox组件
- form组件
- input组件
- label组件
- picker组件
- radio组件
- switch组件
- textarea组件
- 代码注释
- 函数
- 函数创建
- 带参合不带参函数的区别
- 点击事件
- 变量
- 变量的使用和初始化
- 变量重新赋值
- 变量命名规范
- 全局变量和局部变量
- css样式
- class选择器
- 常见机型适配问题
- 视频组件video
- 地图组件map
- 自定义组件
- 小程序API
- wx.canIUse 判断当前版本是否可用
- wx.getWindowInfo() 获取窗口信息
- wx.updateWeChatApp() 更新客户端版本
- wx.swtitchTab()路由 跳转到 tabBar 页面
- wx.redirectTo() 关闭当前页面,跳转到应用内的某个页面
- wx.navigateTo() 保留当前页面,跳转到应用内的某个页面
- wx.navigateToMiniProgram() 打开另一个小程序
- wx.showShareMenu() 显示当前页面的转发按钮
- wx.onCopyUrl() 复制
- wx.showToast() 消息提示框
- wx.startPullDownRefresh() 下拉刷新
- wx.pageScrollTo() 滚动
- wx.request() 发起 HTTPS 网络请求
- wx.downloadFile() 下载文件资源到本地
- wx.uploadFile() 将本地资源上传到服务器
- wx.requestPayment() 发起微信支付
- 数据缓存
- wx.setStorageSync()
- wx.setStorage()
- wx.removeStorage()
- wx.getStorageSync()
- wx.getStorageInfo()
- wx.getStorage()
- 图片功能
- wx.saveImageToPhotosAlbum()
- wx.getImageInfo()
- wx.chooseMessageFile()
- wx.chooseImage()
- 视频
- wx.chooseVideo()
- wx.chooseMedia()
- 音频
- 相机
- 富文本
- 位置
- wx.openLocation()
- wx.getLocation()
- wx.chooseLocation()
- 文件
- 登录 wx.login()
- 用户信息
- wx.getUserProfile()
- wx.getUserInfo()
- UserInfo()
- 授权
- wx.authorizeForMiniProgram()
- wx.authorize()
- 收货地址 wx.chooseAddress()
- 订阅消息
- wx.requestSubscribeMessage()
- wx.requestSubscribeDeviceMessage()
- 视频号
- 微信客服 wx.openCustomerServiceChat()
- 联系人
- wx.chososeContact()
- wx.addPhoneContact()
- 剪切板
- wx.setClipboardData()
- wx.getClipboardData()
- 拨打电话 wx.makePhoneCall()
- 扫码 wx.scanCode()
6.2 小程序进阶
6.2.1资源
- 小程序基础能力介绍(官方视频教程)https://developers.weixin.qq.com/community/business/course/000a62c2a00cb03d0a8e5375c5b00d
- 小程序开发新能力解读(官方)https://developers.weixin.qq.com/community/business/course/0004ca93454498f68aac5faa25b80d
6.2.2 常用知识要点
- 接口调用凭证
- 小程序登录
- 用户信息
- 支付
- 小程序码
- 微信外部链接 URL Link
- 客服
6.3 小程序高级
6.3.1 资源
- 小程序性能优化实践(官方视频教程)基于实际开发场景,由资深开发者分享小程序性能优化的各项能力及应用实践,提升小程序性能表现 https://developers.weixin.qq.com/community/business/course/000606628dc2e86dc0ddcbb115940d
6.3.2 要点
- 小程序原理及框架剖析 https://segmentfault.com/a/1190000038836580
- 浅析微信小程序的底层架构原理 http://t.zoukankan.com/goloving-p-14663950.html
- 【小程序】图解小程序平台架构及其特征与应用机制 https://blog.csdn.net/ImagineCode/article/details/125360895
- 微信小程序「官方示例代码」浅析【上】 https://zhuanlan.zhihu.com/p/22574282
- 微信小程序「官方示例代码」剖析【下】:运行机制 https://zhuanlan.zhihu.com/p/22579053
- 「微信小程序」剖析(二):框架原理 | 在浏览器上运行的猜想 https://zhuanlan.zhihu.com/p/22607204
- 为什么我们需要一个兼容「微信小程序」的Web框架?https://zhuanlan.zhihu.com/p/22623615
- 让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm https://zhuanlan.zhihu.com/p/22644951
- 「微信小程序」剖析(四):原生的实时DOM转Virtual DOM https://zhuanlan.zhihu.com/p/22664265
- 这【五篇】文章将带你深入了解「微信小程序」 https://zhuanlan.zhihu.com/p/22687497
- 近两万字小程序攻略发布了 https://juejin.cn/post/6844903670589423623
- 【微信小程序】性能优化 https://juejin.cn/post/6844903638226173965
二.小程序官方资料
- 小程序注册接入 https://developers.weixin.qq.com/miniprogram/introduction/
- 官方工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/
- 运营规范 https://developers.weixin.qq.com/miniprogram/product/
- 开发社区 https://developers.weixin.qq.com/community/develop/question
- 微信支付 https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/pages/index.shtml
- 客服消息 https://developers.weixin.qq.com/miniprogram/introduction/custom.html
- 特殊行业所需资质资料 https://developers.weixin.qq.com/miniprogram/product/material/
- we数据分析 https://developers.weixin.qq.com/miniprogram/analysis/wedata/
三.小程序框架
1.工具
1.1 基于Vue
- uni-app ☆37.6k 使用 Vue 语法开发小程序、H5、App的统一框架 https://github.com/dcloudio/uni-app
- mpvue ☆20.4k 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系 https://github.com/Meituan-Dianping/mpvue
- megalo ☆1.6k 基于 Vue 的小程序开发框架 https://github.com/kaola-fed/megalo
- Okam 使用类 Vue 方式开发小程序的渐进增强框架,支持生成微信/百度等主流平台的小程序 https://github.com/ecomfe/okam
- rubic - 基于 Vue3 的小程序开发框架,在小程序中使用 Composition API https://github.com/jaskang/rubic
1.2 基于React
- Taro ☆32.2k 使用 React 的方式开发小程序的框架,同时支持生成多端应用 https://github.com/NervJS/taro
- Remax ☆4.5k 使用真正的 React 构建小程序 https://github.com/remaxjs/remax
1.3 基于Gulp
- WeApp-Workflow ☆100+ - 基于 Gulp 的微信小程序前端开发工作流 https://github.com/Jeff2Ma/WeApp-Workflow
- gulp-wxapp-boilerplate - 小程序+小程序云 Gulp 开发脚手架,支持云函数 mock https://github.com/ksky521/gulp-wxapp-boilerplate
- weapp-gulp - Gulp高效构建微信小程序,让开发变得更简单 https://github.com/sunnie1992/weapp-gulp
1.4 基于node
- wcc.js - wcc.js 是wxml文件和wxs文件编译器的nodejs实现 https://github.com/caijw/wcc.js
- wcsc.js - wcsc.js 是wxss文件编译器的nodejs实现 https://github.com/caijw/wcsc.js
1.5 其它
- WePY ☆22k 支持组件化的小程序开发框架 https://github.com/Tencent/wepy
- chameleon ☆9k 一套代码运行多端,一端所见即多端所见 https://github.com/didi/chameleon
- kbone Web ☆4.5k 与小程序同构解决方案 https://github.com/Tencent/kbone
- wept ☆2.8k 微信小程序实时运行环境 https://github.com/wetools/wept
- wechat_web_devtools ☆2.7k Linux 下微信开发者工具 https://github.com/cytle/wechat_web_devtools
- wafer ☆2.2k 快速构建具备弹性能力的微信小程序 https://github.com/tencentyun/wafer
- MPX ☆3.2k 增强型小程序框架,深度性能优化,支持跨小程序平台开发,完全兼容原生小程序组件 https://github.com/didi/mpx
- Labrador ☆1.7k 支持 ES6/7 的微信小程序组件化开发框架 https://github.com/maichong/labrador
- licia ☆2.1k 支持小程序的 JS 工具库 https://github.com/liriliri/licia
- CloudBase Framework ☆1.9k腾讯云开发开源一键部署工具,支持部署小程序及云开发应用 https://github.com/Tencent/cloudbase-framework
- tina ☆1.3k 轻巧的渐进式微信小程序框架 https://github.com/tinajs/tina
- minapp ☆927 - TypeScript 版小程序开发框架(兼容原生小程序代码) https://github.com/qiu8310/minapp
- xpmjs ☆100+ - 微信小程序云端增强 SDK https://github.com/xpmjs/xpmjs
- weapp-tailwindcss-webpack-plugin ☆100+ 在小程序里使用 TailwindCSS 吧 https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin
- weact 用 JSX 快速开发小程序 https://github.com/haojy/weact
- socket.io-mp-client 微信小程序 socket.io 客户端 https://github.com/cytle/socket.io-mp-client
- [@wxa](/user/wxa) AOP小程序开发框架 https://wxajs.github.io/wxa/
- wxml-parser - JavaScript WXML parser https://github.com/seanlong/wxml-parser
- weappx - 基于 redux 的数据层管理框架 https://github.com/tolerance-go/weappx
- weapp-start - 基于插件机制的开发脚手架,改善原生小程序开发体验 https://github.com/tolerance-go/weapp-start
- Egret Wing - 支持微信小程序实时预览的 IDE http://developer.egret.com/cn/github/egret-docs/Wing/update/update320/index.html
- wxapp-graphql - 小程序 GraphQL 客户端 https://github.com/Authing/wxapp-graphql
- wenaox - 小程序数据层管理 ,轻量性能好,支持中间件 https://github.com/cnyballk/wenaox
- cheers-mp - Almost零配置微信原生小程序脚手架,vue-cli般的体验~(ts、less、原生npm、云OSS、CI自动发布体验版) https://github.com/bigmeow/cheers-mp
- we-mobx - 在微信小程序中使用 MobX https://github.com/cicec/we-mobx
- weconsole - 功能全面、界面与体验对标 Chrome devtools 的可定制化的小程序开发调试面板 https://github.com/weimobGroup/WeConsole
1.6 px 转 rpx 插件
- postcss-pxtorpx-pro - postcss px 转 rpx 插件 https://github.com/Genuifx/postcss-pxtorpx-pro
- px2rpx - Px 转 Rpx 在线工具 https://github.com/allanguys/px2rpx
2.插件
- wxapp.vim - 提供微信小程序开发全方位支持的 vim 插件 https://github.com/chemzqm/wxapp.vim
- Matchmaker - IntelliJ IDEA 插件,注入方法 https://github.com/lypeer/Matchmaker
- wechatCode-complete - webstorm 插件(代码提示) https://github.com/qbright/wechatCode-complete
- wxapp - sublime plugin https://github.com/FloydaGithub/wxapp
- minapp - vscode 插件(支持 原生/mpvue/wepy 框架) https://github.com/qiu8310/minapp/blob/master/packages/minapp-vscode/README.md
- vscode-live-sass-compiler - vscode插件根据.scss文件自动生成wxss文件 https://github.com/ritwickdey/vscode-live-sass-compiler
- WePY Plugin For IntelliJ Platform - 让PhpStorm/WebStorm全面支持WePY的开发,包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/... http://wepy.iniself.com/
- wxml - vscode插件--微信小程序格式化以及高亮组件(高度自定义) https://github.com/cnyballk/wxml-vscode
- wux-weapp-snippets - Wux Weapp Snippets for VS Code. https://github.com/wux-weapp/wux-weapp-snippets
- wux-weapp-atom-snippets - Wux Weapp Snippets for Atom. https://github.com/wux-weapp/wux-weapp-atom-snippets
- wux-weapp-sublime-snippets - Wux Weapp Snippets Plugin for Sublime Text 2/3. https://github.com/wux-weapp/wux-weapp-sublime-snippets
3.组件
3.1 UI组件库
- weui-wxss ☆12.4K+ - 同微信原生视觉体验一致的基础样式库 https://github.com/Tencent/weui-wxss
- vant-weapp ☆12.3k+ - 高颜值、好用、易扩展的微信小程序 UI 库 https://github.com/youzan/vant-weapp
- iview-weapp ☆5.5k+ - 一套高质量的微信小程序 UI 组件库 https://github.com/TalkingData/iview-weapp
- wux-weapp ☆4.2k+ - 一套组件化、可复用、易扩展的微信小程序 UI 组件库 https://github.com/wux-weapp/wux-weapp
- Lin UI ☆2k+ - 一套设计优良、基于原生微信小程序语法的 UI 组件库 https://github.com/TaleLin/lin-ui
- Wa-UI ☆200+ - 针对微信小程序整合的一套 UI 库 https://github.com/liujians/Wa-UI
- wuss-weapp - 一款高质量,组件齐全,高自定义的微信小程序UI组件库 https://github.com/phonycode/wuss-weapp
3.2 日历
- wx_calendar ☆300+ - 小程序日历 https://github.com/treadpit/wx_calendar
- miniprogram-datepicker - 小程序日期选择器(支持农历) https://github.com/pithyone/miniprogram-datepicker
- mpvue-calendar - 微信小程序/浏览器端的日历组件mpvue-calendar;基于mpvue平台 支持农历、按周切换、可自定义。https://github.com/Hzy0913/mpvue-calendar
3.3 富文本
- wxParse ☆7.2K+ - 微信小程序富文本解析自定义组件,支持 HTML 及 markdown 解析 https://github.com/icindy/wxParse
- mp-html ☆1.4K+ - 小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用 https://github.com/jin-yufeng/mp-html
3.4 滑动
- wx-scrollable-tab-view ☆200+ - 小程序可滑动得 tab-view https://github.com/zhongjie-chen/wx-scrollable-tab-view
- wx-alphabetical-listview ☆100+ - 微信小程序带字母滑动的 listview https://github.com/zhongjie-chen/wx-alphabetical-listview
- wx-drawer ☆100+ - 小程序模仿 QQ6.0 侧滑菜单 https://github.com/zhongjie-chen/wx-drawer
- we-swiper ☆100+ - 微信小程序触摸内容滑动解决方案 we-swiper ☆100+ - 微信小程序触摸内容滑动解决方案
- 侧滑布局 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E4%BE%A7%E6%BB%91%E5%B8%83%E5%B1%80/weapp-slider-master
3.5 图表
- wx-charts ☆4.1k+ - 微信小程序图表 charts 组件 https://github.com/xiaolin3303/wx-charts
- wxapp-charts ☆100+ - 微信小程序图表 charts 组件 https://github.com/hawx1993/wxapp-charts
- chartjs-wechat-mini-app ☆100+ - chartjs 微信小程序适配 https://github.com/xiabingwu/chartjs-wechat-mini-app
- wepy-com-charts - 微信小程序 wepy 图表控件 https://github.com/CalvinHong/wepy-com-charts
- anka-tracker - 小程序打点库,用于统计用户行为数据 https://github.com/iException/anka-tracker
3.6 图片
- image-cropper ☆900+ - 💯微信小程序图片裁剪组件 https://github.com/1977474741/image-cropper
- wxapp-img-loader ☆400+ - 微信小程序图片预加载组件 https://github.com/o2team/wxapp-img-loader
- we-cropper ☆400+ - 微信小程序图片裁剪工具 https://github.com/we-plugin/we-cropper
- xing-weapp-editor - 小程序图文编辑组件 https://github.com/ianho/xing-weapp-editor
- 图片自适应 ,富文本解析 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%9B%BE%E7%89%87%E8%87%AA%E9%80%82%E5%BA%94%20%EF%BC%8C%E5%AF%8C%E6%96%87%E6%9C%AC%E8%A7%A3%E6%9E%90/wxapp-master
3.7 Canvas
- wxa-plugin-canvas ☆300+ - 微信小程序朋友圈海报生成组件 https://github.com/jasondu/wxa-plugin-canvas
- WeZRender ☆300+ - 微信小程序 Canvas 开发 https://github.com/guyoung/WeZRender
- mp_canvas_drawer - canvas绘制图片助手,一个json就制作分享朋友圈图片 https://github.com/kuckboy1994/mp_canvas_drawer
- anka-brush - 一款为简化小程序里canvas画图操作而创建的工具库 https://github.com/iException/anka-brush
3.8 组件功能
- WeiXinProject - 微信小程序列表上拉刷新和上拉加载 https://github.com/lidong1665/WeiXinProject
- wxapp ☆300+ - 微信小程序功能组件 https://github.com/youzouzou/wxapp
- wetoast ☆100+ - 微信小程序 toast 增强插件 https://github.com/kiinlam/wetoast
- wxSearch ☆200+ - 微信小程序优雅的搜索框 https://github.com/icindy/wxSearch
- citySelect ☆100+ - 微信小程序城市选择器 https://github.com/chenjinxinlove/citySelect
- xing-weapp-component - 微信小程序基础组件扩展 https://github.com/ianho/xing-weapp-component
- wx-statuslayout - 小程序页面状态切换组件 https://github.com/ZzjBeatYou/wx-statuslayout
- minapp-slider-left - 微信小程序左划删除组件 https://github.com/bigmeow/minapp-slider-left
- mp-swipe-card - 小程序卡片滑动组件,类似探探的效果,貌似现在只支持左右滑动 https://github.com/qizf7/mp-swipe-card
- we-validator - 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用。https://github.com/ChanceYu/we-validator
- wx-pulltorefresh-view - 简单灵活的下拉上拉刷新组件,支持微信小程序 https://github.com/zhongxuqi/wx-pulltorefresh-view
- weapp-input-frame - 微信小程序验证码输入框组件 https://github.com/xjh22222228/weapp-input-frame
- 地图定位 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9C%B0%E5%9B%BE%E5%AE%9A%E4%BD%8D/wechat-weapp-mapdemo-master
- 瀑布流布局 https://github.com/Data-Camp/WeApp_Demos/tree/master/%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/WxMasonry-master
- 小程序读取excel数据 https://github.com/qiushi123/xiaochengxu_demos/tree/master/190729%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%A1%A8%E6%A0%BC
- 手机验证码登录 https://github.com/qiushi123/xiaochengxu_demos/tree/master/190907%E6%89%8B%E6%9C%BA%E9%AA%8C%E8%AF%81%E7%A0%81%E7%99%BB%E5%BD%95
- 小程序二维码 https://github.com/qiushi123/xiaochengxu_demos/tree/master/191011%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BA%8C%E7%BB%B4%E7%A0%81
3.9 2D/3D
- wxDraw ☆100+ - 微信小程序 2D 动画库 https://github.com/bobiscool/wxDraw
3.10 API、Promise
- weapp-polyfill - [w3c 标准 API polyfill https://github.com/leancloud/weapp-polyfill
- wx-promise-pro ☆666+ - 微信小程序 Promise 库 https://github.com/youngjuning/wx-promise-pro
- minapp-api-promise - 微信小程序所有 API promise 化 https://github.com/bigmeow/minapp-api-promise
- wx-api-promisify - 优雅地将微信小程序API Promise化 https://github.com/vv13/wx-api-promisify
- weapp.request - 为微信小程序提供的网络请求组件,是 wx.request 的扩展,基于 Promise API,添加缓存控制。https://github.com/afishhhhh/weapp.request
- miniprogram-network - Redefine the Network API of MiniProgram(小程序网络请求库) https://github.com/NewFuture/miniprogram-network
3.11 其它
- wemark ☆1.100+ - 微信小程序 Markdown 渲染库 https://github.com/TooBug/wemark
- wx-promise-request ☆100+ - 微信小程序请求队列管理库 https://github.com/JoeZheng2015/wx-promise-request
- weapp-cookie ☆100+ - 一行代码让微信小程序支持 cookie 🍪🚀 https://github.com/charleslo1/weapp-cookie
- wxapp-lock - 微信小程序手势解锁 https://github.com/demi520/wxapp-lock
- weapp.socket.io ☆500+ - socket.io 风格的 websocket 类库 https://github.com/weapp-socketio/weapp.socket.io
- wxMD5 - 微信小程序 MD5 库 https://github.com/youngjuning/wxMD5
- wxBase64 - 微信小程序base64 库 https://github.com/youngjuning/wxBase64
- cue - A WX Compontent Tools https://github.com/WARJY/cue
- sol-weapp ☆300+ -微信小程序营销组件:红包雨、大转盘等营销组件 https://github.com/sunniejs/sol-weapp/
- we-debug - 一款灵活、易于拓展的微信小程序调试工具 https://github.com/dlhandsome/we-debug
- weapp-qrcode - 微信小程序生成二维码工具 https://github.com/tomfriwel/weapp-qrcode
- cheers-mp-router - 🚦精巧强大的小程序原生路由 https://github.com/bigmeow/cheers-mp-router
- wx-updata - 微信小程序官方 setData 替代品,只修改 data 中你希望修改的部分 ✈️ https://github.com/SHERlocked93/wx-updata
- three-platformize - 一个让 THREE 平台化的项目,已适配微信、淘宝、头条小程序 https://github.com/deepkolos/three-platformize
四.小程序开源源码(按类目分)
4.1可直接运行成功
4.1.1 教育
- 在线答题小程序 https://gitee.com/xiaofeiyang3369/myexamapp?_from=gitee_search#https://gitee.com/xiaofeiyang3369/phpapp
- 答题小程序 https://gitee.com/kesixin/QuestionWechatApp?_from=gitee_search
- 答题考试小程序 https://gitee.com/wulivicor/exam?_from=gitee_search
- 在线考试小程序 https://gitee.com/dabenbenyihao/online-test-applet?_from=gitee_search
- 答题小程序 https://gitee.com/423555593/datixiaochengxu?_from=gitee_search#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
4.1.2 交通
- 租车小程序前端 https://gitee.com/shanwei_city_da_shu_network/zuchemini?_from=gitee_search#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
- 停车场系统小程序 https://gitee.com/wangdefu/parking_system_applet?_from=gitee_search
4.1.3 房地产
- 租房小程序 https://gitee.com/open-source-byte/house?_from=gitee_search
- 租房微信小程序-带管理员后台 https://gitee.com/LiangSenCheng/house?_from=gitee_search
- 宿舍报修助手 https://gitee.com/aYuan-git/wechat-dorm-miniprogram?_from=gitee_search
4.1.4 生活
- 校园综合服务平台小程序 https://gitee.com/yaozy717/hbhzdtn?_from=gitee_search
- 微信报修小程序 https://gitee.com/cxyax/WeChatComputer-roomMaintenance?_from=gitee_search
- 垃圾分类小程序 https://gitee.com/joelingwei/rubbish?_from=gitee_search
- CC智慧物业小程序 https://gitee.com/voice-of-xiaozhuang/SmartPrroperty?_from=gitee_search
- 市民政务服务预约小程序 https://gitee.com/ht-jenny/CityAppt?_from=gitee_search
- HC智慧家园小程序 https://gitee.com/java110/WechatOwnerService?_from=gitee_search
- 口腔医院预约平台小程序 https://gitee.com/zmn_repository/wx_dental_hospital?_from=gitee_search
- 家政服务小程序 https://gitee.com/chun-hui-gao2022/familymini?_from=gitee_search
- 物资预约领取小程序 https://gitee.com/crystar/tcb-hackthon-mask?_from=gitee_search
- 美容机构预约小程序 https://gitee.com/naive2021/smartbeauty?_from=gitee_search
4.1.5 餐饮
4.1.6 文娱
- 婚姻登记中心小程序 https://gitee.com/wang-xiaocao/SunMarry?_from=gitee_search
- 旅游景区门户小程序 https://gitee.com/voice-of-xiaozhuang/WeTravel?_from=gitee_search
- 口袋吉他 https://gitee.com/alex1504/wx-guita_tab-public?_from=gitee_search
4.1.7 工具
- wyq2214368/remove-water-mark-mp - 🔥短视频去水印小程序(含服务端)https://github.com/wyq2214368/remove-water-mark-mp
- xtanyu/parsing-mini - 短视频去水印小程序(含Java版本服务端) https://github.com/xtanyu/parsing-mini
- realyao/Focus-clock ★100+ - ✅时间管理小程序:专注时钟(集成时间管理、目标计划、Todo待办、白噪声。易部署 适合新手学习入门)https://github.com/realyao/WXminiprogram-Focus-clock
- 小程序爱乐查 https://gitee.com/dave_hai/XiaoChengXuAiLeCha?_from=gitee_search
- 贴身管家小程序版 https://gitee.com/nmgwap/TieShenGuanJia-WeiXinXiaoChengXuBan?_from=gitee_search
- 婚礼请柬小程序 https://gitee.com/zijun2030/hun-jian?_from=gitee_search
- 驾校预约小程序 https://gitee.com/cai-jianya111/drivermini?_from=gitee_search
- 活动报名小程序 https://gitee.com/minzonetech/CCSmartMeet?_from=gitee_search
- 花栗鼠关爱小姨妈(小程序) https://gitee.com/hualishu910/Period_Diary?_from=gitee_search
4.1.8 电商
- 基于vue、element ui 的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城 小程序端 https://gitee.com/gz-yami/mall4m?_from=gitee_search#https://gitee.com/gz-yami/mall4j
4.1.9 社交
- imageslr/taro-library ★150+ - Taro + Redux + 本地 Mock Server 小程序示例项目 https://github.com/imageslr/taro-library
- 校友会小程序 https://gitee.com/minzonetech/CCSmartTXL?_from=gitee_search
4.1.10 体育
- 运动场馆预约小程序 https://gitee.com/voice-of-xiaozhuang/sportmini?_from=gitee_search
- 健身预约小程序 https://gitee.com/yupsh/fitness-reservation?_from=gitee_search
4.1.11 资讯
- RebeccaHanjw/weapp-wechat-zhihu ★800+ - 仿知乎 https://github.com/RebeccaHanjw/weapp-wechat-zhihu
- imageslr/weapp-library ★500+ - 在线借书平台(30+页面/组件化/Mock Server/云开发) https://github.com/imageslr/weapp-library
- 微慕WordpPress小程序开源版 前端 https://github.com/iamxjb/winxin-app-watch-life.net
- 大白鲸旅游攻略-小程序 https://gitee.com/ckjcode/big-white-whale-travel-guide?_from=gitee_search
- 追格资讯小程序开源版 https://gitee.com/zhuige_com/jiangqie_kafei?_from=gitee_search
- 豆瓣类影视查询记录小程序 https://gitee.com/x1299906945/Mark?_from=gitee_search
- 高仿Readhub小程序 https://gitee.com/richard1015/News?_from=gitee_search
4.1.12 其它
- deepkolos/three-platformize-demo-wechat - 微信小程序 THREE 包含16个loader测试demo https://github.com/deepkolos/three-platformize-demo-wechat
- deepkolos/wxmp-tensorflow - 微信小程序下运行最新TensorFlowJS的解决方案 https://github.com/deepkolos/wxmp-tensorflow
五.小程序项目源码
六.小程序运营
七.小程序赚钱案例
八.小程序流量主
篇幅有限,内容太多,后面的几大部分也要很大篇幅拓展详细讲讲,内容将会持续更新。