开发微信小程序引荐什么前端框架？

不用你感动 · 发表于 2023-3-21 08:34:34

尔念问一下各人皆是用甚么前端框架开辟女伶 href="https://www.taojin168.com/cloud/" target="_blank">小法式的？大概有其余更佳的实践？orz.
自己年夜三，近来测验考试干一个中买柜的微疑小法式，但是以前对于微疑小法式的开辟完整不理解。
因为对于react有些理解以是原筹算用taro的，但是瞅到有人道被坑了......mpvue也有人道被坑过......
后真个话借出定。

WAbj · 发表于 2023-3-21 08:34:52

作为一个从事微信小程序开发6年的程序员，我来说说如何学习小程序开发，在学习过程中遇到的问题以及阶段，我都亲自整理了一份超2万字的详细小程序学习指南，非常值得您收藏。
小程序学习指南大纲，包含以下几大部分，可以按步骤逐一学习：
一.小程序学习路线

主要介绍学习小程序前，需要掌握的基本知识，罗列出小程序文档当常用到的知识点，整理出小程序学习的三个阶段，循序渐进学习，从入门、进阶、高级学习什么知识都逻辑出来，让大家少走弯路，学习起来也不费劲有目标。
二.小程序官方资源

学习小程序开发，官方资源文档是必看必查的。小程序相关的官方资料，我都一一列了出来。
三.小程序框架

用原生小程序开发效率慢，很多非常成熟、跨平台、跨语言的小程序框架，生态丰富。介绍了热门和成熟的第三方小程序框架，让大家找到合适自己的框架。这部分我也细分为：开发框架工具、插件、功能组件。
四.小程序开源源码

学习小程序的基本知识和小程序框架是远远不够的，闭门造车还不如站在大佬的肩膀上成长，这一部分我总结了上百个开源源码项目，按行业类目进行细分，要学习开发哪个行业的小程序项目，都能快速找到。
五.小程序项目源码

开源项目作为学习提升，但还不能产生价值，开源源码也不是很完善。这一步会介绍一些完整的项目源码。
六.小程序运营

学习小程序开发能提升你的技能，如何运营一个小程序，这是踏出商业化道路的第一步，只会开发小程序，不能推广运营小程序，只能当一个工具人。
七.小程序赚钱案例

微信小程序已经是一个成熟的生态，每个行业都需要小程序，这一步是剖析成功的小程序商业案例，这些小程序有什么功能，如何推广，准对的是什么用户群体，如何盈利等，有技能会运营，还需要提升我们的认知，具备商业思维。
八.小程序流量主

流量主是小程序盈利最为常见的，也是被动收入的一种方式。如何开通流量主、流量主能赚多少钱，这部分会意义介绍。

这份学习路线并不完美，还在持续更新，与时俱进，与时代同行。

一.小程序学习路线

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 微信小程序 http://socket.io 客户端 https://github.com/cytle/socket.io-mp-client
@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
http://weapp.socket.io ☆500+ - http://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 餐饮

餐厅订座小程序 https://gitee.com/wind-pheasant-zere/GoodFoodAppt?_from=gitee_search

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

五.小程序项目源码

六.小程序运营

七.小程序赚钱案例

八.小程序流量主

篇幅有限，内容太多，写到这里已经2万字，后面的几大部分也要很大篇幅拓展详细讲讲。
内容将会持续更新，如果对内容感兴趣，可以看这 小程序学习资源大全指南 - 江雨凡小程序开发

98kqiX · 发表于 2023-3-21 08:35:20

想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。

1：WeUI 小程序–使用教程

https://weui.io/

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。

2：美团小程序框架mpvue

Github：https://github.com/Meituan-Dianping/mpvue
官网： http://mpvue.com/

官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

3：组件化开发框架wepy

Github地址:https://github.com/Tencent/wepy
官网地址：https://tencent.github.io/wepy

官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.

4：官方框架MINA

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

5：Tina.js 一款轻巧的渐进式微信小程序框架

Tina.js 开源框架地址： https://github.com/tinajs/tina

官方介绍：是一款轻巧的渐进式微信小程序框架，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。

6：前端框架weweb

地址: https://github.com/wdfe/weweb

官方介绍：weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

7：微信UI组件库 iView Weapp

https://weapp.iviewui.com/

介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。

8：ZanUI-WeApp – 一个颜值高、好用、易扩展的微信小程序 UI 库

https://cnodejs.org/topic/589d625a5c8036f7019e7a4a

官方介绍：ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。包含 badge、btn、等共计 17 类组件或元素。

<hr/>推荐阅读：
慕课网：前端开发常用哪些工具软件？
慕课网：顶级程序员推荐的编程开发书籍【整合】
慕课网：2022年了，.Net和C#的就业情况如何？
慕课网：1分钟告诉你，程序员为什么要学习边缘计算？

作者：祈澈姑娘
链接：https://www.imooc.com/article/256688
来源：慕课网
本文原创发布于慕课网，转载请注明出处，谢谢合作

kM2ugqWV · 发表于 2023-3-21 08:35:42

小程序框架不算多，但国内大厂基本都有自己的一套，下面是用得最多的三个了。

美团的的mpvue，基于vue框架的，对于Vue框架开发者来说很好上手。
京东凹凸实验室的taro.js，有react，vue版本版本，支持h5，小程序和app。
开源社区的uniapp，国内用的人挺多，也是支持h5，小程序和app。

CQPs1KQn · 发表于 2023-3-21 08:36:04

大三的小朋友，目前还是主要以学习为目的吧，建议各个解决方案都可以了解一下。
但是也不必每个框架都深入尝试，真正使用，还是推荐原生小程序的方式。
理由如下：
1 微信小程序也在不断迭代中，不管哪种现存的第三方框架，都没办法实时跟上微信的节奏。
2 第三方框架，其实现原理，多数也是最终build成微信小程序源码，所以先了解微信官方的方式没有坏处。
3 如你所说，第三方框架质量参差不齐，即便维护的比较好的如taro，也还存在不少bug。