?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！
?? 收藏，你的青睞是我努力的方向！
?? 評論，你的意見是我進(jìn)步的財(cái)富！
0前提
溫馨提示：我做的思路可能是復(fù)雜化了或者說代碼寫的不規(guī)范，如果你覺得可以更加簡便的話歡迎分享到評論區(qū)或者自己改寫一下我的代碼，我的后端是寫的很簡單的沒有什么路由分發(fā)是直接寫的，你可以自由優(yōu)化
小程序的其他部分你可以看看我往期的文章
1.一些準(zhǔn)備
1.1表
帖子表 post
| 字段名稱 | 類型（長度） | 允許空 | 主鍵 | 外鍵 | 自增 | 唯一 | 說明 |
|---|---|---|---|---|---|---|---|
| id | int | 否 | 是 | 否 | 是 | 是 | 帖子id |
| title | varchar(20) | 否 | 否 | 否 | 否 | 否 | 標(biāo)題 |
| content | varchar(20) | 否 | 否 | 否 | 否 | 否 | 內(nèi)容 |
| images | varchar(200) | 否 | 否 | 否 | 否 | 否 | 詳情表 |
| classification | varchar(20) | 否 | 否 | 否 | 否 | 否 | 帖子分類 |
| likes | int | 是 | 否 | 否 | 否 | 否 | 點(diǎn)贊數(shù) |
| comments | int | 是 | 否 | 否 | 否 | 否 | 評論數(shù) |
| shares | int | 是 | 否 | 否 | 否 | 否 | 分享數(shù) |
| userId | int | 否 | 否 | 是 | 否 | 否 | 用戶id |
| communityId | int | 否 | 否 | 是 | 否 | 否 | 小區(qū)id |
| creatTime | timestamp | 否 | 否 | 是 | 否 | 否 | 創(chuàng)建時(shí)間 |
| updateTime | timestamp | 否 | 否 | 是 | 否 | 否 | 數(shù)據(jù)改變時(shí)的時(shí)間 |
1.2總體思路
描述：用戶可以點(diǎn)擊帖子的分享按鈕進(jìn)行分享帖子或者去頁面的左上角點(diǎn)擊三個(gè)點(diǎn)之后點(diǎn)擊分享到聊天界面
實(shí)現(xiàn)：首先要加上分享的方法才能進(jìn)行分享，加上分享的方法之后就可以進(jìn)行頁面的分享了，然后如果想要分享特定的標(biāo)題和圖片比如本文中的分享帖子就是需要給帖子加上一個(gè)分享的按鈕其類型是share（注意必須是button按鈕，不然這個(gè)分享調(diào)用不起來）
2.前端
前端：當(dāng)用戶想要分享頁面時(shí)就用默認(rèn)的標(biāo)題和圖片進(jìn)行分享，當(dāng)用戶想要分享特定內(nèi)容帖子的時(shí)候，將分享的標(biāo)題設(shè)置為該帖子的標(biāo)題、將分享的圖片設(shè)置為帖子的第一張圖片。在我這里我是使用到了一個(gè)判斷變量去判斷本次用戶的分享是分享帖子還是分享頁面，就不會(huì)導(dǎo)致第二次分享頁面的內(nèi)容是第一次分享帖子的內(nèi)容（當(dāng)然有其他解決方法，這是我的你可以選擇更好）。當(dāng)用戶分享帖子時(shí)調(diào)用接口告訴后端給該帖子的分享數(shù)加1
代碼實(shí)現(xiàn)：
需要在頁面的onload上增加
// 這是頁面分享功能
wx.showShareMenu({
withShareTicket:true,
//設(shè)置下方的Menus菜單，才能夠讓發(fā)送給朋友與分享到朋友圈兩個(gè)按鈕可以點(diǎn)擊
menus:[“shareAppMessage”,
“shareTimeline”]
})
加上一個(gè)分享帖子的方法
// 分享帖子
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();}
},
加上分享聊天的方法（需要注意的是這個(gè)和methods同級）文章來源：http://www.zghlxwxcb.cn/news/detail-838371.html
//分享到聊天
onShareAppMessage(res) {
if (this.isShared == true) {
// 分享成功，將分享狀態(tài)重置為未分享
this.isShared = false;
return {
title: this.sharedTitle, //分享的名稱
imageUrl: this.sharedImageUrl,
}}else{
return {
title: '分享給你快點(diǎn)開看看呀', //分享的名稱
}
}
},
3.后端
后端：當(dāng)接受到前端傳來的信息之后到數(shù)據(jù)庫里給這個(gè)帖子的分享數(shù)加一（本文的本次功能實(shí)現(xiàn)主要還是前端實(shí)現(xiàn)，如果你不需要分享數(shù)這種數(shù)據(jù)完全就可以只寫前端就好了）文章來源地址http://www.zghlxwxcb.cn/news/detail-838371.html
// 分享帖子接口
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,
});
}
);
});
到了這里，關(guān)于uniapp+node.js前后端做帖子模塊：分享帖子和分享頁面（社區(qū)管理平臺(tái)的小程序）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
