32圖，教你部署一個博客小程序
作者：陌溪
陌溪的學習筆記：http://note.moguit.cn
大家好，我是 陌溪。
最近小伙伴一直叫我出一份 蘑菇博客微信小程序 的部署文章，這陣子剛好我小程序的證書也到期了，借此機會剛好就可以帶著各位小伙伴一塊完成微信小程序部署了，大家坐穩(wěn)扶好，陌溪準備發(fā)車啦~
前置條件
在部署小程序之前，首先需要完成蘑菇博客的部署。如果還沒有部署的小伙伴，可以參考陌溪周末錄制的一鍵部署視頻，快速完成博客的搭建。
https://www.bilibili.com/video/BV13y4y1V7Us/
下載Hbuild
目前，微信小程序使用的 uniapp 進行開發(fā)的，uniapp 是使用 vue.js 開發(fā)的前端應用框架，可以做到開發(fā)一套代碼，可發(fā)布到 iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。同時，開發(fā) uniapp 需要專門的編輯器 HBuildX ，需要點擊下面的鏈接完成下載
HBuild下載：https://www.dcloud.io/hbuilderx.html
導入小程序項目
首先到碼云上下載蘑菇博客的源碼
蘑菇博客源碼：
https://gitee.com/moxi159753/mogu_blog_v2
下載完成后，找到源碼中的 uniapp_mogu_web 項目
導入到剛剛下載的 HbuildX 編輯器中，然后修改 config.js 文件，將其修改成蘑菇博客網(wǎng)關的域名。
配置https
因為小程序必須使用 https 才能夠進行訪問，因此需要給網(wǎng)關配置對應的 SSL 證書。
證書一般都需要到對應的云服務廠商進行購買，當然也可以自己生成證書，但是自己生成的證書也會出現(xiàn)不安全的提示，所以推薦還是通過云服務廠商購買免費的 SSL 證書。
陌溪本著能不花錢就不花錢的態(tài)度，來到了 騰訊云 SSL 證書的地址
SSL證書：https://cloud.tencent.com/product/ssl
然后選擇 域名免費版，點擊 免費快速申請
然后填寫剛剛的網(wǎng)關地址，點擊下一步
選擇驗證方式為：DNS 驗證
然后需要到阿里云的域名解析頁，添加下面的解析記錄
添加一條 TXT 的解析記錄，等待幾分鐘后，完成部署
等待一會后，點擊 查看域名驗證狀態(tài)，即可跳轉到證書下載頁
然后點擊下載，得到一個 zip 的壓縮包，解壓后，可以看到各種版本的證書，例如：Apache，IIS，Nginx，Tomcat 等等，因為我們使用的是 Nginx 進行證書配置，所以選擇 Nginx 版本的證書即可。
拷貝 Nginx 目錄中的內容，到部署蘑菇博客服務器的目錄下
cd /root/docker-compose/data/mogu_data/ssl/uniapp
拷貝完成后的效果，如下所示
然后到 nginx 的配置文件頁面
# 切換到配置文件目錄
cd /root/docker-compose/config
# 編輯nginx配置
vim mogu_data.conf
然后給 gateway.moguit.cn 添加上 SSL 證書配置
server {
listen 443 ssl;
server_name gateway.moguit.cn;
ssl on;
ssl_certificate /home/mogu_blog/mogu_data/ssl/uniapp/1_gateway.moguit.cn_bundle.crt;
ssl_certificate_key /home/mogu_blog/mogu_data/ssl/uniapp/2_gateway.moguit.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://101.132.194.128:8607/;
}
}
記錄添加完成后，重啟對應的 nginx
# 切換目錄
cd /root/docker-compose-bussiness
# 重啟
docker-compose -f yaml/mogu_data.yml restart
輸入下面的網(wǎng)址進行測試
https://gateway.moguit.cn/doc.html
若能夠打開頁面，說明配置完成
完成 https 域名的配置后，需要到微信開放平臺
微信開放平臺：https://mp.weixin.qq.com/
獲取到 小程序的 APPID
然后移動到下方，找到服務器域名，添加剛剛的蘑菇網(wǎng)關域名
發(fā)布到微信開發(fā)者工具
需要下載微信開發(fā)者工具，進行微信小程序的打包
微信開發(fā)者工具：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下載完微信開發(fā)者工具后，手動完成安裝即可。
然后，點擊 HBuildX 中的 uniapp 項目，找到 pages/user/login.vue 頁面，然后注釋掉 QQ 登錄【微信小程序不支持QQ登錄，同時微信登錄需要付費，目前暫未集成】
最后在打開 pages/home/home.vue 文件 【 home.vue 是啟動頁，每次需要先打開這個頁面進行運行】
點擊上方的發(fā)行按鈕，選擇 小程序-微信
然后需要填寫對應的小程序名稱，以及剛剛在微信開放平臺查看到的 AppID
填寫完畢后，點擊發(fā)布，HBuildX 會自動將 uniapp 代碼轉換成微信小程序代碼
同時會自動打開剛剛下載好的微信，找到剛剛生成的 微信小程序 的代碼進行導入
導入后，發(fā)現(xiàn)項目出現(xiàn)了問題
通過排查發(fā)現(xiàn)，需要點擊右上角的詳情，選擇 2.14.0 的調試庫
刷新頁面即可看到項目成功運行起來了。點擊上傳代碼，填寫版本號信息
上傳成功后，到微信開放平臺的版本管理
填寫對應的審核信息，然后點擊提交審核
提交后，等待審核結果即可，一般的話，可能1到2天就會有審核的通知，當然如果初次提交的話，審核較為嚴格。
沒過多久，就通過審核了，這里不得不說一波微信小程序的審核效率，比QQ小程序快多了~
在審核通過后，點擊提交發(fā)布，然后選擇全量發(fā)布。
在發(fā)布完成后，就可以在微信小程序搜索界面進行搜索了
點擊第一個 陌溪教你學編程 小程序，即可打開進行體驗了
同時如果小伙伴，想要打造一個屬于自己的個人博客小程序，歡迎掃碼體驗~
好啦，本期就到這里，我是陌溪，我們下期再見~