这几天陆续把博客小程序后台管理的几个功能实现了,目前实现的比较「粗糙」,但比较实用的管理的功能基本上实现了。
成果展示
由于「后台管理」的部分只有管理员才能看到,在我的小程序上不能体现,但整体开发难度不是很大,主要还是通过编码实现一些功能,思路清晰,按照流程一步一步开发即可。
部分截图如下,具体交互的代码可以直接看源码:
后台管理入口
后台管理界面
文章管理列表
新增编辑文章界面
新增专题界面
评论管理列表
历史版本查看
标签管理列表
版本发布功能
基本上都是博客相关的后台功能,至于为什么说是比较粗糙
呢,主要是因为部分的页面的功能和交互并不是很完美,后期需要改善和优化的。
比如标签管理页面,目前只能简单的新增和删除标签,而没有实现标签去批量关联文章,只能从编辑文章的入口去选择标签。
比如编辑文章页面,目前原生富文本框所展示的样式并不是很完善,导致该功能名存实亡「利用富文本保存后文章样式就乱了」
还有很多细节部分自认为不是很完美的,后期也需要一一优化。
开发中的一些细节点
小程序原生组件textarea
,该组件的层级是最高的,导致的问题是会穿透弹窗或遮罩层,所以在弹窗中使用
textarea
时会出现穿透的情况「版本发布功能页用到」。
如何解决呢,通过展示弹窗的key来控制textarea
的加载,如果弹窗显示那就加载textarea
,如果弹窗隐藏那就不加载textarea
<view wx:if="{{isReleaseShow}}" class="cu-form-group text-left">
<textarea placeholder="请输入迭代内容" maxlength="-1" name='releaseContent' value='{{release.releaseContent}}' placeholder-class='placeholder'></textarea>
</view>
bindtap
和catchtap
都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
所以,根据实际业务场景合理使用对应的事件。
评论删除的功能用到左滑事件,可以参考文档熟悉下touchstart
与touchend
事件的用法。
标签删除用到了长按事件longpress
,有兴趣的也可以熟悉下文档看看相关事件的用法
评论管理截图
这次在后台管理里加了一个新增文章的功能「虽然我觉得很鸡肋,在小程序中写文章真的太麻烦了」,这里只是提供下思路和熟悉下小程序的富文本框组件editor
,本身功能真的没有实际价值。
后期文章还是考虑同步的方式或者利用云开发的HTTP API
进行对文章的复杂操作。
其他细节的代码和页面实现就不多说了,重复去贴代码意义不大,有兴趣的可以直接看源码,有问题也可以随时与我交流。
总结
目前博客小程序已经发布了7个版本了,整体博客相关的功能已经完成的七七八八了,但是个人使用起来吐槽的点有很多,目前已经记了十几个了,后续也会慢慢迭代和分享出来。