uniapp+unicloud開發一個網頁端,小程式端,APP端,桌面端的部落格CMS系統——萬能的三三

万能的三三發表於2024-01-25

前言

做為一個開發者,怎麼能沒有一個自己的部落格呢?

都說現在是小程式,APP時代了,顯然只有網頁端已經跟不上時代了,於是乎就想找一個免費的能同時支援網頁端,小程式,APP的部落格系統...

於是花了一點點時間,沒找到合適的...

好吧,那既然自己是開發者,那為什麼不能自己寫一個部落格呢?

於是又花億點點時間...

介紹

既然要跨端,找了一圈,想要很好的支援小程式,和APP,基本上選定了uniapp,發現官方已經寫好了後端和前端的模版,直接拿來用,基本解決了專案搭建問題,於是乎,又過了億點點時間,完成了這套基於uniapp+unicloud開發,一套程式碼多端部署的部落格CMS系統。

由於是基於uniapp開發的部落格,就取名ublog,一個可同時部署到網頁端,小程式端,APP端,桌面端的部落格cms系統。

下載即用,免費的,無需寫一行程式碼,無需懂程式設計也能部署釋出使用。

無需伺服器,程式碼是免費的,官方也有免費的雲空間,免費使用不香嗎?

演示

提示: uBlog前端和後端(uBlog-admin)都可以免費使用。推薦直接獲取原始碼後部署到自己的雲空間體驗。

演示:uBlog網頁端www.wndss.com 點選跳轉

演示:uBlog小程式端,微信搜【萬能的三三】

演示:uBlog安卓端,點選下載 密碼:wndss

演示:uBlog桌面Windows端,點選下載 密碼:wndss

演示:uBlog後臺網頁端(uBlog-admin) 點選跳轉

後臺登入賬戶

使用者名稱:后羿

密碼:dfqwer

快速部署

重要提示,前端和後端一定要選擇同一個雲空間

新手可以看詳細部署教程,點選跳轉

推薦使用最新版本的HBuilder編輯器

部署方式和部署uni-admin是一樣的,用過uni-admin的可以直接上手

推薦使用阿里雲空間,將程式碼匯入到編輯器中-選擇vue3-初始化雲空間-完成

前端的部署方式和後端的部署方式是一樣的,重複一次步驟即可。

快速釋出

詳細步驟可看官方教程,點選跳轉

釋出到網頁端:編輯器頂部點選 —— 發行 —— 網站PC ,成功後上傳到unicloud前端網頁託管或自己的vps伺服器,釋出到網頁端後,可使用桌面端開發平臺釋出到桌面端,比如electron

釋出到小程式:編輯器頂部點選 —— 發行 —— 小程式微信 ,成功後上傳到微信小程式後臺

釋出到安卓端:編輯器頂部點選 —— 發行 —— 原生APP雲打包,成功後安裝即可

ublog介紹

ublog 支援網頁端,小程式,APP的部落格CMS系統 【後臺管理端】

uBlog部分功能介紹(更多功能持續更新中)

1.自適應顯示

從PC大屏到H5小屏,再從小程式到APP桌面端,完全相容顯示。



2.動態切換主題

uBlog使用基於Material Design的基礎顏色,你也可以選擇任何一個你想要的顏色,加入系統中。

  • 即可實現全應用動態切換顏色。
  • 同時支援動態切換夜間暗色模式與日間亮色模式,一鍵灰色等任意顏色相關功能。

3.文章系統

後臺基於強大且可高度自定義的tinymce編輯器,基本上wordpress能做到的功能,它也都可以。

可使用文章模板,使用隱藏內容,實現付費閱讀,評論可見等常見功能。

後臺提供預覽介面,可檢視pc大屏顯示效果與小程式和APP端的顯示效果,真正的做到所見即所得。

4.頁面系統

uBlog的每個頁面的顯示內容都是由後臺配置生成,除個人中心外,你可以理解為每個頁面初始狀態都是空白頁。在後臺新增相應的元件後從而生成對應的頁面。

比如首頁,就是一個空白頁。

顯示什麼內容,完全自定義,或者使用別人配置好的樣式,一鍵匯入更快捷。

  • 新增一個圖片模組,就生成了首頁輪播圖。

  • 新增一個公告模組,就生成了首頁的公告。

  • 新增一個文章列表模組,就生成文章列表。

5.模組系統

每個頁面都是空白頁,顯示的內容,都是由後臺動態配置生成。

那擁有哪些模組,就決定了頁面有哪些功能。

就像wordpress的小工具一樣,你可以把這些模組放到任意頁面的,任意位置,無論是在網頁端大屏,或是小程式和APP的小屏,都能自適應顯示。

同時每個模組支援指定許可權及指定平臺。

可現實,不同使用者,不同平臺,不同的顯示效果。

新增一個模組,就是新增一個元件。

也就是說文章也是ublog的外掛,如果加入圖片,影片,導航等外掛,可以立刻變成任何應用。

uBlog是通用的CMS系統,整個應用顯示的內容完全自定義。

6.使用者系統

除了基本的使用者角色許可權外,新增了積分與金幣功能及兌換碼功能,積分對應等級,金幣對應會員。

配合文章的許可權可見與模組系統的許可權可見,實現不同使用者,顯示不同的內容。

7.更多功能完善中

吐槽

最後分享一下使用uniapp開發的一些心得。

官方的hbuilder編輯器比不上vscode,特別是搜尋功能,不是沒反應,就是搜尋卡死,只能重啟解決,用12代i5和32g記憶體,就開一個編輯器,也會經常卡,很無語。一定要經常ctrl+s

升級hbuilder版本後,正常執行的程式碼會出現一些莫名其妙的錯誤,如果報錯有顯示在哪裡還好解決,有時候只顯示編譯後幾萬行位置的錯誤,無法定位,只能回退版本找問題,這就很坑。

uniapp的雲空間沒有私有化部署的教程,不能部署到自己的vps伺服器,基於serverless有很多優點,但也有一點點不足,還是有不少的人喜歡將部落格部署到自己的伺服器上,實現更多自定義功能。

後記

目前ublog的系統已經基本完成了,模組化開發,可擴充性強,想要加什麼功能,後續直接新增對應的外掛即可。

當然目前還有很多不完善的地方,但基本的部落格系統是已經成了,因為要支援的平臺較多,很多相容性問題可能無法馬上發現。

歡迎下載體驗,有任何問題或建議歡迎一起交流,學習。

uniapp+unicloud開發一個網頁端,小程式端,APP端,桌面端的部落格CMS系統——萬能的三三

相關文章