微信小程序的簡(jiǎn)單開(kāi)發(fā)流程，我用一個(gè)自制已上線的微信小程序 皮皮虎去水印 為例，做一個(gè)比較詳細(xì)的開(kāi)發(fā)流程分析。

框架選擇

選擇uniapp：

1、為了開(kāi)發(fā)效率，我選擇uniapp框架，使用vue3.2語(yǔ)法。相比小程序的自身的框架，該框架開(kāi)發(fā)效率更高，編譯后的代碼更優(yōu)。

2、后臺(tái)我選擇的是unicloud云開(kāi)發(fā)，使用nodejs語(yǔ)法，由此前后端我一個(gè)人就可以搞定。

準(zhǔn)備工作

1. 注冊(cè)小程序：

在微信公眾平臺(tái)注冊(cè)一個(gè)小程序賬號(hào)，已有賬號(hào)可以跳過(guò)注冊(cè)流程。

2. 登錄：

登錄后，在菜單“設(shè)置”-“開(kāi)發(fā)設(shè)置”當(dāng)中的開(kāi)發(fā)設(shè)置獲取AppID備用，并在其配置服務(wù)器域名、消息推送等等。

3. 下載微信小程序開(kāi)發(fā)工具：

小程序最終只能在其專門(mén)的開(kāi)發(fā)工具上運(yùn)行、發(fā)布等操作。

4. 下載HBuilder X開(kāi)發(fā)工具：

選擇了uniapp框架，可以利用HBuilder X進(jìn)行開(kāi)發(fā)，方便快捷，大大增加開(kāi)發(fā)效率，值得推薦。還可以利用腳手架方式，但我個(gè)人不推薦。

5. 小程序運(yùn)行配置：

在HBuilder X編輯器頂部菜單 “設(shè)置”-“運(yùn)行配置”-“小程序運(yùn)行配置”-“微信開(kāi)發(fā)者工具路徑”-“瀏覽”，找到微信開(kāi)發(fā)者工具的安裝目錄，選取“微信開(kāi)發(fā)者工具.exe”。

開(kāi)發(fā)工作

1. 創(chuàng)建項(xiàng)目：

在HBuilder X編輯器頂部菜左邊 “文件”-“新建”-“項(xiàng)目”-“uni-app項(xiàng)目”，選擇默認(rèn)模板，勾選下方的啟動(dòng)unicloud（我選擇的阿里云，可以白嫖），最后直接創(chuàng)建。

2. 配置appid：

打開(kāi)項(xiàng)目根目錄中的“manifest.json”-“微信小程序配置”，配置appid。這是為了后面可以直接在微信開(kāi)發(fā)工具中運(yùn)行做準(zhǔn)備，否則就算運(yùn)行有些功能也不能用，上線前是必須配置appid。

3. 關(guān)聯(lián)云服務(wù)空間：

關(guān)聯(lián)云服務(wù)空間，一般一個(gè)新項(xiàng)目是需要新建一個(gè)云服務(wù)空間，小項(xiàng)目推薦使用阿里云。

unicloud云開(kāi)發(fā)，使用了nodejs語(yǔ)言，數(shù)據(jù)庫(kù)也是JSON格式的文檔型數(shù)據(jù)庫(kù)，對(duì)于前端開(kāi)發(fā)很友好，簡(jiǎn)單易懂。

具體相關(guān)細(xì)節(jié)、開(kāi)發(fā)文檔，參考unicloud官方文檔。

4. 創(chuàng)建相關(guān)文件：

我自己的項(xiàng)目是創(chuàng)建了common（包括接口管理api/公共樣式css/工具類(lèi)utils等）、components（公共組件，uni_modules也是公共組件）、hooks（vue3衍生出來(lái)的公共函數(shù)文件夾，可以不用）、subpages（分包頁(yè)面）、store（vuex管理全局變量、全局方法等）、config.js（配置文件，一些全局配置）。

其他的文件夾基本上就是創(chuàng)建項(xiàng)目的時(shí)候自帶的，我提到的這些可以根據(jù)自己的需要來(lái)創(chuàng)建。

5. 配置頁(yè)面：

在pages頁(yè)面下創(chuàng)建頁(yè)面，可以一鍵創(chuàng)建頁(yè)面，也可以自己創(chuàng)建文件夾和相應(yīng)的文件（eg：pages/index/index），最后需要在pages.json中去注冊(cè)頁(yè)面，一鍵創(chuàng)建的頁(yè)面會(huì)自動(dòng)在pages.json中注冊(cè)。

更多相關(guān)uniapp開(kāi)發(fā)的配置，需要在uniapp官方文檔去學(xué)習(xí)，在這里說(shuō)不完的。

6. 配置tabbar及globalStyle：

tab頁(yè)面需要手動(dòng)配置相關(guān)的圖標(biāo)和頁(yè)面，具體的可以參考我的小程序，也可以到uniapp官方文檔去查看相關(guān)的配置。

7. 開(kāi)發(fā)頁(yè)面：

在創(chuàng)建的頁(yè)面中使用vue開(kāi)發(fā)頁(yè)面，在這里具體的開(kāi)發(fā)就不多說(shuō)了，這就涉及到前端技術(shù)了，懂的不用說(shuō)都懂，不懂的說(shuō)再多也還是要去學(xué)習(xí)~

前端頁(yè)面：

• 我就簡(jiǎn)單的說(shuō)下我的小程序涉及了哪些頁(yè)面 - 首頁(yè)、紅包、我的、解析頁(yè)、解析記錄、教程頁(yè)面、常見(jiàn)問(wèn)題、設(shè)置等等。
• 差不多10個(gè)頁(yè)面，開(kāi)發(fā)周期大概在一周，后期還會(huì)不斷的更新迭代功能。

后端數(shù)據(jù)：

• 下載通道2使用了云函數(shù)上傳，再返回下載，避免下載地址沒(méi)配置下載域名出現(xiàn)下載失敗；
• 調(diào)取解析接口走的是云函數(shù)，調(diào)取第三方接口，習(xí)慣寫(xiě)在我的后臺(tái)進(jìn)行管理；
• 記錄解析數(shù)據(jù)到數(shù)據(jù)庫(kù)，方便了解實(shí)時(shí)情況；
• 定時(shí)任務(wù)一個(gè)，定時(shí)刪除云儲(chǔ)存的內(nèi)容，畢竟空間有限，所以使用過(guò)了的文件就直接刪除；
• 獲取公告內(nèi)容，我做成動(dòng)態(tài)，方便之后緊急情況可以發(fā)布公告；
• 配置下載域名，為了方便后期維護(hù)，我直接做成接口配置，方便新增接口的時(shí)候直接在數(shù)據(jù)庫(kù)里面去獲取，避免修改源碼。

8. 運(yùn)行到微信開(kāi)發(fā)工具：

在hbuilder x開(kāi)發(fā)工具頂部的“運(yùn)行”-“運(yùn)行到小程序模擬器”-“微信開(kāi)發(fā)者工具”。在這里注意，首次運(yùn)行，需要先打開(kāi)微信開(kāi)發(fā)者工具的“設(shè)置”-“安全”-“服務(wù)端口”，這樣運(yùn)行到小程序的時(shí)候就可以直接打開(kāi)，更改了代碼保存的時(shí)候就會(huì)自動(dòng)刷新到最新?tīng)顟B(tài)。

開(kāi)發(fā)調(diào)試頁(yè)面，就是這個(gè)流程，路漫漫其修遠(yuǎn)兮，慢慢開(kāi)發(fā)，記得少掉點(diǎn)頭發(fā)！！！

9. 配置域名：

開(kāi)發(fā)完成后，接下來(lái)就是配置一些相關(guān)域名，保證在體驗(yàn)版的時(shí)候能夠正常使用，體驗(yàn)版跟線上版本差不多，所以最終的測(cè)試可以使用體驗(yàn)版進(jìn)行測(cè)試。

10. 發(fā)行上線：

在hbuilder x開(kāi)發(fā)工具頂部的“發(fā)行”-“小程序-微信”，直接發(fā)行到微信開(kāi)發(fā)者工具中，會(huì)新打開(kāi)一個(gè)界面顯示打包后的代碼，會(huì)發(fā)現(xiàn)讀取的是dist/build中的代碼，這是正式上線的文件。在微信開(kāi)發(fā)者工具中點(diǎn)擊“上傳”，就可以上傳到小程序后臺(tái)，在版本管理中直接可以看到。在提交前，可以掃碼測(cè)試，再?zèng)Q定是否提交，提交審核通過(guò)后，可以直接上線。

效果圖

首頁(yè)：

解析頁(yè)：

紅包頁(yè)：

個(gè)人中心：

以上就是簡(jiǎn)單的開(kāi)發(fā)流程，其中還有很多細(xì)節(jié)需要在開(kāi)發(fā)中去學(xué)習(xí)，我在這里就不做過(guò)多說(shuō)明，如果把每個(gè)細(xì)節(jié)寫(xiě)到位，那估計(jì)可以寫(xiě)一本書(shū)。路漫漫其修遠(yuǎn)兮，學(xué)習(xí)的路很長(zhǎng)，慢慢學(xué)習(xí)，慢慢品味，爭(zhēng)取少掉點(diǎn)頭發(fā)~

如果有幫助，可以點(diǎn)贊+收藏+關(guān)注，后續(xù)有更多知識(shí)與您分享！！！

歡迎加入QQ技術(shù)群：568984539，加群備注‘地區(qū)-名字-技術(shù)類(lèi)型’，以防亂加。

關(guān)于本文，如果任何疑問(wèn)的可以在評(píng)論區(qū)留言，我看到就會(huì)第一時(shí)間回復(fù)的。

總結(jié)

以上是生活随笔為你收集整理的uniapp+unicloud开发微信小程序流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。