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

框架選擇

選擇uniapp：

1桶蛔、為了開發(fā)效率，我選擇uniapp框架漫谷，使用vue3.2語法仔雷。相比小程序的自身的框架，該框架開發(fā)效率更高舔示，編譯后的代碼更優(yōu)碟婆。

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

準(zhǔn)備工作

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

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

2. 登錄：

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

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

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

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

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

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

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

開發(fā)工作

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

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

2. 配置appid：

打開項(xiàng)目根目錄中的“manifest.json”-“微信小程序配置”，配置appid指么。這是為了后面可以直接在微信開發(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云開發(fā)缺亮，使用了nodejs語言，數(shù)據(jù)庫也是JSON格式的文檔型數(shù)據(jù)庫桥言，對(duì)于前端開發(fā)很友好萌踱，簡單易懂。

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

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

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

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

5. 配置頁面：

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

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

配置注冊(cè)頁面

6. 配置tabbar及globalStyle：

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

7. 開發(fā)頁面：

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

前端頁面：

我就簡單的說下我的小程序涉及了哪些頁面 - 首頁、紅包寡喝、我的糙俗、解析頁、解析記錄预鬓、教程頁面巧骚、常見問題、設(shè)置等等格二。

差不多10個(gè)頁面劈彪，開發(fā)周期大概在一周，后期還會(huì)不斷的更新迭代功能顶猜。

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

下載通道2使用了云函數(shù)上傳沧奴，再返回下載，避免下載地址沒配置下載域名出現(xiàn)下載失敵ふ滔吠；

調(diào)取解析接口走的是云函數(shù)纲菌，調(diào)取第三方接口，習(xí)慣寫在我的后臺(tái)進(jìn)行管理疮绷；

記錄解析數(shù)據(jù)到數(shù)據(jù)庫翰舌，方便了解實(shí)時(shí)情況；

定時(shí)任務(wù)一個(gè)矗愧，定時(shí)刪除云儲(chǔ)存的內(nèi)容灶芝，畢竟空間有限郑原，所以使用過了的文件就直接刪除唉韭；

獲取公告內(nèi)容，我做成動(dòng)態(tài)犯犁，方便之后緊急情況可以發(fā)布公告属愤；

配置下載域名，為了方便后期維護(hù)酸役，我直接做成接口配置住诸，方便新增接口的時(shí)候直接在數(shù)據(jù)庫里面去獲取，避免修改源碼涣澡。

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

在hbuilder x開發(fā)工具頂部的“運(yùn)行”-“運(yùn)行到小程序模擬器”-“微信開發(fā)者工具”贱呐。在這里注意，首次運(yùn)行入桂，需要先打開微信開發(fā)者工具的“設(shè)置”-“安全”-“服務(wù)端口”奄薇，這樣運(yùn)行到小程序的時(shí)候就可以直接打開，更改了代碼保存的時(shí)候就會(huì)自動(dòng)刷新到最新狀態(tài)抗愁。 開發(fā)調(diào)試頁面馁蒂，就是這個(gè)流程，路漫漫其修遠(yuǎn)兮蜘腌，慢慢開發(fā)沫屡，記得少掉點(diǎn)頭發(fā)！４橹椤沮脖！

9. 配置域名：

開發(fā)完成后，接下來就是配置一些相關(guān)域名芯急，保證在體驗(yàn)版的時(shí)候能夠正常使用勺届，體驗(yàn)版跟線上版本差不多，所以最終的測試可以使用體驗(yàn)版進(jìn)行測試志于。10. 發(fā)行上線： 在hbuilder x開發(fā)工具頂部的“發(fā)行”-“小程序-微信”涮因，直接發(fā)行到微信開發(fā)者工具中，會(huì)新打開一個(gè)界面顯示打包后的代碼伺绽，會(huì)發(fā)現(xiàn)讀取的是dist/build中的代碼养泡，這是正式上線的文件嗜湃。在微信開發(fā)者工具中點(diǎn)擊“上傳”，就可以上傳到小程序后臺(tái)澜掩，在版本管理中直接可以看到购披。在提交前，可以掃碼測試肩榕，再?zèng)Q定是否提交刚陡，提交審核通過后，可以直接上線株汉。

效果圖：

以上就是簡單的開發(fā)流程筐乳，其中還有很多細(xì)節(jié)需要在開發(fā)中去學(xué)習(xí)，我在這里就不做過多說明乔妈，如果把每個(gè)細(xì)節(jié)寫到位蝙云，那估計(jì)可以寫一本書。路漫漫其修遠(yuǎn)兮路召，學(xué)習(xí)的路很長勃刨，慢慢學(xué)習(xí)，慢慢品味股淡，爭取少掉點(diǎn)頭發(fā)~

歡迎加入QQ交流群：568984539身隐，加群備注‘地區(qū)-名字-技術(shù)類型’，以防亂加唯灵。

關(guān)于本文贾铝，如果任何疑問的可以在評(píng)論區(qū)留言。