博客小程序開源了

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

博客系統

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

博客小程序開源了

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

博客小程序開源了

點擊文章進入文章詳情界面,文章詳情界面採用towxml插件去加載markdown格式的html文本渲染,所以渲染效果比較美觀。目前只支持文本和圖片也就是圖文格式,後期會開放音頻等文件。

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

好友系統 && 會話系統

用戶添加好友主要有兩個途徑:第一個途徑就是剛才說過的在文章詳情界面點擊作者頭像進入作者主頁添加作者好友,或者在好友界面頂部搜索域輸入用戶手機號搜索好友併發送好友申請,好友申請可以在導航欄我的界面中的消息界面中查看並同意好友申請。

博客小程序開源了

已成功添加好友會在好友列表中顯示。當好友有新信息會在列表中顯示未讀信息條數。

博客小程序開源了

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

博客小程序開源了

點擊用戶發送的圖片可以查看大圖。

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

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

博客小程序開源了

博客小程序開源了

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

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

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

博客小程序開源了

博客小程序開源了


分享到:


相關文章: