部落格小程式開源了~

逆月翎發表於2019-11-06

好像快半個月沒有寫文章了,因為這半個月一直在開發部落格小程式。到今天初級版差不多可以問世了,目前已上線功能:部落格系統,好友系統和會話系統。接下來談談這三個系統的基本使用吧。

部落格系統

使用者在首頁可以分頁瀏覽所有文章,也可以按照分類去瀏覽對應分類的文章。分類目前就是固定的幾種分類。資料量目前全來源於一個支援爬取資料的技術社群,所以資料來源完全合法。

file

可以在頂部的搜尋框進行關鍵字搜尋,找對應關鍵字的文章資料。不過這裡有一個小缺點,由於我忙著先將基本構架做出來所以我對搜尋結果還未來得及做分頁,所以比較熱門的關鍵字去搜尋可以響應時間會比較慢。

file

點選文章進入文章詳情介面,文章詳情介面採用towxml外掛去載入markdown格式的html文字渲染,所以渲染效果比較美觀。目前只支援文字和圖片也就是圖文格式,後期會開放音訊等檔案。

file

在文章右下角可以對文章進行點贊和評論。設計評論功能的時候一直在和朋友探討,究竟評論功能放在文章底部合適還是放在一個新介面合適呢?由於考慮到有很多時候技術文章都會是長文,可能使用者還沒看完就不想看了,一些優質評論根本沒看到,所以採用將評論功能設計為一個新的介面,點選右下角評論圖示即可進入評論介面。然後點選底部寫評論按鈕即可彈出評論框。

file

在文章詳情介面點選使用者頭像可以進入作者主頁,如果非好友關係可以新增作者為好友。作者主頁可以按分類檢視作者的全部原創文章。 實際上我也是寫這篇文章的時候才發現主圖為長圖佈局會出現拉伸,這個小問題預計下個版本修復。

file

在導航欄寫作介面可以進入個人主頁和進行文章寫作。個人主頁可以按照分類檢視自己的所有發表文章。點選文章進入文章詳情介面,長按文章進入可以選擇修改或刪除文章。

file

在寫作介面可以進行文章的寫作,文章寫作介面採用一段文字一張配圖的方式,文字輸入域不允許為空,第一張圖片必須上傳作為文章主圖,第二段文字開始可以不上傳圖片。 這裡講講為什麼採用這種多段文字的方式呢?其實我們都知道pc端我們文章寫作一般都是markdown方式,雙屏寫作,可以邊寫作邊預覽,但是移動端很明顯沒法做到,因為手機螢幕太小了不可能再分成雙屏寫作,那我們需要實現圖文格式要怎麼辦呢?所以我想到了一個折中的方法,我將寫作介面設計為多段圖文輸入,剛進入預設只有一個圖文,第一段圖文圖片必須上傳,圖片會作為文章主圖,當我們第一段圖文寫作完成,可以選擇右下角的+,新增下一段圖文,不過從第二段開始,可以不上傳圖片只輸入純文字。效果其實就如同下圖一樣的效果,然後點選發表的時候就會通過特定的演算法去手動將文字和圖片轉化成markdown格式的html文字去儲存,也是為了能夠使用towxml外掛去載入文章內容,使介面更為美觀。

file

文章寫作完成可以點選右上角預覽按鈕進行文章效果預覽,預覽效果和釋出後完全一致。 實際上在預覽的時候就是將文章內容通過同一個演算法轉化成markdown格式的html文字,然後使用towxml去載入html文字渲染出頁面效果。

file

在這裡遇到了一個小難題,就是文章修改的時候,由於我們將使用者輸入的文字和上傳的圖片手動去封裝成html文字,所以修改文章時需要將文章內容去反向進行解析,分別解析出每一段文字和每一張圖片,然後分別放入圖片陣列和文字陣列中,這個反向解析一共40行程式碼,但是花費了一早上時間才成功反向解析,可以給你們看看程式碼:

file

好友系統 && 會話系統

使用者新增好友主要有兩個途徑:第一個途徑就是剛才說過的在文章詳情介面點選作者頭像進入作者主頁新增作者好友,或者在好友介面頂部搜尋域輸入使用者手機號搜尋好友併傳送好友申請,好友申請可以在導航欄我的介面中的訊息介面中檢視並同意好友申請。

file

已成功新增好友會在好友列表中顯示。當好友有新資訊會在列表中顯示未讀資訊條數。

file

點選好友可以進入實時會話,會話是實時會話,有新訊息送達會自動渲染。

file

點選使用者傳送的圖片可以檢視大圖。

file

在好友列表長按某個好友可以設定備註,設定特別關心,刪除好友等操作。

file

使用者發表的文章如果有其他使用者點贊或者評論,以及好友申請都可以在導航欄我的中的訊息中檢視,有新訊息會顯示紅點顯示未讀訊息個數。

file

訊息中分為三個板塊:好友申請、評論、點贊。好友申請通過或者拒絕則申請訊息就會變成已讀,評論和點贊目前無法對單條訊息設定已讀操作,只能點選底部全部已讀對全部訊息設定已讀。點選全部已讀則紅點就會消失。

file

file

閱讀文章無需授權登入就可以自由閱讀,如果要使用好友系統和實時會話系統以及文章寫作功能就需要授權登入繫結手機號才可進行。目前整個專案前後端已開源於碼雲,歡迎來一個star。原始碼地址:

  • > https://gitee.com/mqzuimengadmin/wxblog.git

歡迎體驗小程式,如果有修改建議歡迎加我微信聊聊。

file

歡迎關注公眾號:程式猿周先森。檢視更多精彩文章。

file

歡迎關注公眾號:程式猿周先森。文章原創於微信公眾號,本平臺不定時更新。

相關文章