作为一个过来人，从自己这么多年的开发经验和实战过程中，总结出一份小程序学习路线，可以说全网最详细也不为过，学习路线字数超4万字，但远远还没不够，只能当作是一个基础版本，之后我会不断丰富填充内容和知识点。
学习路线，不仅包含教你如何从零入门学习开发小程序，而且也从自己的经验中说说小程序如何运营，此外，还会涉及如何用小程序赚钱，拆解市场上成功的小程序案例，以及小程序如何结合AI来赚钱等等，小程序只是一种工具，如何利用小程序来为我们创造价值才是关键。
一.什么是小程序
二.学习路线特点
三.学习小程序前需要的基础知识
四.开发小程序前准备
五.小程序入门基础知识
六.小程序进阶知识
七.小程序常用框架
八.小程序常用插件
九.小程序开源源码
十.小程序运营
十一.小程序赚钱案例
十二.小程序流量主
温馨提示：可以根据自己的需求找相对应的类目，学习都要循序渐进。
一、小程序学习路线
这份学习路线并不完美，还在持续更新，与时俱进，与时代同行。
1.1什么是小程序？
二、小程序学习路线特点
一份全面的小程序知识点大梳理和汇总
2.1分阶段学习
使用符合对知识点的重要程度做了区分，按需学习
2.2知识点附有描述和资源链接
提供大量优质学习资源
三、前言–学编程需要的特质
3.1定目标
拼命执行
不半途而废
3.2学小程序前需要的知识基础
描述：前端知识（Javascript、html、css）是小程序开发的基础，不需要你有多熟练，起码有了解，建议把小程序经常用到的知识点学好，再入门小程序会容易很多。
注意：现在很多课程都是以某一个框架教学，很少用到原生，这对于刚入门的我们来说并不好，一是我们不知道原生组件和语法，不利用我们了解小程序底层逻辑。二是学习框架也是需要成本，增加了学习的负担，可能把框架学完了，你的兴趣也降低了很多。
3.3前端资源：
3.3.1小程序经常用到的前端知识点：
HTML
描述：用于定义一个网页结构的基本技术。
CSS
描述：层叠样式表，用于设计风格和布局。
资源：
Javascript
描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。
3.4小程序官方资料
多看官方文档，多看几遍，遇到问题时再看
2.通读一遍官方文档，看看都有哪些东西，都能干什么
3.多敲代码，看到例子、别人的demo下载下来运行，看原理和结构
4.多写多看、熟能手巧
四、开发前必读
1.开发前需要了解禁止类目和资质，看一下运营规范
3.SSL证书准备
4.服务器
五、小程序学习阶段
5.1开发工具和教程资料
小程序入门资源
5.2小程序环境搭建与开发工具介绍
5.2.2注册小程序账号，获取appid与appscret
5.2.4程序的开发体验
5.3基本目录结构与文件作用
开发者工具的使用
创建项目
了解小程序整体目录结构
项目设置
主体文件
页面文件
其他文件
配置文件详解
主配置文件app.json
页面配置文件
WXML模板
WXSS样式
逻辑层js文件
css样式
class选择器
页面样式文件wxss
尺寸单位
样式导入
5.4小程序常用基础组件
罗列的知识要点都是我们经常会用到，从实战中总结出来的。熟悉了这些知识点，开发小程序基本不成问题。
view组件
input组件
button组件
slider组件
form组件
radio组件
checkbox组件
picker组件
swiper组件
image组件
icon图标
switch组件
video组件
5.5小程序语法
函数
函数创建
带参合不带参函数的区别
变量
变量的使用和初始化
变量重新赋值
变量命名规范
全局变量和局部变量
5.6数据绑定和渲染
简单双向绑定
事件类型
事件绑定
事件对象
流程控制
条件语句if和else
循环语句for
条件渲染
列表渲染
认识loading组件
用toast显示提示信息
显示loading提示信息
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.chooseImage()图片功能
wx.chooseMedia()视频功能
富文本
收货地址wx.chooseAddress()
wx.setClipboardData()剪切板
扫码wx.scanCode()
5.8缓存机制和异步交互
生成本地缓存数据
从本地缓存读取数据
获取本地缓存数据
保存多条历史记录
使用数组保存多条历史记录
清理本地缓存
5.9应用弹性盒子布局
传统布局的实现方式
弹性盒子布局
弹性盒子布局的优点
如何让元素大小适配不同宽度屏幕
六、小程序进阶
6.1资源
6.2常用知识要点
认识wx.request接口函数
wx.request()发起HTTPS网络请求
wx.downloadFile()下载文件资源到本地
wx.uploadFile()将本地资源上传到服务器
6.3小程序高级
资源
要点
七、小程序常用框架
工具
基于Vue
基于React
基于Gulp
基于node
其它
px转rpx插件
八、小程序常用插件
组件
UI组件库
日历
滑动
图表
图片
image-cropper☆900+–
Canvas
组件功能
2D/3D
API、Promise
cheers-mp-router–
九、小程序开源源码（按类目分）
可直接运行成功
物流
教育
交通
房地产
生活
IT科技
餐饮
文娱
wyq2214368/remove-water-mark-mp–
realyao/Focus-clock★100+–
电商
社交
体育
汽车
资讯
只有前端，后端源码不完整
lsqy/taro-music–
WarpPrism/SubwayRoutineMP–【东京首尔曼谷新加坡巴黎地铁线路图
arleyGuoLei/wechat-1password–
wilhantian/periodic-table–
terryso/super9–
redhat123456/upPhysicalExercise–
redhat123456/Tanger_query–
AnsonZnl/bookshelf–
基于云开发的书架小程序（附教程）
小游戏
arleyGuoLei/wx-words-pk★100+–
十、小程序运营
十一、小程序赚钱案例
十二、小程序流量主
到这里已经接近4万字，其它部分内容可以看我的主页，内容都是我这些年积累下来的实战经验。
步骤一：准备工作
步骤二：注册一个制作小程序工具
一般这些平台在制作小程序的时候不需要用到代码什么的，直接就可以套用模板，通过自由拖拽组件的方式快速搭建自己的店铺，操作起来非常的方便快捷，在里面，我用的是木鱼小铺平台的工具，里面有各行各业的模板，大家可以根据自己的实际情况选择合适的模板。
步骤三：利用组件快速搭建
在后台利用基础组件和营销插件快速搭建店铺，将组件直接做拖拽到手机端里，上传图片和链接，点击提交即可
步骤四：一键发布
流程三：选用合适模板
在各式各样的模板中，选择适合自己行业的模板
流程四：编辑内容，发布
选择合适的模板模块中编辑内容，填充，丰富。编辑完成之后，就可以发布了。
流程五：进入打包小程序页面，选择代码包下载
流程七：小程序项目管理，点击添加项目
流程八：小程序APPID
填入申请到的小程序的AppID，上传刚刚下载的打包文件。在开发者内可以小程序预览，确认无误后，然后上传。
第三步：进入开发文档之后选择（工具）按钮。可以看到，然后在左侧最下方点击（下载）按钮，开发工具提供Windows32位、Windows64位和Mac三个版本。可根据实际情况，选择适合自己电脑的开发工具。
1.懂代码的小伙伴，可以用各大小程序平台的官方开发者工具来做小程序.
2.不懂代码的小伙伴，可以利用无代码的【比文云开发者工具】来制作小程序。
下面给大家讲讲如何利用无代码小程序制作工具来制作小程序：
1.在小程序制作平台注册账号
用电脑浏览器搜索比文云官网注册一个账号
这个账号是用于保存小程序制作进度的，也是统一管理小程序内容以及了解小程序数据的平台，所以账号要保存好哦。
2.套用小程序模板
选好后，直接套用即可应用到自己账号的小程序页面中。
3.完成小程序页面设计
进入到小程序开发页面。
-页面左侧会提供各种功能模块，只需要用鼠标拖动到相对小程序上就可以完成功能添加
-在页面右侧会提供功能和页面参数的设置，可以用键盘输入文字和数字，就能完成小程序设计。
4.在后台申请平台的小程序账号，并绑定。
代码的知识层面会涉及到javascript，css，小程序api文档，难度比较大的
它们大概长这样：
//index.js文件Page({data:{array:[{message:'foo',},{message:'bar'}]}})//index.wxml文件
小程序制作工具会为常见的行业，提前开发好了功能，注册一个账户，开箱即用就能搭建小程序。
流程也是很简单，挑选模板，动动鼠标，和搭积木一样搭建小程序，小白也能轻松上手
>>如果回答对你有帮助的话，可以收藏起来慢慢看哦~~~
第二步：搜索【名片活动行】小程序
第三步：点击加号创建自己的名片，可以手动填写名片信息
第四步：左右滑动选择名片模板编辑自己的名片，有8套免费公用模板可选择
第六步：如果在双方第一次见面或者不是好友的情况下，可以直接出示【名片码】给对方扫一扫，对方就可以立刻保存你的名片了。
第七步：如果想替同事或老板批量创建电子名片（数字名片），或者使用公司自己的名片模板，请登陆“数字名片行”官网www.dbcstore.com，选择标准化企业数字名片模板或者定制企业专署的数字名片模板。
第八步：使用数字名片（电子名片）开启你的数字商务之旅，线上线下一体化智能化，提升企业品牌形象。
随着科技的发展，现在制作小程序已经是非常简单的事情了
可以有很多种方式去制作小程序，常见的就有：
不同的方式，需要的知识和软件都不一样的。
自己懂代码的，可以安装开发者工具来自己开发代码。预算充足的，也可以外包定制给软件公司
中小企业的话，更多人是选择使用《小程序模板制作工具》的方式
因为操作简单，无需代码知识~~~
轻松三步，教你快速搭建自己的小程序！！！小白也能轻松制作~~
ps：最好使用营业执照去注册小程序
进去小程序制作工具，这里以呱呱赞小程序为例，挑选一个适合自己的模板，进行二次编辑，动动鼠标就能完成，和搭积木一样简单
戳下方直达：
看完是不是觉得很简单呢？
其实找对了方法，就算不懂代码的小白也是能开发自己的小程序！
感兴趣的小伙伴，快快戳下方尝试一下~~
（1）先了解应用如何开发
（3）小程序和公众号的区别
（4）小程序与APP的区别
【重要】HTML、CSS、JavaScript、PHP（基础）、MySQL（基础）
【次要】接触过Angular/Vue/React之类的前段框架
【次要】了解Node、ECMAScript2015（ES6）更好
（1）安装开发工具
（2）安装：傻瓜式安装>>一直下一步
（3）创建项目
（4）创建：
（5）工具使用介绍
概念1：小程序项目由n个页面组成
概念2：每个页面一般由4个核心文件，分别为逻辑代码（js）、页面结构（wxml）、页面样式（wxss）、页面配置（json）
1.核心开发思想
步骤1：显示静态页面（DIV+CSS）
步骤2：数据动态化（js发送异步请求获取数据，接着遍历显示数据）
2.创建页面
3.实现步骤：
a.定义路由（名词，指设置一个网址来访问文件）b.创建页面（js、wxss、wxml、json）c.修改wxml写结构（html）d.修改wxss写样式（css）-------------------------4.数据绑定
5.实现步骤
a.修改js文件代码b.修改wxml文件绑定数据---------------shphp.wxml
【{{title}}】当前页面：pages/shphp/shphp即可报名毕业薪资不达8K不收学费shphp.js
//pages/shphp/shphp.jsPage({/***页面的初始数据*/data:{title:"上海PHP学院"},/***生命周期函数--监听页面加载*相当于window.onload*/onLoad:function(options){}})6.数据遍历和判断：
效果图
Page({//初始化页面数据（data对象中的所有属性能被页面访问到）data:{title:'上海PHP学院',uname:'小泽',phpData:[{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'},{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'},{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'}]},/***生命周期函数--监听页面加载*相当于window.onload*/onLoad:function(options){}})7.实现步骤
shphp.js
Page({//初始化页面数据（data对象中的所有属性能被页面访问到）data:{title:'上海PHP学院',uname:'波妞',phpData:[{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'},{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'},{title:'2018年PHP课程重磅升级',title2:'不8000就业不收学费'}]},/***生命周期函数--监听页面加载*相当于window.onload*/onLoad:function(options){}})shphp.wxml
"pages":["pages/joke/joke",//笑话"pages/picture/picture",//趣图"pages/shphp/shphp",//上海PHP学院"pages/index/index",//小程序Demo页"pages/logs/logs"//小程序Demo页],window配置页面窗口
"window":{"navigationBarBackgroundColor":"#268dcd",//导航栏背景"navigationBarTitleText":"无聊笑话",//导航栏标题"navigationBarTextStyle":"white",//导航栏标题颜色"enablePullDownRefresh":true,//是否允许下拉刷新"backgroundTextStyle":"light"//下拉框样式},tabBar小程序底部导航
"tabBar":{"color":"#000000",//底部菜单文字颜色"selectedColor":"#268dcd",//底部菜单文字选中颜色"backgroundColor":"#ffffff",//底部菜单背景颜色"borderStyle":"white",//底部菜单边框颜色"list":[//菜单个数(至少两个生效){"text":"笑话","pagePath":"pages/joke/joke","iconPath":"image/ic_joke_gray.png",//默认图标"selectedIconPath":"image/ic_joke_blue.png"//选中图片}....}七、案例：笑话小程序(1)效果图（2）页面布局将静态资源放到项目中
笑话页面
实现：
app.wxss
/**app.wxss**/.container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:200rpx0;box-sizing:border-box;}.joke{margin:10px;padding:10px;border-radius:5px;border-top:1pxsolid#DEDEDE;border-left:1pxsolid#DEDEDE;box-shadow:2px2px2px#C7C7C7;}