2017年微信小程序发布开始，我就开始接触和学习微信小程序，看着小程序不断的更新迭代，功能越来越丰富，生态也越来越健全完善。

在这过程中，开发过商城小程序、停车扫码计费小程序、工具打卡小程序、流量主小程序等等。

很多人问我小程序怎么开发，一个人怎么制作自己的小程序？

想起自己刚接触微信小程序时，也是一头雾水，不知道从何学起，再简单的知识也看不懂，再简单的工具也不知道去哪下载。

作为一个过来人，从自己这么多年的开发经验和实战过程中，总结出一份小程序学习路线，可以说全网最详细也不为过，学习路线字数超4万字，但远远还没不够，只能当作是一个基础版本，之后我会不断丰富填充内容和知识点。

学习路线，不仅包含教你如何从零入门学习开发小程序，而且也从自己的经验中说说小程序如何运营，此外，还会涉及如何用小程序赚钱，拆解市场上成功的小程序案例，以及小程序如何结合AI来赚钱等等。

学习路线总体大纲：

1.什么是小程序

2.学习路线特点

3.学习小程序前需要的基础知识

4.开发小程序前准备

5.小程序入门基础知识

6.小程序进阶知识

7.小程序常用框架

8.小程序常用插件

9.小程序开源源码

10.小程序运营

11.小程序赚钱案例

12.小程序流量主

小程序学习路线

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

什么是小程序？

微信小程序无需下载、触手可及、用完即走、无需卸载

路线特点

  1. 一份全面的小程序知识点大梳理和汇总
  2. 分阶段学习
  3. 使用符合对知识点的重要程度做了区分，按需学习
  4. 知识点附有描述和资源链接
  5. 提供大量优质学习资源

符号表

可根据知识点前的符号按需选学，并获取知识点描述和学习资源。

前言 – 学编程需要的特质

  • 定目标
  • 拼命执行
  • 不半途而废

学小程序前需要的知识基础

描述：前端知识是小程序开发的基础，不需要你有多熟练，起码有了解，建议把小程序经常用到的知识点学好，再入门小程序会容易很多。

前端资源：

小程序经常用到的前端知识点：

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/

小程序官方资料

如何学习微信小程序

多看官方文档，多看几遍，遇到问题时再看

  • 1.基础知识要过关，如：时间绑定、ajax请求、异步回调，搞清楚小程序外是怎么交换
  • 2.通读一遍官方文档，看看都有哪些东西，都能干什么
  • 3.多敲代码，看到例子、别人的demo下载下来运行，看原理和结构
  • 4.多写多看、熟能手巧

开发前必读

  • 1.开发前需要了解禁止类目和资质，看一下运营规范
  • 2.微信小程序需要https请求，需要准备备案域名：由于备案需要一定时间，要事先准备
  • 3.SSL证书准备
  • 4.服务器

小程序视频教程资源

  • 9小时搞定微信小程序开发
  • uniapp前后端实战课
  • 人人都会微信小程序实战进阶
  • 微信小程序开发实战商业级应用
  • 微信小程序入门与实战
  • 微信小程序入门与实战常用组件 ApL开发技巧项目实战
  • 微信小程序云开发-从0打造云音乐全栈小程序

小程序学习阶段

开发工具

小程序入门

资源

常用知识要点

  • 小程序框架
    • 全局配置和页面配置 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()

小程序进阶

资源

常用知识要点

  • 接口调用凭证
  • 小程序登录
  • 用户信息
  • 支付
  • 小程序码
  • 微信外部链接 URL Link
  • 客服

小程序高级

资源

要点

小程序框架

工具

基于Vue

基于React

基于Gulp

基于node

其它

px 转 rpx 插件

插件

组件

UI组件库

日历

富文本

滑动

图表

图片

  • image-cropper ☆900+ –

微信小程序图片裁剪组件 https://github.com/1977474741/image-cropper

Canvas

组件功能

2D/3D

API、Promise

其它

https://github.com/charleslo1/weapp-cookie

精巧强大的小程序原生路由 https://github.com/bigmeow/cheers-mp-router

  • wx-updata – 微信小程序官方 setData 替代品，只修改 data 中你希望修改的部分

https://github.com/SHERlocked93/wx-updata

小程序开源源码（按类目分）

可直接运行成功

物流

教育

交通

房地产

生活

IT科技

餐饮

文娱

工具

  • wyq2214368/remove-water-mark-mp –

短视频去水印小程序（含服务端）https://github.com/wyq2214368/remove-water-mark-mp

时间管理小程序：专注时钟（集成时间管理、目标计划、Todo待办、白噪声。易部署 适合新手学习入门）https://github.com/realyao/WXminiprogram-Focus-clock

电商

社交

体育

汽车

资讯

其它

只有前端，后端源码不完整

物流

教育

交通

房地产

生活

IT科技

餐饮

文娱

基于taro + taro-ui + redux + typescript 开发的网易云音乐小程序 https://github.com/lsqy/taro-music

工具

】https://github.com/WarpPrism/SubwayRoutineMP

有本密码，云开发实现的AES加密密码本，支持指纹、人脸，UI简约大方<a href="https://github.com/arleyGuoLei/wechat-1password"> https://github.com/arleyGuoLei/wechat-1password

  • wilhantian/periodic-table –

精致的元素周期表小程序<a href="https://github.com/wilhantian/periodic-table"> https://github.com/wilhantian/periodic-table

  • terryso/super9 –

抖音一键去水印小程序: Taro + 微信云开发 https://github.com/terryso/super9

  • redhat123456/upPhysicalExercise –

up体能训练小程序(健身训练、观看视频、制定计划于一身的综合小程序) https://github.com/redhat123456/upPhysicalExercise

  • redhat123456/Tanger_query –

查询小程序(查询各种各样的信息的小程序) https://github.com/redhat123456/Tanger_query

电商

社交

体育

汽车

资讯

） https://github.com/aquanlerou/WeHalo

基于云开发的书架小程序（附教程）

https://github.com/AnsonZnl/bookshelf

小游戏

其它

2020 云开发实现单词对战小程序（随机匹配、人机对战、好友对战），专业UI https://github.com/arleyGuoLei/wx-words-pk

小程序项目源码

小程序运营

资源

小程序赚钱案例

小程序流量主

到这里已经接近4万字，其它部分内容可以看以下，是我这些年积累下来的实战经验。

江雨凡小程序开发 - 原创微信小程序学习路线，包含全面的知识点、免费资源、开源源码、开发框架、学习建议、项目、小程序技术变现、流量主、副业赚钱、资讯。​yd.shucaigang.cn/icon-default.png?t=N3I4https://yd.shucaigang.cn/

专注于微信小程序开发6年，我写的是关于小程序的系列文章。如果有小程序 的问题和需求，欢迎一起交流学习。

# 微信小程序 # 小程序 # 个人开发 # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区