基于云開(kāi)發(fā)的微信小程序?qū)崙?zhàn)教程（一）

時(shí)間：2023-05-20 06:34:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-20 06:34:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

基于云開(kāi)發(fā)的微信小程序?qū)崙?zhàn)教程（一）：PS: 實(shí)戰(zhàn)篇已開(kāi)啟～手把手帶你體驗(yàn)小程序開(kāi)發(fā)+上線全流程體驗(yàn)，文章內(nèi)容戳

微信小程序云開(kāi)發(fā)從 0 到 1 實(shí)戰(zhàn)教程目錄：

（一）賬號(hào)注冊(cè)

（二）工具下載配置

（三）項(xiàng)目搭建及配置

（四）項(xiàng)目運(yùn)行調(diào)試

（五）頭像頁(yè)開(kāi)發(fā)(一)

---

基于云開(kāi)發(fā)的微信小程序?qū)崙?zhàn)教程（一）

最近剛開(kāi)發(fā)了款小程序，在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)，基于云開(kāi)發(fā)的教程資源不是很多，而且很不詳細(xì)。所以邊實(shí)戰(zhàn)邊總結(jié)了下云開(kāi)發(fā)的簡(jiǎn)單教程，希望對(duì)你有所幫助。

本章主要內(nèi)容：什么是小程序，云開(kāi)發(fā)的作用，如何建立自己的小程序

對(duì)文章格式要求高的，戳這里

1 、什么是小程序

微信小程序是個(gè)啥，就不多說(shuō)了，大家應(yīng)該都知道。如果不知道，看下面這個(gè)圖也就明白什么是小程序了。

因?yàn)橛辛宋⑿判〕绦?，我們可以不用下載 app，就能夠訪問(wèn)同程、攜程、騰訊會(huì)議、青桔單車(chē)、拼多多等，這些都屬于企業(yè)的小程序。

我們也能根據(jù)自己的創(chuàng)意和想法，制作個(gè)人小程序。




2、小程序的云開(kāi)發(fā)

2.1、開(kāi)發(fā)前需要知道的事情

小程序其實(shí)就相當(dāng)于我們平常訪問(wèn)的網(wǎng)站或 app，只不過(guò)區(qū)別是它必須在微信中打開(kāi)。所以其實(shí)小程序的開(kāi)發(fā)和其他網(wǎng)站的開(kāi)發(fā)原理是一樣的，不僅僅需要一個(gè)前端頁(yè)面的樣式展示，還需要有服務(wù)器來(lái)存放用戶信息、商品信息等數(shù)據(jù)。

而小程序必須基于微信打開(kāi)這一特點(diǎn)，同樣也給我們開(kāi)發(fā)小程序帶來(lái)了很多便利，因?yàn)槲覀兛梢灾苯邮褂梦⑿沤o提供的一些方法，很容易的實(shí)現(xiàn)上傳圖片、微信支付、打開(kāi)相機(jī)等功能。

2.2、云開(kāi)發(fā)的作用

剛剛提到，一個(gè)完整的網(wǎng)站肯定是需要有交互的，最基礎(chǔ)的比如用戶的登錄、注冊(cè)，我們肯定需要把用戶的信息存到某個(gè)地方，這樣才能去拿用戶的輸入和你存下來(lái)的信息做匹配，看用戶名和密碼是不是正確的，再告訴用戶登錄成功或失敗。

這個(gè)存儲(chǔ)用戶信息的地方就是服務(wù)器，正常的網(wǎng)站搭建是需要我們自己購(gòu)買(mǎi)服務(wù)器、搭建環(huán)境等一系列流程，對(duì)于后端開(kāi)發(fā)者而言，這些環(huán)境配置、數(shù)據(jù)庫(kù)開(kāi)發(fā)等也許很簡(jiǎn)單，但是沒(méi)接觸過(guò)后端語(yǔ)言的人想要完成一個(gè)完整的網(wǎng)站，就有一定的難度。

如果要搭建個(gè)人網(wǎng)站，對(duì)服務(wù)器使用感興趣的，可以參考本站這篇文章：如何免費(fèi)從 0 用服務(wù)器 配置和搭建個(gè)人網(wǎng)站？

而微信小程序的云開(kāi)發(fā)則免費(fèi)給我們的小程序提供了一個(gè)云服務(wù)器環(huán)境，直接就可以用，對(duì)前端開(kāi)發(fā)者以及未接觸過(guò)開(kāi)發(fā)行業(yè)的人而言，就非常容易上手完成自己的小程序了。

3、如何建立自己的小程序

3.1、注冊(cè)一個(gè)小程序

我們需要去「微信公眾平臺(tái)」注冊(cè)一個(gè)小程序賬號(hào)，一個(gè)賬號(hào)對(duì)應(yīng)一個(gè)小程序。注冊(cè)完成之后，我們就可以在微信公眾平臺(tái)登錄，進(jìn)入自己的小程序配置后臺(tái)，可以在這里修改自己小程序的名字，頭像，簡(jiǎn)介等信息，還可以看到自己小程序的編號(hào) AppID 和 小程序的密鑰 AppSecret，后面創(chuàng)建小程序項(xiàng)目的時(shí)候，會(huì)用到這兩個(gè)值。

有了這兩個(gè)值，微信就能區(qū)分出來(lái)哪個(gè)小程序是你的小程序了。因?yàn)槲覀冮_(kāi)發(fā)完之后要把代碼提交給微信，然后他們審核覺(jué)得沒(méi)有違規(guī)的地方，審核通過(guò)后，你做的小程序就能上線了，上線后大家就可以訪問(wèn)你的小程序了。







我們選擇注冊(cè)小程序，見(jiàn)下圖







接下來(lái)，填寫(xiě)相關(guān)信息







完成郵箱激活后，主題類型選擇「?jìng)€(gè)人」，并完成主題信息登記的填寫(xiě)。







完成信息填寫(xiě)后，點(diǎn)擊提交，就會(huì)彈出來(lái)個(gè)框，提示你注冊(cè)成功，點(diǎn)擊跳轉(zhuǎn)到小程序。







這個(gè)就是小程序的后臺(tái)，以后可以通過(guò)「微信公眾平臺(tái)」，通過(guò)你剛剛綁定的微信或郵箱進(jìn)行登錄。







在這個(gè)管理后臺(tái)中，你可以完善和修改你的小程序的頭像、簡(jiǎn)介和名稱。補(bǔ)全完整信息后，我們就可以進(jìn)行開(kāi)發(fā)了。







這里以個(gè)人開(kāi)發(fā)舉例，默認(rèn)只能管理員，也就是你自己一個(gè)人進(jìn)行開(kāi)發(fā)，如果需要和其他人一塊開(kāi)發(fā)，就需要點(diǎn)擊上圖中的「添加開(kāi)發(fā)者」把其他開(kāi)發(fā)人的微信錄入進(jìn)來(lái)。

點(diǎn)擊上圖中的「普通小程序開(kāi)發(fā)者工具」，下載「微信開(kāi)發(fā)者工具」，后續(xù)我們開(kāi)發(fā)和預(yù)覽小程序都是需要用到這個(gè)編輯器的。







根據(jù)自己電腦配置，選擇正確的安裝包進(jìn)行下載，安裝。

3.2、使用開(kāi)發(fā)者工具創(chuàng)建小程序項(xiàng)目

運(yùn)行微信開(kāi)發(fā)者工具后，會(huì)出現(xiàn)如下界面，用你剛才注冊(cè)小程序的微信，掃碼完成登錄。







選擇新建小程序，項(xiàng)目名稱和儲(chǔ)存目錄可以自己修改，也可以用它默認(rèn)的項(xiàng)目名稱和儲(chǔ)存位置。需要注意的是，后端服務(wù)這一項(xiàng)選擇「小程序·云開(kāi)發(fā)」







修改完項(xiàng)目名和存儲(chǔ)位置后，我們還需要把剛剛注冊(cè)的小程序編號(hào)，AppID 填寫(xiě)上去，這樣子創(chuàng)建的項(xiàng)目就能和我們的小程序關(guān)聯(lián)起來(lái)了。







AppID 可以去微信開(kāi)放平臺(tái)，登錄我們剛注冊(cè)的小程序的后臺(tái)，左側(cè)導(dǎo)航最下面的「設(shè)置」頁(yè)，滑到頁(yè)面最底部，查看賬號(hào)信息，找到我們的小程序編號(hào)，如下圖。







信息輸入完成后，點(diǎn)擊新建，會(huì)自動(dòng)構(gòu)建一個(gè)基于云開(kāi)發(fā)的小程序項(xiàng)目的官方例子。







點(diǎn)擊新建完成后，微信開(kāi)發(fā)者工具的編輯器會(huì)出現(xiàn)上方的界面，左側(cè)是我們的小程序頁(yè)面的預(yù)覽窗口，第二欄資源管理器可以看到我們的項(xiàng)目代碼文件夾。最右側(cè)是我們編輯代碼和查看輸出日志的區(qū)域。

我們可以看到，剛剛新建的項(xiàng)目有一個(gè)錯(cuò)誤，錯(cuò)誤信息是「沒(méi)有權(quán)限，請(qǐng)先開(kāi)通云服務(wù)」，可以猜測(cè)，我們還需要去開(kāi)通云服務(wù)。很簡(jiǎn)單，點(diǎn)擊左上角的「云開(kāi)發(fā)」，會(huì)出來(lái)下方的窗口。







選擇「預(yù)付費(fèi)」，給你的云服務(wù)環(huán)境起個(gè)名字，然后點(diǎn)擊開(kāi)通，就完成了云環(huán)境的創(chuàng)建。







這時(shí)候，返回我們剛剛的編輯器頁(yè)面，點(diǎn)擊編譯，就能看到剛剛的報(bào)錯(cuò)信息已經(jīng)沒(méi)有了，代表我們的云環(huán)境可以用了。







下一篇，具體講解編輯器如何使用，以及小程序云開(kāi)發(fā)的目錄結(jié)構(gòu)等知識(shí)。

---

PS: 實(shí)戰(zhàn)篇已開(kāi)啟～手把手帶你體驗(yàn)小程序開(kāi)發(fā)+上線全流程體驗(yàn)，文章內(nèi)容戳

微信小程序云開(kāi)發(fā)從 0 到 1 實(shí)戰(zhàn)教程目錄：

（一）賬號(hào)注冊(cè)

（二）工具下載配置

（三）項(xiàng)目搭建及配置

（四）項(xiàng)目運(yùn)行調(diào)試

（五）頭像頁(yè)開(kāi)發(fā)(一)