本文作者：程序員魚皮

免費(fèi)編程學(xué)習(xí) - 編程導(dǎo)航網(wǎng)：https://www.codefather.cn/

介紹

小程序是運(yùn)行在 APP 中的一種隨用隨開的程序，是前端開發(fā)領(lǐng)域的應(yīng)用形態(tài)之一，就像 PC 網(wǎng)站、H5 網(wǎng)站和 APP 一樣。

小程序開發(fā)其實(shí)非常簡(jiǎn)單，一句話：只要你會(huì)前端，就會(huì)開發(fā)小程序！

為什么要做小程序？

我們從幾個(gè)角度來說明：

1）用戶角度：使用方便

相信只要用過小程序的同學(xué)，都能感受到它的方便，不用安裝、隨用隨開、還能通過分享鏈接打開，這點(diǎn)完勝 APP。

但是小程序的用戶體驗(yàn)一般是不如 APP 的，畢竟受到了宿主（比如微信 APP）的限制。

2）開發(fā)角度：開發(fā)成本低

開發(fā)小程序和開發(fā)一個(gè)網(wǎng)頁(yè)的語(yǔ)法、流程和方法幾乎完全一致，所以上面也說了，只要你會(huì)前端，就會(huì)開發(fā)小程序。此外，目前小程序的開發(fā)工具和生態(tài)都比較完善，也可以降低開發(fā)難度。

3）產(chǎn)品角度：上線成本低

小程序不需要在各個(gè)應(yīng)用商店提交審核，就可以快速上線。雖然也要在小程序平臺(tái)審核，但個(gè)人感覺比在應(yīng)用商店過審方便一些。

4）老板角度：省錢

小程序前端運(yùn)行在宿主 APP 里，不用單獨(dú)購(gòu)買一個(gè)服務(wù)器來部署前端（當(dāng)然，后端還是需要服務(wù)器的）。

5）運(yùn)維角度：更安全性

因?yàn)樾〕绦蚴沁\(yùn)行在宿主 APP 里（比如微信或支付寶），所以運(yùn)行時(shí)會(huì)受到嚴(yán)格的安全限制，前端幾乎不用擔(dān)心被攻擊。

6）運(yùn)營(yíng)角度：流量大，容易裂變

這可能是越來越多開發(fā)者選擇小程序最重要的原因，小程序可以利用宿主 APP 本身的流量，打開率高、易被搜索發(fā)現(xiàn)、也容易被傳播分享。

如果你要快速上線一個(gè)自己的產(chǎn)品，不止有能用、還要考慮運(yùn)營(yíng)、數(shù)據(jù)分析、推廣裂變、運(yùn)維，那么小程序無疑是最合適的，沒有之一！火爆的 “羊了個(gè)羊” 就是最好的例子，但凡要下 APP 或者只是個(gè)網(wǎng)站，傳播速度都不會(huì)有朋友圈那么快。

7）求職角度（面向薪資編程）：對(duì)前端同學(xué)來說是加分項(xiàng)

大多數(shù)公司是沒有 “小程序開發(fā)” 這一崗位的，一般都統(tǒng)稱為前端開發(fā)。如果你是一名前端開發(fā)同學(xué)，已經(jīng)做過了 PC、H5 網(wǎng)站，不妨嘗試做一個(gè)自己的小程序，拓寬一下自己的實(shí)踐邊界。

小程序生態(tài)

小程序依賴 APP 環(huán)境作為宿主，國(guó)內(nèi)互聯(lián)網(wǎng)大廠基本都有自己的小程序，可謂是百家爭(zhēng)鳴。

比如微信小程序、支付寶小程序、百度小程序、抖音小程序、愛奇藝小程序等等。。。

但毫無疑問，微信作為國(guó)內(nèi)早期的小程序入局產(chǎn)品，流量最大、小程序最多，所以如果你要學(xué)習(xí)小程序開發(fā)的話，強(qiáng)烈推薦從微信小程序開始學(xué)起。

本學(xué)習(xí)路線也是以微信小程序開發(fā)為主，學(xué)會(huì)一個(gè)，別家都會(huì)了。

開發(fā)小程序的幾種方式

這里魚皮應(yīng)該是把所有的主流開發(fā)方式都分享出來了，每種方式都有自己的優(yōu)缺點(diǎn)，要根據(jù)實(shí)際情況去選擇：

1、原生開發(fā)

所謂 “原生”，就是不加任何封裝和修飾的，官方提供的語(yǔ)法，基本等同于前端三件套 HTML + CSS + JS。

優(yōu)點(diǎn)：

1. 最直接、上手相對(duì)容易，開發(fā)用到的語(yǔ)法和 API 都能在文檔中查到。
2. 因?yàn)椴淮嬖诜庋b，所以出了問題更容易定位和解決。

缺點(diǎn)：

1. 可用組件少、語(yǔ)法不靈活、很多東西都要自己手寫，會(huì)導(dǎo)致代碼量大、開發(fā)效率低。
2. 不同小程序宿主 APP 的語(yǔ)法會(huì)有一些區(qū)別，開發(fā)跨 APP 小程序成本更高。

2、框架開發(fā)

在原生開發(fā)的基礎(chǔ)上，使用別人開發(fā)好的、現(xiàn)成的框架和組件庫(kù)，比如 mpvue 框架和 Vant-weapp 組件庫(kù)。

優(yōu)點(diǎn)：

1. 寫更少的代碼，使得代碼更簡(jiǎn)潔，能提高開發(fā)效率與代碼的可維護(hù)性。
2. 小程序框架和前端框架的語(yǔ)法極為相似（甚至接近一致），減少學(xué)習(xí)成本，提高了開發(fā)效率。

缺點(diǎn)：

1. 有些框架封裝得太好了，不深入了解它的話，問題的排查成本高
2. 框架不一定能覆蓋你所有的需求，一旦遇到框架無法支持的語(yǔ)法時(shí)，就容易束手無策
3. 框架的更新迭代速度太快了，更新框架后可能會(huì)出現(xiàn)新 Bug

3、跨端開發(fā)

跨端開發(fā)是指：只編寫一套代碼，通過框架或工具自動(dòng)幫你生成支持多個(gè)平臺(tái)的小程序，甚至是其他產(chǎn)品形態(tài)，比如 H5 頁(yè)面、APP 等。

比較有代表性的跨端開發(fā)框架就是 Uniapp。

優(yōu)點(diǎn)：只用編寫和維護(hù)同一套代碼，大幅節(jié)約開發(fā)成本

缺點(diǎn)：跨端開發(fā)框架并不能完美適配所有平臺(tái)，還是要針對(duì)不同的平臺(tái)編寫一些補(bǔ)丁代碼，而且和框架開發(fā)一樣，一旦后期才發(fā)現(xiàn)某個(gè)功能不支持你需要的那個(gè)平臺(tái)，可能已經(jīng)無力回天了（更換跨端開發(fā)框架成本太大），所以前期的技術(shù)選型真的很重要。

4、低代碼開發(fā)

所謂低代碼（或者零代碼），就是寫最少的代碼（甚至是不寫代碼），通過在一個(gè)可視化頁(yè)面上進(jìn)行拖拉拽、編寫一些配置，就能開發(fā)出一個(gè)小程序。

如騰訊的 WeDa、釘釘?shù)囊舜畹鹊取?/p>

優(yōu)點(diǎn)：開發(fā)成本極低，甚至連復(fù)制粘貼都不用！

缺點(diǎn)：別人給你封裝的工具如果太好用，不僅你學(xué)習(xí)不到什么開發(fā)經(jīng)驗(yàn)，而且和跨端開發(fā)一樣，出了 Bug 你可能根本無從下手。

5、找別人開發(fā)

最省事的開發(fā)方式就是找別人做！早在幾年前，就有各種小程序定制的服務(wù)商了。而近幾年，微信也推出了自己官方的小程序服務(wù)市場(chǎng)。如果你不是為了學(xué)習(xí)、只是希望有一個(gè)小程序，那么去 微信服務(wù)市場(chǎng) 、或者找 云服務(wù)商官方的小程序解決方案 ，花錢就能搞定了~

6、ChatGPT 開發(fā)

AI 時(shí)代已經(jīng)到來，不妨讓 ChatGPT 幫你開發(fā)一個(gè)小程序（狗頭）。

學(xué)習(xí)建議

可以先看魚皮的小程序入門分享視頻：https://www.bilibili.com/video/BV1WA411N75W

一些建議：

1. 如果還沒學(xué)過前端，不要考慮去學(xué)習(xí)小程序。
2. 不要把開發(fā)小程序當(dāng)做你的主要學(xué)習(xí)方向，不是所有的公司都有小程序開發(fā)的崗位。如果真的想從事小程序開發(fā)，應(yīng)該以它的父領(lǐng)域 —— 前端學(xué)習(xí)為主。
3. 小程序畢竟是和某個(gè) APP（比如微信）綁定的，每家的規(guī)則都不一樣，而且開發(fā)工具版本也在不斷更新。所以在開發(fā)時(shí)一定要多看官方的開發(fā)文檔，并且以最新的官方文檔為主，不要完全死板地跟著教程去學(xué)習(xí)！
4. 遇到小程序開發(fā)的問題首先還是看 官方文檔 、以及使用 官方的交流社區(qū) ，其次才是百度等搜索引擎。
5. 做小程序開發(fā)時(shí)，如果要實(shí)現(xiàn)某個(gè)功能，建議先在小程序后臺(tái)搜索一下有沒有對(duì)應(yīng)插件，建議多嘗試使用一些插件，提高開發(fā)效率。

學(xué)習(xí)大綱

1. 前端入門
2. 原生開發(fā)
3. 框架開發(fā)
4. 小程序后端
5. 實(shí)踐

一、前端入門

學(xué)小程序前，請(qǐng)先學(xué)習(xí)前端。因?yàn)樾〕绦蜃罨A(chǔ)的開發(fā)語(yǔ)法基本和前端三件套（HTML + CSS + JavaScript）的語(yǔ)法一致，會(huì)用前端開發(fā)網(wǎng)頁(yè)，就會(huì)開發(fā)小程序！

前端需要學(xué)到什么程度呢？主要是以下 4 個(gè)步驟：

1. HTML + CSS + JavaScript 語(yǔ)法基礎(chǔ)
2. 能夠使用上述三件套開發(fā)一個(gè)基本的網(wǎng)頁(yè)
3. 學(xué)習(xí) CSS 響應(yīng)式布局（媒體查詢）
4. 能夠開發(fā)一個(gè)響應(yīng)式網(wǎng)頁(yè)（手機(jī)端看也很合適）

前端學(xué)習(xí)建議以寫代碼為主，沒什么復(fù)雜的理論知識(shí)，也不需要去理解，能寫出在網(wǎng)頁(yè)上能看到的東西就足夠了。

資源

快速入門

建議直接闖關(guān)實(shí)戰(zhàn)：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

穩(wěn)定入門（鞏固基礎(chǔ)）

視頻：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

詳細(xì)的前端學(xué)習(xí)路線請(qǐng)看：https://www.code-nav.cn/post/1640586014108303362

二、原生開發(fā)

注意，實(shí)際項(xiàng)目中，很少會(huì)用原生開發(fā)，一般都是用框架來加速開發(fā)的，所以這個(gè)階段的目的是入門，而不是做出一個(gè)完整的項(xiàng)目！

小程序

所謂原生開發(fā)，就是使用小程序平臺(tái)官方的語(yǔ)法（WXML + WXSS + JavaScript）進(jìn)行開發(fā)，學(xué)完前端三件套之后就可以嘗試了。

學(xué)習(xí)原生開發(fā)非常簡(jiǎn)單，直接從官方文檔開始：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/，把 “起步” 章節(jié)中提到的示例小程序跟著做完即可，先跑通一個(gè)從開發(fā)到上線 Demo 小程序的流程，再去考慮開發(fā)完整的項(xiàng)目。

官方文檔中，有幾個(gè)章節(jié)一定要重點(diǎn)學(xué)習(xí)：

1. 起步
2. 目錄結(jié)構(gòu)
3. 配置小程序
4. 小程序框架
5. 基礎(chǔ)能力
6. 開放能力
7. 調(diào)試

學(xué)習(xí)完基本的小程序開發(fā)流程后，可以去學(xué)習(xí)組件和組件庫(kù)的使用，用別人寫好的界面，提高自己的開發(fā)效率：

• 組件學(xué)習(xí)文檔：https://developers.weixin.qq.com/miniprogram/dev/component/
• WeUI 組件庫(kù)學(xué)習(xí)文檔：https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/weui/

感興趣的話還可以去學(xué)習(xí)下使用插件和其他開放能力，豐富小程序的功能：

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

小游戲

這里也提一下小游戲吧，開發(fā)小游戲的難度比小程序大，不僅需要前端基礎(chǔ)，還要有一定的游戲開發(fā)經(jīng)驗(yàn)。

這方面教學(xué)資源比較少，建議先把微信小游戲官方文檔讀一遍：快速上手 | 微信開放文檔，了解一下完整的開發(fā)的流程。

可以再搭配 B 站的視頻來旁敲側(cè)擊地補(bǔ)充一些知識(shí)：搜索_嗶哩嗶哩-bilibili

資源

注意，以下資源不是都要看，如果你看完官方文檔覺得還是不知道怎么開發(fā)一個(gè)小程序 Demo，那么可以通過以下資源補(bǔ)充知識(shí)：

• 黑馬爆款微信小程序視頻（2022）：https://www.bilibili.com/video/BV1834y1676P
• 微信官方小程序開發(fā)實(shí)戰(zhàn)（2022）：https://developers.weixin.qq.com/community/business/course/000c2a3a070c385dc59e58ec15700d
• 微信官方小程序開發(fā)實(shí)戰(zhàn)（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（里面有各行業(yè)的小程序開發(fā)經(jīng)驗(yàn)、小程序高校大賽作品分享）
• 小程序項(xiàng)目實(shí)戰(zhàn)（2022）：https://www.bilibili.com/video/BV1sK411y7bg
• B 站 UP 小程序系列視頻：https://www.bilibili.com/video/BV1St4y1p72U（講的還挺清晰的）

三、框架開發(fā)

如上所說，企業(yè)開發(fā)小程序一般都是用框架的。如果你想高效開發(fā)小程序，建議先學(xué)習(xí) Vue 或者 React 其中一門前端開發(fā)框架，因?yàn)樾〕绦虻拈_發(fā)框架的語(yǔ)法基本和這兩個(gè)前端框架一致。

小程序開發(fā)框架有很多，建議根據(jù)自己熟悉的技術(shù)棧直接去學(xué)習(xí) 跨平臺(tái)開發(fā)框架 。你會(huì) Vue 的話，建議用 uni-app；會(huì) React 的話建議用 Taro 或者阿里的 Remax，只用學(xué)會(huì)一門開發(fā)框架就足夠了！

學(xué)習(xí)框架的話不建議到處找教程，因?yàn)榭蚣馨姹疽恢痹诟碌?#xff0c;建議還是 跟著官方文檔的入門教程 先把 Demo 做出來，然后再完整閱讀一遍官方文檔，了解框架的各種特性，并且通過寫 Demo 的方式來實(shí)踐。

在學(xué)習(xí)開發(fā)框架的過程中，你就可以開始做屬于自己的小程序項(xiàng)目了，建議搭配一個(gè)組件庫(kù)去學(xué)習(xí)。強(qiáng)烈推薦有贊的 Vant-weapp ，直接找到對(duì)應(yīng)的組件復(fù)制粘貼到自己的項(xiàng)目中去看效果。學(xué)會(huì)這一個(gè)組件庫(kù)后，其他組件庫(kù)也都會(huì)用了。

資源

• 一個(gè) uni-app 實(shí)戰(zhàn)視頻教程：https://www.bilibili.com/video/BV1eT411L7yj/

四、小程序后端

以上三個(gè)階段我們只能開發(fā)出具有靜態(tài)數(shù)據(jù)的小程序前端頁(yè)面，但一般情況下，我們都希望自己的小程序能夠讓用戶自己輸入數(shù)據(jù)，并且讓其他同學(xué)看到這些動(dòng)態(tài)的數(shù)據(jù)。

這就需要后端開發(fā)知識(shí)了。

但對(duì)于以前端學(xué)習(xí)為主的同學(xué)來說，再去專門學(xué)習(xí)后端開發(fā)成本實(shí)在太高了！所以這里我建議大家直接使用官方提供的 小程序云開發(fā) 技術(shù)。

小程序云開發(fā)是一套技術(shù)棧，直接給你提供現(xiàn)成的數(shù)據(jù)庫(kù)、后端接口 SDK、鑒權(quán)、文件存儲(chǔ)、日志、監(jiān)控告警等能力，可謂前端快速開發(fā)必備。

因?yàn)樵崎_發(fā)已經(jīng)集成到微信開發(fā)者工具中了，所以上手云開發(fā)非常簡(jiǎn)單，依然是閱讀微信官方云開發(fā)文檔即可：https://developers.weixin.qq.com/minigame/dev/wxcloud/basis/getting-started.html

注意，微信小程序云開發(fā)和騰訊云開發(fā)是有一定區(qū)別的。雖然它們能力都相同，但是微信小程序云開發(fā)對(duì)小程序的支持更友好，相當(dāng)于集成到開發(fā)工具里了；而騰訊云開發(fā)不止能用于小程序，網(wǎng)頁(yè)也是可以的，應(yīng)用范圍更廣。

魚皮也是有幸作為騰訊云開發(fā)高級(jí)布道師，之前給大家分享過很多這方面的內(nèi)容（https://cloudbase.net/community/support/preachers/yupi.html，吐槽一下有些文章官方?jīng)]收錄到網(wǎng)站上，比如：https://developers.weixin.qq.com/community/develop/article/doc/000c62feef890874e3eb868615b813）。

還開源過一個(gè)基于騰訊云開發(fā)部署的項(xiàng)目，感興趣可以了解下：https://mp.weixin.qq.com/s?__biz=MzI1NDczNTAwMA==&mid=2247492012&idx=1&sn=354f78f0d16545ba76f879251a112057&scene=21#wechat_redirect

資源

1. 騰訊云開發(fā)官方文檔：https://cloud.tencent.com/document/product/876、https://docs.cloudbase.net/
2. 騰訊官方云開發(fā)學(xué)習(xí)指南：https://www.cloudbase.net/community/guides.html
3. 云開發(fā)常見問題答疑：https://support.qq.com/products/148793/

五、實(shí)踐

建議大家參加微信官方的高校小程序開發(fā)競(jìng)賽，可以在 官方社區(qū) 獲取競(jìng)賽信息。

此外，也可以嘗試做個(gè)小程序項(xiàng)目來參與計(jì)算機(jī)應(yīng)用能力大賽、計(jì)算機(jī)程序設(shè)計(jì)大賽、互聯(lián)網(wǎng)+、挑戰(zhàn)杯等等。

資源

1. 從零做一個(gè)上萬(wàn)用戶的小程序：https://www.bilibili.com/video/BV1uR4y1273T
2. 網(wǎng)易云音樂項(xiàng)目視頻教程：https://www.bilibili.com/video/BV1H34y1p7Fd/

---

小伙伴們加油 💪🏻

更多編程學(xué)習(xí)資源

• Java前端程序員必做項(xiàng)目實(shí)戰(zhàn)教程+畢設(shè)網(wǎng)站
• 程序員免費(fèi)編程學(xué)習(xí)交流社區(qū)（自學(xué)必備）
• 程序員保姆級(jí)求職寫簡(jiǎn)歷指南（找工作必備）
• 程序員免費(fèi)面試刷題網(wǎng)站工具（找工作必備）
• 最新Java零基礎(chǔ)入門學(xué)習(xí)路線 + Java教程
• 最新Python零基礎(chǔ)入門學(xué)習(xí)路線 + Python教程
• 最新前端零基礎(chǔ)入門學(xué)習(xí)路線 + 前端教程
• 最新數(shù)據(jù)結(jié)構(gòu)和算法零基礎(chǔ)入門學(xué)習(xí)路線 + 算法教程
• 最新C++零基礎(chǔ)入門學(xué)習(xí)路線、C++教程
• 最新數(shù)據(jù)庫(kù)零基礎(chǔ)入門學(xué)習(xí)路線 + 數(shù)據(jù)庫(kù)教程
• 最新Redis零基礎(chǔ)入門學(xué)習(xí)路線 + Redis教程
• 最新計(jì)算機(jī)基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)基礎(chǔ)教程
• 最新小程序入門學(xué)習(xí)路線 + 小程序開發(fā)教程
• 最新SQL零基礎(chǔ)入門學(xué)習(xí)路線 + SQL教程
• 最新Linux零基礎(chǔ)入門學(xué)習(xí)路線 + Linux教程
• 最新Git/GitHub零基礎(chǔ)入門學(xué)習(xí)路線 + Git教程
• 最新操作系統(tǒng)零基礎(chǔ)入門學(xué)習(xí)路線 + 操作系統(tǒng)教程
• 最新計(jì)算機(jī)網(wǎng)絡(luò)零基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)網(wǎng)絡(luò)教程
• 最新設(shè)計(jì)模式零基礎(chǔ)入門學(xué)習(xí)路線 + 設(shè)計(jì)模式教程
• 最新軟件工程零基礎(chǔ)入門學(xué)習(xí)路線 + 軟件工程教程