微信小程序的簡單開發流程，我用一個自制已上線的微信小程序 皮皮虎去水印 為例，做一個比較詳細的開發流程分析。

框架選擇

選擇uniapp：

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

2、后臺我選擇的是unicloud云開發，使用nodejs語法，由此前后端我一個人就可以搞定。

準備工作

1. 注冊小程序：

在微信公眾平臺注冊一個小程序賬號，已有賬號可以跳過注冊流程。

2. 登錄：

登錄后，在菜單“設置”-“開發設置”當中的開發設置獲取AppID備用，并在其配置服務器域名、消息推送等等。

3. 下載微信小程序開發工具：

小程序最終只能在其專門的開發工具上運行、發布等操作。

4. 下載HBuilder X開發工具：

選擇了uniapp框架，可以利用HBuilder X進行開發，方便快捷，大大增加開發效率，值得推薦。還可以利用腳手架方式，但我個人不推薦。

5. 小程序運行配置：

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

開發工作

1. 創建項目：

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

2. 配置appid：

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

3. 關聯云服務空間：

關聯云服務空間，一般一個新項目是需要新建一個云服務空間，小項目推薦使用阿里云。

unicloud云開發，使用了nodejs語言，數據庫也是JSON格式的文檔型數據庫，對于前端開發很友好，簡單易懂。

具體相關細節、開發文檔，參考unicloud官方文檔。

4. 創建相關文件：

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

其他的文件夾基本上就是創建項目的時候自帶的，我提到的這些可以根據自己的需要來創建。

5. 配置頁面：

在pages頁面下創建頁面，可以一鍵創建頁面，也可以自己創建文件夾和相應的文件（eg：pages/index/index），最后需要在pages.json中去注冊頁面，一鍵創建的頁面會自動在pages.json中注冊。

更多相關uniapp開發的配置，需要在uniapp官方文檔去學習，在這里說不完的。

6. 配置tabbar及globalStyle：

tab頁面需要手動配置相關的圖標和頁面，具體的可以參考我的小程序，也可以到uniapp官方文檔去查看相關的配置。

7. 開發頁面：

在創建的頁面中使用vue開發頁面，在這里具體的開發就不多說了，這就涉及到前端技術了，懂的不用說都懂，不懂的說再多也還是要去學習~

前端頁面：

• 我就簡單的說下我的小程序涉及了哪些頁面 - 首頁、紅包、我的、解析頁、解析記錄、教程頁面、常見問題、設置等等。
• 差不多10個頁面，開發周期大概在一周，后期還會不斷的更新迭代功能。

后端數據：

• 下載通道2使用了云函數上傳，再返回下載，避免下載地址沒配置下載域名出現下載失敗；
• 調取解析接口走的是云函數，調取第三方接口，習慣寫在我的后臺進行管理；
• 記錄解析數據到數據庫，方便了解實時情況；
• 定時任務一個，定時刪除云儲存的內容，畢竟空間有限，所以使用過了的文件就直接刪除；
• 獲取公告內容，我做成動態，方便之后緊急情況可以發布公告；
• 配置下載域名，為了方便后期維護，我直接做成接口配置，方便新增接口的時候直接在數據庫里面去獲取，避免修改源碼。

8. 運行到微信開發工具：

在hbuilder x開發工具頂部的“運行”-“運行到小程序模擬器”-“微信開發者工具”。在這里注意，首次運行，需要先打開微信開發者工具的“設置”-“安全”-“服務端口”，這樣運行到小程序的時候就可以直接打開，更改了代碼保存的時候就會自動刷新到最新狀態。

開發調試頁面，就是這個流程，路漫漫其修遠兮，慢慢開發，記得少掉點頭發！！！

9. 配置域名：

開發完成后，接下來就是配置一些相關域名，保證在體驗版的時候能夠正常使用，體驗版跟線上版本差不多，所以最終的測試可以使用體驗版進行測試。

10. 發行上線：

在hbuilder x開發工具頂部的“發行”-“小程序-微信”，直接發行到微信開發者工具中，會新打開一個界面顯示打包后的代碼，會發現讀取的是dist/build中的代碼，這是正式上線的文件。在微信開發者工具中點擊“上傳”，就可以上傳到小程序后臺，在版本管理中直接可以看到。在提交前，可以掃碼測試，再決定是否提交，提交審核通過后，可以直接上線。

效果圖

首頁：

解析頁：

紅包頁：

個人中心：

以上就是簡單的開發流程，其中還有很多細節需要在開發中去學習，我在這里就不做過多說明，如果把每個細節寫到位，那估計可以寫一本書。路漫漫其修遠兮，學習的路很長，慢慢學習，慢慢品味，爭取少掉點頭發~

如果有幫助，可以點贊+收藏+關注，后續有更多知識與您分享！！！

歡迎加入QQ技術群：568984539，加群備注‘地區-名字-技術類型’，以防亂加。

關于本文，如果任何疑問的可以在評論區留言，我看到就會第一時間回復的。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。