编程导航教程

首页

小程序学习路线 | 26 年最新零基础到精通一条龙(万人收藏⭐️)

2024-05-11 15:06
阅读 2.3w
下载文档
评论
问答
笔记
0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
大纲
    6

    编程导航学习网站:学编程、做项目、拿 Offer!

    企业高频面试题库:开始刷题,面试遇原题!

    精选简历模板大全:1 分钟搞定简历!

    AI 资源导航网站:获取最新 AI 黑科技!

    1 对 1 模拟面试:随时随地提升面试能力

    建议先观看:

    • 鱼皮的《小程序入门》视频教程:https://www.bilibili.com/video/BV1WA411N75W
    • 鱼皮的《利用 AI 开发学习英雄小程序》视频教程:https://www.bilibili.com/video/BV1yMn3zuE7L/
    • 鱼皮的《使用跨端框架开发小程序》视频教程:https://www.bilibili.com/video/BV1vM4m1R7K3/

    开篇介绍

    小程序是运行在 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、还有 Taro。

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

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

    4、低代码开发

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

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

    优点:开发成本极低,甚至连复制粘贴都不用!

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

    5、找别人开发

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

    6、AI 开发

    AI 时代已经到来,不妨让 Cursor、TRAE 等 AI 工具帮你开发一个小程序(狗头)。

    AI 开发的核心思想是利用 AI 编程工具(如 Cursor)和 AI Vibe Coding 方式,通过提示词工程和 AI 对话来快速生成代码、调试问题、优化代码。

    优点:开发效率极高,适合快速原型开发和验证创意

    缺点:需要一定的编程基础来审查和优化 AI 生成的代码,完全依赖 AI 可能导致代码质量不稳定!

    推荐学习资源:

    • 鱼皮的《利用 AI 开发学习英雄小程序》视频教程:https://www.bilibili.com/video/BV1yMn3zuE7L/
    • AI 程序员技术练兵场项目:以 AI 编程为主的 Java + Vue 全栈 AI 应用开发教程,实战 LangChain4j AI 框架、结构化输出、提示词工程,掌握 AI Vibe Coding 开发完整前后端项目的流程和技巧。虽然不是小程序,但开发思路和 AI 协作方法完全适用于小程序开发

    学习路线图

    小程序开发学习路线思维导图

    整体学习建议

    1)前端是基础:如果还没学过前端,不要考虑去学习小程序。

    建议先学习前端基础(HTML、CSS、JavaScript),详细的前端学习路线请看:前端开发学习路线。

    2)不要把开发小程序当做你的主要学习方向,不是所有的公司都有小程序开发的岗位。如果真的想从事小程序开发,应该以它的父领域 —— 前端学习为主。

    3)官方文档最重要:小程序毕竟是和某个 APP(比如微信)绑定的,每家的规则都不一样,而且开发工具版本也在不断更新。所以在开发时一定要多看 官方文档,并且以最新的官方文档为主!

    4)遇到问题先看官方资源:遇到小程序开发的问题首先看官方文档、使用 官方的交流社区,其次才是搜索引擎。

    5)善用 AI 辅助:可以让 AI 帮你生成小程序代码、解释小程序 API、Debug 报错。更多 AI 工具推荐可以看 AI 导航。

    AI资源大全网站

    6)多用插件提升效率:做小程序开发时,如果要实现某个功能,建议先在小程序后台搜索一下有没有对应插件,提高开发效率。

    学习大纲

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

    一、前端入门

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

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

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

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

    资源

    快速入门:

    • ⭐ freeCodeCamp 在线编程:建议直接闯关实战

    稳定入门(巩固基础):

    • Pink 老师前端入门教程:零基础必看
    • MDN HTML 教程:官方文档
    • MDN CSS 教程:官方文档
    • MDN JavaScript 教程:官方文档

    详细的前端学习路线请看:前端开发学习路线

    二、原生开发

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

    小程序

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

    学习原生开发非常简单,直接从 官方文档 开始,把 “起步” 章节中提到的示例小程序跟着做完即可,先跑通一个从开发到上线 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):零基础入门
    • 微信官方小程序开发实战(2022):官方教程
    • 微信官方小程序课程:各行业开发经验、高校大赛作品分享
    • 小程序项目实战(2022):完整项目实战
    • B 站 UP 小程序系列视频:讲得还挺清晰

    三、框架开发

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

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

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

    在学习开发框架的过程中,你就可以开始做属于自己的小程序项目了,建议搭配一个组件库去学习。

    资源

    • uni-app 实战视频教程:完整的实战教程

    四、小程序后端

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

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

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

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

    因为云开发已经集成到微信开发者工具中了,所以上手云开发非常简单,依然是阅读 微信官方云开发文档 即可。

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

    鱼皮也是有幸作为腾讯云开发高级布道师,之前给大家分享过很多这方面的内容,吐槽一下有些文章官方没收录到网站上,比如 这篇。

    鱼皮还开源过一个 基于腾讯云开发部署的项目,感兴趣可以了解下。

    资源

    • 腾讯云开发官方文档:详细的云开发文档

    五、实践

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

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

    项目实战资源

    除了自己从零开发小程序,也可以跟着完整的项目教程来学习小程序开发的最佳实践。以下是一些优质的小程序项目教程:

    快速入门项目:

    • 从零做一个上万用户的小程序:真实项目经验分享

    进阶项目(含小程序开发):

    • ⭐ AI 答题应用平台:深入业务场景,学习实战 React 跨端小程序开发、Vue3 AI 应用网站开发,后端分库分表、分布式锁、缓存、幂等设计、设计模式、RxJava 响应式编程、SSE 实时推送、线程池隔离等。项目包含快速开发 MBTI 小程序的完整视频讲解,大幅提升开发经验和架构设计能力

    AI 辅助开发项目:

    • AI 程序员技术练兵场:以 AI 编程为主的 Java + Vue 全栈 AI 应用开发教程,实战 LangChain4j AI 框架、结构化输出、提示词工程,掌握企业级 AI 应用开发流程和技巧。虽然是 Web 应用而非小程序,但 AI Vibe Coding 的开发思路和方法完全适用于小程序开发,能帮你掌握如何用 AI 快速开发完整的前后端项目
    • 鱼皮的《利用 AI 开发学习英雄小程序》视频教程:https://www.bilibili.com/video/BV1yMn3zuE7L/

    💡 学习项目时建议先从简单的入门项目开始,掌握基本流程后再尝试进阶项目。一定要学会利用 AI 工具提升开发效率,这是未来程序员必备的技能。

    小伙伴们加油 💪🏻

    程序员必备资源

    1)程序员学习交流圈:极客教程、实战项目、求职宝典

    2)程序员面试八股文:实习/校招/社招高频考点、企业真题解析

    3)程序员写简历神器:专业模板、丰富例句、直通面试

    4)AI 知识资源大全:前沿技术、最新 AI 资讯、提示词大全

    5)1 对 1 模拟面试:实习/校招/社招面试拿 Offer 必备