# 微信小程序云开发个人博客

**Repository Path**: iotfeng/my-blog

## Basic Information

- **Project Name**: 微信小程序云开发个人博客
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 4
- **Created**: 2020-10-08
- **Last Updated**: 2024-12-02

## 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/2020/0908/222310_0cc167fa_5505820.png "微信图片_20200908220533.png")

- 鱼丸粗面的文章详情页

![鱼丸粗面的文章详情页](https://images.gitee.com/uploads/images/2020/0908/222322_a70fb6b0_5505820.png "微信图片_20200908220254.png")