小程序开发学习路线

介绍

小程序是运行在 APP 中的一种随用随开的程序，是前端开发领域的应用形态之一，就像 PC 网站、H5 网站和 APP 一样。

小程序开发其实非常简单，一句话：只要你会前端，就会开发小程序！

为什么要做小程序？

我们从几个角度来说明：

1）用户角度：使用方便

相信只要用过小程序的同学，都能感受到它的方便，不用安装、随用随开、还能通过分享链接打开，这点完胜 APP。

但是小程序的用户体验一般是不如 APP 的，毕竟受到了宿主（比如微信 APP）的限制。

2）开发角度：开发成本低

开发小程序和开发一个网页的语法、流程和方法几乎完全一致，所以上面也说了，只要你会前端，就会开发小程序。此外，目前小程序的开发工具和生态都比较完善，也可以降低开发难度。

3）产品角度：上线成本低

小程序不需要在各个应用商店提交审核，就可以快速上线。虽然也要在小程序平台审核，但个人感觉比在应用商店过审方便一些。

4）老板角度：省钱

小程序前端运行在宿主 APP 里，不用单独购买一个服务器来部署前端（当然，后端还是需要服务器的）。

5）运维角度：更安全性

因为小程序是运行在宿主 APP 里（比如微信或支付宝），所以运行时会受到严格的安全限制，前端几乎不用担心被攻击。

6）运营角度：流量大，容易裂变

这可能是越来越多开发者选择小程序最重要的原因，小程序可以利用宿主 APP 本身的流量，打开率高、易被搜索发现、也容易被传播分享。

如果你要快速上线一个自己的产品，不止有能用、还要考虑运营、数据分析、推广裂变、运维，那么小程序无疑是最合适的，没有之一！火爆的 “羊了个羊” 就是最好的例子，但凡要下 APP 或者只是个网站，传播速度都不会有朋友圈那么快。

7）求职角度（面向薪资编程）：对前端同学来说是加分项

大多数公司是没有 “小程序开发” 这一岗位的，一般都统称为前端开发。如果你是一名前端开发同学，已经做过了 PC、H5 网站，不妨尝试做一个自己的小程序，拓宽一下自己的实践边界。

小程序生态

小程序依赖 APP 环境作为宿主，国内互联网大厂基本都有自己的小程序，可谓是百家争鸣。

比如微信小程序、支付宝小程序、百度小程序、抖音小程序、爱奇艺小程序等等。。。

但毫无疑问，微信作为国内早期的小程序入局产品，流量最大、小程序最多，所以如果你要学习小程序开发的话，强烈推荐从微信小程序开始学起。

本学习路线也是以微信小程序开发为主，学会一个，别家都会了。

开发小程序的几种方式

这里鱼皮应该是把所有的主流开发方式都分享出来了，每种方式都有自己的优缺点，要根据实际情况去选择：

1、原生开发

所谓 “原生”，就是不加任何封装和修饰的，官方提供的语法，基本等同于前端三件套 HTML + CSS + JS。

优点：

1. 最直接、上手相对容易，开发用到的语法和 API 都能在文档中查到。
2. 因为不存在封装，所以出了问题更容易定位和解决。

缺点：

1. 可用组件少、语法不灵活、很多东西都要自己手写，会导致代码量大、开发效率低。
2. 不同小程序宿主 APP 的语法会有一些区别，开发跨 APP 小程序成本更高。

2、框架开发

在原生开发的基础上，使用别人开发好的、现成的框架和组件库，比如 mpvue 框架和 Vant-weapp 组件库。

优点：

1. 写更少的代码，使得代码更简洁，能提高开发效率与代码的可维护性。
2. 小程序框架和前端框架的语法极为相似（甚至接近一致），减少学习成本，提高了开发效率。

缺点：

1. 有些框架封装得太好了，不深入了解它的话，问题的排查成本高
2. 框架不一定能覆盖你所有的需求，一旦遇到框架无法支持的语法时，就容易束手无策
3. 框架的更新迭代速度太快了，更新框架后可能会出现新 Bug

3、跨端开发

跨端开发是指：只编写一套代码，通过框架或工具自动帮你生成支持多个平台的小程序，甚至是其他产品形态，比如 H5 页面、APP 等。

比较有代表性的跨端开发框架就是 Uniapp。

优点：只用编写和维护同一套代码，大幅节约开发成本

缺点：跨端开发框架并不能完美适配所有平台，还是要针对不同的平台编写一些补丁代码，而且和框架开发一样，一旦后期才发现某个功能不支持你需要的那个平台，可能已经无力回天了（更换跨端开发框架成本太大），所以前期的技术选型真的很重要。

4、低代码开发

所谓低代码（或者零代码），就是写最少的代码（甚至是不写代码），通过在一个可视化页面上进行拖拉拽、编写一些配置，就能开发出一个小程序。

如腾讯的 WeDa、钉钉的宜搭等等。

优点：开发成本极低，甚至连复制粘贴都不用！

缺点：别人给你封装的工具如果太好用，不仅你学习不到什么开发经验，而且和跨端开发一样，出了 Bug 你可能根本无从下手。

5、找别人开发

最省事的开发方式就是找别人做！早在几年前，就有各种小程序定制的服务商了。而近几年，微信也推出了自己官方的小程序服务市场。如果你不是为了学习、只是希望有一个小程序，那么去 微信服务市场 、或者找 云服务商官方的小程序解决方案 ，花钱就能搞定了~

6、ChatGPT 开发

AI 时代已经到来，不妨让 ChatGPT 帮你开发一个小程序（狗头）。

学习建议

可以先看鱼皮的小程序入门分享视频：https://www.bilibili.com/video/BV1WA411N75W

一些建议：

1. 如果还没学过前端，不要考虑去学习小程序。
2. 不要把开发小程序当做你的主要学习方向，不是所有的公司都有小程序开发的岗位。如果真的想从事小程序开发，应该以它的父领域 —— 前端学习为主。
3. 小程序毕竟是和某个 APP（比如微信）绑定的，每家的规则都不一样，而且开发工具版本也在不断更新。所以在开发时一定要多看官方的开发文档，并且以最新的官方文档为主，不要完全死板地跟着教程去学习！
4. 遇到小程序开发的问题首先还是看 官方文档 、以及使用 官方的交流社区 ，其次才是百度等搜索引擎。
5. 做小程序开发时，如果要实现某个功能，建议先在小程序后台搜索一下有没有对应插件，建议多尝试使用一些插件，提高开发效率。

学习大纲

1. 前端入门
2. 原生开发
3. 框架开发
4. 小程序后端
5. 实践

一、前端入门

学小程序前，请先学习前端。因为小程序最基础的开发语法基本和前端三件套（HTML + CSS + JavaScript）的语法一致，会用前端开发网页，就会开发小程序！

前端需要学到什么程度呢？主要是以下 4 个步骤：

1. HTML + CSS + JavaScript 语法基础
2. 能够使用上述三件套开发一个基本的网页
3. 学习 CSS 响应式布局（媒体查询）
4. 能够开发一个响应式网页（手机端看也很合适）

前端学习建议以写代码为主，没什么复杂的理论知识，也不需要去理解，能写出在网页上能看到的东西就足够了。

资源

快速入门

建议直接闯关实战：https://www.freecodecamp.org/chinese/

菜鸟教程三件套：

• https://www.runoob.com/html/html-tutorial.html
• https://www.runoob.com/css/css-tutorial.html
• https://www.runoob.com/js/js-tutorial.html

稳定入门（巩固基础）

视频：https://www.bilibili.com/video/BV14J4114768

文档：

• https://developer.mozilla.org/zh-CN/docs/Learn/HTML
• https://developer.mozilla.org/zh-CN/docs/Learn/CSS
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

详细的前端学习路线请看：https://www.code-nav.cn/post/1640586014108303362

二、原生开发

注意，实际项目中，很少会用原生开发，一般都是用框架来加速开发的，所以这个阶段的目的是入门，而不是做出一个完整的项目！

小程序

所谓原生开发，就是使用小程序平台官方的语法（WXML + WXSS + JavaScript）进行开发，学完前端三件套之后就可以尝试了。

学习原生开发非常简单，直接从官方文档开始：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/，把 “起步” 章节中提到的示例小程序跟着做完即可，先跑通一个从开发到上线 Demo 小程序的流程，再去考虑开发完整的项目。

官方文档中，有几个章节一定要重点学习：

1. 起步
2. 目录结构
3. 配置小程序
4. 小程序框架
5. 基础能力
6. 开放能力
7. 调试

学习完基本的小程序开发流程后，可以去学习组件和组件库的使用，用别人写好的界面，提高自己的开发效率：

• 组件学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/
• WeUI 组件库学习文档：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/weui/

感兴趣的话还可以去学习下使用插件和其他开放能力，丰富小程序的功能：

• 插件：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/
• 开放能力：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/

小游戏

这里也提一下小游戏吧，开发小游戏的难度比小程序大，不仅需要前端基础，还要有一定的游戏开发经验。

这方面教学资源比较少，建议先把微信小游戏官方文档读一遍：快速上手 | 微信开放文档，了解一下完整的开发的流程。

可以再搭配 B 站的视频来旁敲侧击地补充一些知识：搜索_哔哩哔哩-bilibili

资源

注意，以下资源不是都要看，如果你看完官方文档觉得还是不知道怎么开发一个小程序 Demo，那么可以通过以下资源补充知识：

• 黑马爆款微信小程序视频（2022）：https://www.bilibili.com/video/BV1834y1676P
• 微信官方小程序开发实战（2022）：https://developers.weixin.qq.com/community/business/course/000c2a3a070c385dc59e58ec15700d
• 微信官方小程序开发实战（2020）：https://developers.weixin.qq.com/community/business/course/000c2a3a070c385dc59e58ec15700d
• 微信官方小程序课程：https://developers.weixin.qq.com/community/business/CategorySearch?query=%E5%B0%8F%E7%A8%8B%E5%BA%8F&page=1&cid=2（里面有各行业的小程序开发经验、小程序高校大赛作品分享）
• 小程序项目实战（2022）：https://www.bilibili.com/video/BV1sK411y7bg
• B 站 UP 小程序系列视频：https://www.bilibili.com/video/BV1St4y1p72U（讲的还挺清晰的）

三、框架开发

如上所说，企业开发小程序一般都是用框架的。如果你想高效开发小程序，建议先学习 Vue 或者 React 其中一门前端开发框架，因为小程序的开发框架的语法基本和这两个前端框架一致。

小程序开发框架有很多，建议根据自己熟悉的技术栈直接去学习 跨平台开发框架 。你会 Vue 的话，建议用 uni-app；会 React 的话建议用 Taro 或者阿里的 Remax，只用学会一门开发框架就足够了！

学习框架的话不建议到处找教程，因为框架版本一直在更新迭代，建议还是 跟着官方文档的入门教程 先把 Demo 做出来，然后再完整阅读一遍官方文档，了解框架的各种特性，并且通过写 Demo 的方式来实践。

在学习开发框架的过程中，你就可以开始做属于自己的小程序项目了，建议搭配一个组件库去学习。强烈推荐有赞的 Vant-weapp ，直接找到对应的组件复制粘贴到自己的项目中去看效果。学会这一个组件库后，其他组件库也都会用了。

资源

• 一个 uni-app 实战视频教程：https://www.bilibili.com/video/BV1eT411L7yj/

四、小程序后端

以上三个阶段我们只能开发出具有静态数据的小程序前端页面，但一般情况下，我们都希望自己的小程序能够让用户自己输入数据，并且让其他同学看到这些动态的数据。

这就需要后端开发知识了。

但对于以前端学习为主的同学来说，再去专门学习后端开发成本实在太高了！所以这里我建议大家直接使用官方提供的 小程序云开发 技术。

小程序云开发是一套技术栈，直接给你提供现成的数据库、后端接口 SDK、鉴权、文件存储、日志、监控告警等能力，可谓前端快速开发必备。

因为云开发已经集成到微信开发者工具中了，所以上手云开发非常简单，依然是阅读微信官方云开发文档即可：https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/getting-started.html

注意，微信小程序云开发和腾讯云开发是有一定区别的。虽然它们能力都相同，但是微信小程序云开发对小程序的支持更友好，相当于集成到开发工具里了；而腾讯云开发不止能用于小程序，网页也是可以的，应用范围更广。

鱼皮也是有幸作为腾讯云开发高级布道师，之前给大家分享过很多这方面的内容（https://cloudbase.net/community/support/preachers/yupi.html，吐槽一下有些文章官方没收录到网站上，比如：https://developers.weixin.qq.com/community/develop/article/doc/000c62feef890874e3eb868615b813）。

还开源过一个基于腾讯云开发部署的项目，感兴趣可以了解下：https://mp.weixin.qq.com/s?__biz=MzI1NDczNTAwMA==&mid=2247492012&idx=1&sn=354f78f0d16545ba76f879251a112057&scene=21#wechat_redirect

资源

1. 腾讯云开发官方文档：https://cloud.tencent.com/document/product/876、[https://docs.cloudbase.net/](https://docs.cloudbase.net/)
2. 腾讯官方云开发学习指南：https://www.cloudbase.net/community/guides.html
3. 云开发常见问题答疑：https://support.qq.com/products/148793/

五、实践

建议大家参加微信官方的高校小程序开发竞赛，可以在 官方社区 获取竞赛信息。

此外，也可以尝试做个小程序项目来参与计算机应用能力大赛、计算机程序设计大赛、互联网+、挑战杯等等。

资源

1. 从零做一个上万用户的小程序：https://www.bilibili.com/video/BV1uR4y1273T
2. 网易云音乐项目视频教程：https://www.bilibili.com/video/BV1H34y1p7Fd/

---

小伙伴们加油 💪🏻