@TOC
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!
0前提
温馨提示:我做的思路可能是复杂化了或者说代码写的不规范,如果你觉得可以更加简便的话欢迎分享到评论区或者自己改写一下我的代码,我的后端是写的很简单的没有什么路由分发是直接写的,你可以自由优化 小程序的其他部分你可以看看我往期的文章
1.一些准备
1.1表
帖子表 post
字段名称 | 类型(长度) | 允许空 | 主键 | 外键 | 自增 | 唯一 | 说明 |
---|---|---|---|---|---|---|---|
id | int | 否 | 是 | 否 | 是 | 是 | 帖子id |
title | varchar(20) | 否 | 否 | 否 | 否 | 否 | 标题 |
content | varchar(20) | 否 | 否 | 否 | 否 | 否 | 内容 |
images | varchar(200) | 否 | 否 | 否 | 否 | 否 | 详情表 |
classification | varchar(20) | 否 | 否 | 否 | 否 | 否 | 帖子分类 |
likes | int | 是 | 否 | 否 | 否 | 否 | 点赞数 |
comments | int | 是 | 否 | 否 | 否 | 否 | 评论数 |
shares | int | 是 | 否 | 否 | 否 | 否 | 分享数 |
userId | int | 否 | 否 | 是 | 否 | 否 | 用户id |
communityId | int | 否 | 否 | 是 | 否 | 否 | 小区id |
creatTime | timestamp | 否 | 否 | 是 | 否 | 否 | 创建时间 |
updateTime | timestamp | 否 | 否 | 是 | 否 | 否 | 数据改变时的时间 |
1.2总体思路
描述:用户可以点击帖子的分享按钮进行分享帖子或者去页面的左上角点击三个点之后点击分享到聊天界面 实现:首先要加上分享的方法才能进行分享,加上分享的方法之后就可以进行页面的分享了,然后如果想要分享特定的标题和图片比如本文中的分享帖子就是需要给帖子加上一个分享的按钮其类型是share(注意必须是button按钮,不然这个分享调用不起来)
2.前端
前端:当用户想要分享页面时就用默认的标题和图片进行分享,当用户想要分享特定内容帖子的时候,将分享的标题设置为该帖子的标题、将分享的图片设置为帖子的第一张图片。在我这里我是使用到了一个判断变量去判断本次用户的分享是分享帖子还是分享页面,就不会导致第二次分享页面的内容是第一次分享帖子的内容(当然有其他解决方法,这是我的你可以选择更好)。当用户分享帖子时调用接口告诉后端给该帖子的分享数加1
代码实现: 需要在页面的onload上增加
// 这是页面分享功能 wx.showShareMenu({ withShareTicket:true, //设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击 menus:["shareAppMessage", "shareTimeline"] })
加上一个分享帖子的方法
ini
// 分享帖子
async share(post){
const postId=post.id
this.sharedTitle=post.title;
this.sharedImageUrl=post.images[0] // 使用帖子的第一张图片作为缩略图
this.isShared = true;
const res = await this.$myRequest({
method: 'post',
url: `/sharePost?postId=${postId}`,
});
if (res.data.success) {
await this.getCommunityPosts();}
},
加上分享聊天的方法(需要注意的是这个和methods同级)
kotlin
//分享到聊天
onShareAppMessage(res) {
if (this.isShared == true) {
// 分享成功,将分享状态重置为未分享
this.isShared = false;
return {
title: this.sharedTitle, //分享的名称
imageUrl: this.sharedImageUrl,
}}else{
return {
title: '分享给你快点开看看呀', //分享的名称
}
}
},
3.后端
后端:当接受到前端传来的信息之后到数据库里给这个帖子的分享数加一(本文的本次功能实现主要还是前端实现,如果你不需要分享数这种数据完全就可以只写前端就好了)
css
// 分享帖子接口
app.post('/sharePost', (req, res) => {
const postId = req.query.postId;
console.log(postId)
connection.query(
'UPDATE post SET shares = shares + 1 WHERE id = ?',
[postId],
(error) => {
if (error) {
console.error(error);
return res.status(500).json({
error: 'false',
});
}
return res.json({
success: true,
});
}
);
});