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