這幾天陸續(xù)把博客小程序后臺管理的幾個功能實現(xiàn)了，目前實現(xiàn)的比較「粗糙」，但比較實用的管理的功能基本上實現(xiàn)了。

成果展示

由于「后臺管理」的部分只有管理員才能看到，在我的小程序上不能體現(xiàn)，但整體開發(fā)難度不是很大，主要還是通過編碼實現(xiàn)一些功能，思路清晰，按照流程一步一步開發(fā)即可。

部分截圖如下，具體交互的代碼可以直接看源碼：

后臺管理入口

后臺管理界面

文章管理列表

新增編輯文章界面

新增專題界面

評論管理列表

歷史版本查看

標簽管理列表

版本發(fā)布功能

基本上都是博客相關(guān)的后臺功能，至于為什么說是比較粗糙呢，主要是因為部分的頁面的功能和交互并不是很完美，后期需要改善和優(yōu)化的。

比如標簽管理頁面，目前只能簡單的新增和刪除標簽，而沒有實現(xiàn)標簽去批量關(guān)聯(lián)文章，只能從編輯文章的入口去選擇標簽。

比如編輯文章頁面，目前原生富文本框所展示的樣式并不是很完善，導致該功能名存實亡「利用富文本保存后文章樣式就亂了」

還有很多細節(jié)部分自認為不是很完美的，后期也需要一一優(yōu)化。

開發(fā)中的一些細節(jié)點

textarea組件的坑

小程序原生組件textarea,該組件的層級是最高的，導致的問題是會穿透彈窗或遮罩層，所以在彈窗中使用
textarea時會出現(xiàn)穿透的情況「版本發(fā)布功能頁用到」。

如何解決呢，通過展示彈窗的key來控制textarea的加載，如果彈窗顯示那就加載textarea，如果彈窗隱藏那就不加載textarea

<view wx:if="{{isReleaseShow}}" class="cu-form-group text-left">
    <textarea placeholder="請輸入迭代內(nèi)容" maxlength="-1" name='releaseContent' value='{{release.releaseContent}}' placeholder-class='placeholder'></textarea>
</view>

catchtap與bindtap

bindtap和catchtap都是當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數(shù)。

但是bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

所以，根據(jù)實際業(yè)務場景合理使用對應的事件。

一些事件

評論刪除的功能用到左滑事件，可以參考文檔熟悉下touchstart與touchend事件的用法。

標簽刪除用到了長按事件longpress,有興趣的也可以熟悉下文檔看看相關(guān)事件的用法

image

新增文章

這次在后臺管理里加了一個新增文章的功能「雖然我覺得很雞肋，在小程序中寫文章真的太麻煩了」，這里只是提供下思路和熟悉下小程序的富文本框組件editor,本身功能真的沒有實際價值。

后期文章還是考慮同步的方式或者利用云開發(fā)的HTTP API進行對文章的復雜操作。

其他代碼

其他細節(jié)的代碼和頁面實現(xiàn)就不多說了，重復去貼代碼意義不大，有興趣的可以直接看源碼，有問題也可以隨時與我交流。

總結(jié)

目前博客小程序已經(jīng)發(fā)布了7個版本了，整體博客相關(guān)的功能已經(jīng)完成的七七八八了，但是個人使用起來吐槽的點有很多，目前已經(jīng)記了十幾個了，后續(xù)也會慢慢迭代和分享出來。

Ps.項目開源地址：https://github.com/CavinCao/mini-blog