# 微信小程序云开发个人博客 **Repository Path**: imsihao/my-blog ## Basic Information - **Project Name**: 微信小程序云开发个人博客 - **Description**: vant-weapp组件库+微信小程序云开发 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 4 - **Created**: 2021-01-27 - **Last Updated**: 2022-04-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### 微信小程序云开发个人博客 学习前端有一段时间了，一直都非常想做一个博客网站，苦于后台的工作量很大。现在微信小程序很火，微信小程序云开发使得全站开发更简单。果断开始撸一个博客Demo。 小程序有三个主页面：首页，日志，我的 ### 1. 首页 ![首页图片](https://images.gitee.com/uploads/images/2020/0908/201049_2a7ee992_5505820.png "微信图片_20200908175053.png") - 首页直接展示的是每位进入博客社区发布的技术文章，可以浏览技术文章，可以根据搜索自己感兴趣的文章，也可以发布文章，但是需要先登录，点击+后会弹出授权的通知 - **1.1文章基础信息编辑页面** ![文章基础信息编辑页面](https://images.gitee.com/uploads/images/2020/0908/212100_8f24dea4_5505820.png "微信图片_20200908175108.png") - 文章编辑页面我分成两部分，第一步是输入文章题目，封面的图片，文章的描述。我将所有的上传的信息设置为不为空。这样都需要上传，一项为空都不能上传，这个Tab标签页的效果，是使用了Vant Weapp组件库，自从使用了这个库，开发真的太香了！ - **1.2文章内容编辑页** ![文章内容编辑页](https://images.gitee.com/uploads/images/2020/0908/212533_537bc29d_5505820.png "微信图片_20200908175114.png") - 这里我使用的是微信原生的editor组件，其实网上也有比较好的富文本编辑插件Towxml [https://github.com/sbfkcel/towxml ](http://) 哈哈！太懒了，这里还需要继续改进，毕竟微信小程序原生editor组件功能还是太少了，同时感觉用手机写博客优点局限，这一个功能稍微有点鸡肋，以后慢慢优化。 ### 2、日志页面 - 主要是记录我更新功能日志 ![日志更新页面](https://images.gitee.com/uploads/images/2020/0908/214006_5b4a611f_5505820.png "微信图片_20200908175119.png") ### 3、我的页面 ![我的页面](https://images.gitee.com/uploads/images/2020/0908/214425_5d222cac_5505820.png "微信图片_20200908175123.png") - 我的页面很直观，没有过多的说明，在布局的时候我想了很久，毕竟不太会配色，就纠结怎么做会更好看，哈哈哈！回归正式由于我赞过的文章、收藏集、阅读过的文章都是请求数据库，因此就没有继续做了，后期会补上。 ### 4、个人主页面 在个人主页面，我分成了两个，一种是我自己的主页，当然我点进去的时候是可以进行删除我发布过的文章操作，如果我点击进入我感兴趣的博主的主页面，我只能进行查看但是不能进行删除操作，这里只是进行了一个简单的用户判断，如果不是当前用户当然删除就不显示了。具体实现可以在代码中找。对了头像哪里写了一个简单的动画，使得头像哪里看起来是浮动的。 ![我的主页](https://images.gitee.com/uploads/images/2020/0908/215147_5715c58c_5505820.png "微信图片_20200908175127.png") ![其他博主的主页](https://images.gitee.com/uploads/images/2020/0908/215220_88aac1b8_5505820.png "微信图片_20200908175134.png") ### 5、意见与反馈 - 意见反馈，我原始思路是做一个多对一的实时聊天，由于对scoket还每研究好，参照一些实例之后发现只能进行群聊，我要笑哭了，这个地方还要优化啊！ ![输入图片说明](https://images.gitee.com/uploads/images/2020/0908/220130_5f3bc63c_5505820.png "微信图片_20200908175142.png") ### 6、文章详情页面 - 文章的详情页面我做了很多操作，第一个点赞功能和主页面的点赞数是联动的，同时点赞后再进入文章会有保留状态，包括收藏功能也是，评论功能也是弄了很久，最后引入了vant-weapp的Popup弹出层，和空状态Empty、太香了！还有一个点就是关注的图标变化，这个也是调试了很久，最后实现了关注功能，当然和我的主页差不多，只有浏览其他技术博主的文章的时候才能显示关注与否，当进入自己的文章的详情页的时候，没有关注按钮了！ -当文章没有人评论的时候的状态如下，登录后才能发表评论 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0113/154203_bc71847a_5505820.png "屏幕截图.png") -当有人发表评论后，点击评论就可以看见别人发表的评论啦 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0113/154415_345dbbae_5505820.png "屏幕截图.png") - 团团的文章详情页 ![团团的文章详情页](https://images.gitee.com/uploads/images/2020/0908/222310_0cc167fa_5505820.png "微信图片_20200908220533.png") - 鱼丸粗面的文章详情页 ![鱼丸粗面的文章详情页](https://images.gitee.com/uploads/images/2020/0908/222322_a70fb6b0_5505820.png "微信图片_20200908220254.png") ### 7、云端数据库设计 - 总共设计了十个表，分别用来存储文章图片、文章内容信息、聊天信息、评论信息、点赞信息、关注信息、收藏信息、计数信息、用户信息。有一些表之间会有一些关联信息。 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0113/152630_b202e525_5505820.png "屏幕截图.png") 由于表中信息涉及到本人的openid因此云端数据不便分享出来。