微信小程式專案實戰【四】------實現評論+轉發+收藏
阿新 • • 發佈:2018-12-20
上一節我們實現了視訊列表展示,接下啦我們需要在上一節的基礎之上繼續詳細解釋下當我們點選相應的視訊列表圖片我們可以跳轉到相應的視訊播放介面以及顯示當前評論訊息。效果展示如下
點選評論按鈕跳轉到評論介面
【解析】
通過上面的效果圖可知我們要實現這個效果首先要明白我們的資料要儲存到那裡,我們評論的內容要顯示到到當前頁面不能我們評論的內容會在所有的頁面都能看到,所以我們通過這個分析可以知道我們需要做哪些準備工作。
>首先我們需要將評論中輸入的內容當點擊發送的時候儲存到雲資料庫
>其次我們需要將我們中的內容顯示到視訊下面,這裡需要使用資料庫的基本增刪改查語句
>最後就是當我們點選檢視更多就是將所有使用者在這個視屏下評論的內容全部顯示出來,因為使用雲開發有個弊端就是一次性只能返回20條記錄,這裡我們需要使用雲函式來幫助我們解決當下疑難。
【程式碼展示】
//comment.xxml <view class="fixed-page"> <view class="fixed-cont-body"> <!-- 播放器 --> <view class="swiper_container"> <view wx:for="{{video}}" wx:for-item="item" class="player"> <video src="{{item.tempFileURL}}" controls></video> </view> </view> <scroll-view wx:for="{{video}}" wx:for-item="item" scroll-y="true" class="main"> <view> <!-- 詩詞資訊 --> <view class="author-box row"> <view class="title">題目:</view> <view class="author">{{item.title}}</view> </view> <!-- 詳情描述 --> <view class="discription-box row"> <view class="title">作者:</view> <view class="discription">{{item.author}}</view> </view> </view> <!-- 圖文資訊 --> <view wx:if="{{comments.length>0}}" class="photo_info_box"> <!-- 圖文評論列表 --> <view class="photo_comment_box"> <text class="photo_comment_title">最新評論</text> <view wx:for="{{comments}}" wx:for-item="comment" wx:key="index" class="commment_list"> <!-- index < 3 在視訊下面只顯示三條記錄 --> <view wx:if="{{index < 3}}"> <view class="comment_info"> <view class="c_info_view"> <image src="{{comment.userImage}}"></image> <text>{{comment.userName}}</text> </view> <text class="c_date_txt">{{comment.commitTime}}</text> </view> <view class="comment_content">{{comment.content}}</view> </view> </view> <!-- 檢視更多評論 --> <view bindtap="toggleDialogHandle"> <view class="load_more_box">檢視更多評論</view> </view> </view> </view> <view wx:else class="no_comment"> <text class="load_more_box">暫時沒有評論!</text> </view> </scroll-view> </view> <!-- 評論 --> <view class="comment_fixed_footer"> <view class="footer_oper_box"> <button open-type="share" class="btn"> <image src="/images/share_01.png"></image> <text>分享</text> </button> <view class="footer_c"> <view wx:if="{{collectByMp3IdAndUId.length>0}}"> <image catchtap='_onCollectTap' src="{{isCollected?'/images/no_collect.png':'/images/have_collect.png'}}"></image> </view> <view wx:elif="{{collectByMp3IdAndUId.length==0}}"> <image catchtap="onCollectTap" src="{{isCollected?'/images/have_collect.png':'/images/no_collect.png'}}"></image> </view> <text>收藏</text> </view> </view> <navigator url="/pages/comment-more/comment-more" open-type="redirect" hover-class="none"> <view class="post_comment_button"> <image src="../../images/icon_comment.png"></image> <text>評論</text> </view> </navigator> </view> <!-- 彈出層 --> <view class="cover_box" wx:if="{{showDialog}}" bindtap="toggleDialogHandle"></view> <view class="overlay_box" wx:if="{{showDialog}}"> <view class="overlay_title"> <text>評論</text> <image class="close_btn" src="/images/icon_cancel.png" mode="aspectFill" bindtap="toggleDialogHandle"></image> </view> <view wx:for="{{comments}}" wx:for-item="comment"> <view class="comment_info"> <view class="c_info_view"> <image src="{{comment.userImage}}"></image> <text>{{comment.userName}}</text> </view> <text class="c_date_txt">{{comment.commitTime}}</text> </view> <view class="comment_content">{{comment.content}}</view> </view> </view> </view>
//comment.wxss /* 播放器 */ .player video { width: 100%; height: 400rpx; border-radius: 15rpx; margin-top: 15rpx; } /*詩詞標題、作者*/ .main { position: fixed; left: 0; top: 425rpx; right: 750rpx; bottom: 100rpx; } .row { display: flex; flex-direction: row; padding: 0rpx 20rpx 0rpx 20rpx; margin-top: 20rpx; } .title { display: inline-block; color: #1f96f2; margin-right: 10rpx; font-size: 30rpx; line-height: 40rpx; } .author, .discription, .comment { flex: 1; font-size: 30rpx; line-height: 40rpx; color: #222; } /*詩詞資訊顯示排版*/ .photo_info_box { padding: 20rpx 50rpx; } .author_box { position: relative; height: 80rpx; } .author_info_view { width: 45%; display: flex; align-items: center; } .author_info_view image { width: 80rpx; height: 80rpx; border-radius: 50%; } .author_info_view text { margin-left: 20rpx; } .author_date_txt { position: absolute; right: 0; color: #999; height: 37rpx; top: 22rpx; } .photo_summary_txt { height: 80rpx; line-height: 40rpx; margin: 20rpx 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .photo_tags_box { height: 50rpx; margin-bottom: 20rpx; } .tags { position: relative; width: 120rpx; height: 50rpx; line-height: 50rpx; margin-right: 25rpx; text-align: center; background-color: rgba(0, 0, 0, 0.05); float: left; } .tags::before { content: ''; position: absolute; left: 0; width: 6rpx; height: 100%; background-color: #ff5167; border-top-left-radius: 6rpx; border-bottom-left-radius: 6rpx; } .photo_comment_box { border-top: 1rpx solid rgb(206, 206, 206); overflow: hidden; padding-top: 20rpx; } .photo_comment_title { width: 112rpx; height: 40rpx; line-height: 40rpx; font-size: 30rpx; } .comment_info { position: relative; height: 60rpx; margin-top: 20rpx; } .c_info_view { display: flex; align-items: center; } .c_info_view image { width: 60rpx; height: 60rpx; border-radius: 50%; } .c_info_view text { height: 60rpx; line-height: 60rpx; margin-left: 20rpx; } .c_date_txt { position: absolute; right: 0; top: 12rpx; height: 37rpx; line-height: 37rpx; color: #999; font-size: 24rpx; } .comment_content { line-height: 40rpx; margin: 20rpx 0 0 80rpx; padding-bottom: 30rpx; border-bottom: 1rpx solid rgb(206, 206, 206); } .no_comment { margin-top: 250rpx; text-align: center; } .load_more_box { width: 168rpx; height: 40rpx; padding: 21rpx 67rpx; border-radius: 45rpx; margin: 27rpx auto; text-align: center; border: 2rpx solid rgb(206, 206, 206); } .comment_fixed_footer { position: fixed; bottom: 0; width: 100%; height: 110rpx; background-color: #f5f5f5; z-index: 1; } .footer_oper_box { width: 58%; height: 100%; display: flex; align-items: center; } button::after { border: none; } .btn { display: flex; margin-right: 30rpx; background-color: #f5f5f5; flex-direction: row; justify-content: center; align-items: center; } .btn image { width: 48rpx; height: 48rpx; } .btn text { margin-left: 30rpx; font-size: 36rpx; color: #333; } .footer_c { display: flex; margin-right: 15rpx; } .footer_c image { width: 48rpx; height: 48rpx; margin-right: 15rpx; } .footer_c text { margin-right: 15rpx; font-size: 36rpx; color: #333; } .post_comment_button { width: 42%; height: 100%; position: absolute; right: 0; bottom: 0; background-color: #ff5167; display: flex; align-items: center; text-align: center; justify-content: center; } .post_comment_button image { width: 64rpx; height: 64rpx; } .post_comment_button text { color: snow; margin-left: 14rpx; font-size: 36rpx; } /* 檢視更多評論 */ .cover_box { position: fixed; width: 100%; height: 100%; z-index: 2; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; } .overlay_box { position: fixed; width: 100%; box-sizing: border-box; z-index: 3; padding: 30rpx 40rpx; height: 800rpx; background-color: #f5f5f5; bottom: 0; overflow: scroll; } .overlay_title { position: relative; height: 48rpx; } .overlay_title text { font-size: 34rpx; } .overlay_title image { position: absolute; right: 0; width: 36rpx; height: 36rpx; top: 6rpx; } .textarea_box { height: 213rpx; border-radius: 10rpx; border: 1rpx solid rgb(206, 206, 206); margin-top: 30rpx; overflow: hidden; }
//comment.js
var app = getApp();
var util = require('../util/util.js');
Page({
data: {
showDialog: false,
video:[],
collect:[],
isCollected:false,
collectByMp3IdAndUId:[]
},
onLoad: function(options) {
this.showAllComment();
this.showVideo();
this.getCollectByMp3IdAndUId(app.requestDetailid, app.globalData.openid);
},
//開啟評論彈出層
toggleDialogHandle: function() {
this.showDialog = !this.showDialog;
this.setData({
showDialog: this.showDialog
})
},
// 把使用者輸入的評論儲存到變數裡
bindNewComment: function(e) {
this.data.newComment = e.detail.value; // 不更新 input,提高效率
},
//提交評論
submitComment() {
var that = this
// 如果評論輸入為空,則提示使用者輸入,不進行提交
if (!this.data.newComment) {
wx.showToast({
title: '請輸入評論'
});
} else {
that.addComment();
}
},
//新增評論
addComment() {
const db = wx.cloud.database() //開啟資料庫連線
var videoId = getApp().requestDetailid; //獲取當前videoId
var time = util.formatTime(new Date()) // 獲取當地時間
db.collection("comments").add({
data: {
userName: app.globalData.userInfo.nickName,
userImage: app.globalData.userInfo.avatarUrl,
content: that.data.newComment,
commitTime: time,
videoId: videoId
},
success: res => {
wx.showToast({
title: '評論成功',
})
this.setData({
newComment: ''
})
wx.navigateTo({
url: '../comment/comment',
})
},
fail: err => {
wx.showToast({
title: '評論失敗',
})
}
})
},
//查詢所有評論
showAllComment() {
/*const db = wx.cloud.database()
//接收從welcome.js傳遞過來的id
var videoId = getApp().requestDetailid;
db.collection("comments").where({
videoId: videoId
}).get({
success: res => {
this.setData({
comments: res.data,
})
},
fail: err => {
wx.showToast({
icon: "none",
title: '查詢評論失敗',
})
}
})*/
var videoId = getApp().requestDetailid;
wx.cloud.callFunction({
name: 'show',
data: {
videoId: {videoId}
}
}).then(res => {
this.setData({
comments: res.result.data,
})
})
},
//顯示視訊
showVideo() {
let that = this;
var videoId = getApp().requestDetailid;
const db = wx.cloud.database()
db.collection("videos").where({
videoId: videoId
}).get({
success: res => {
that.setData({
video: res.data,
})
console.log(res.data)
},
fail: err => {
wx.showToast({
icon: "none",
title: '播放失敗',
})
}
})
},
//分享轉發
onShareAppMessage: function () {
let that = this;
return {
title: this.data.video[0].title,
videoImg: that.data.video[0].videoImg,
success: function (res) {
// 轉發成功
console.log('轉發成功!')
},
fail: function (res) {
// 轉發失敗
console.log('轉發失敗!')
}
}
},
//收藏與未收藏之間的轉換
onCollectTap(){
var isCollected = this.data.isCollected;
if (isCollected) {
//取消收藏
var videoId = getApp().requestDetailid;
var user_oppenId = app.globalData.openid;//此為當前使用者的oppenId
console.log('-----測試-------' + user_oppenId);
this.removeCollect(videoId, user_oppenId);
// 設定setData值,前端介面才能讀取到isCollect的值,以下同理
this.setData({
isCollected: false
})
} else {
//收藏
this.addCollect();
this.setData({
isCollected: true
})
}
},
_onCollectTap(){
var isCollect = this.data.isCollect;
if (isCollect) {
//收藏
this.addCollect();
this.setData({
isCollected: false
})
} else {
//取消收藏
var videoId = getApp().requestDetailid;
var user_oppenId = app.globalData.openid;//此為當前使用者的oppenId
this.removeCollect(videoId, user_oppenId);
// 設定setData值,前端介面才能讀取到isCollect
this.setData({
isCollected: true
})
}
},
//收藏
addCollect(){
let that = this;
const db = wx.cloud.database() //開啟資料庫連線
var videoId = getApp().requestDetailid; //獲取當前videoId
db.collection("collects").add({
data: {
title:this.data.video[0].title,
author: this.data.video[0].author,
tempFileURL: that.data.video[0].tempFileURL,
videoImg: that.data.video[0].videoImg,
videoId: videoId,
},
success: res => {
wx.showToast({
title: "收藏成功",
icon: 'success',
duration: 1000,
make: true
});
},
fail: err => {
wx.showToast({
title: "伺服器維護中,收藏失敗",
duration: 1000,
icon: "sucess",
make: true
})
}
})
},
//刪除收藏資訊,根據視訊id和使用者id指定唯一的收藏資訊
removeCollect: function (videoId, user_openid) {
const db = wx.cloud.database();
db.collection("collects").where({
videoId: videoId,
_openid: user_openid
}).get({
success: res => {
db.collection("collects").doc(res.data[0]._id).remove({
success: res => {
wx.showToast({
title: '已取消收藏',
})
}, fail: err => {
wx.showToast({
title: '取消失敗',
})
}
})
},
fail: err => {
wx.showToast({
icon: "none",
title: '查詢記錄失敗',
})
}
})
},
//根據視訊id和使用者oppenId獲取收藏資訊
getCollectByMp3IdAndUId: function (videoId, user_openid) {
var user_openid = app.globalData.openid;
var videoId = getApp().requestDetailid;
const db = wx.cloud.database()
db.collection("collects").where({
videoId: videoId,
_openid: user_openid,
}).get({
success: res => {
var that = this
that.setData({
collectByMp3IdAndUId: res.data,
})
, console.log('---------->>>' + res.data)
console.log('---------->>>' + app.globalData.openid)
},
fail: err => {
wx.showToast({
icon: "none",
title: '伺服器維護中',
})
}
})
},
})
這下面的是點選評論跳轉到評論介面的介面程式碼
//comment-more.xml
<view>
<!-- 輸入評論 -->
<view class="textarea_box">
<textarea value="{{newComment}}" bindinput="bindNewComment" placeholder="寫下您的評論" name="textarea" />
</view>
<view class="input-box">
<button bindtap="submitComment" type="default" plain="{{true}}" class="send_btn">傳送</button>
</view>
</view>
//comment-more.wxss
.textarea_box {
padding: 30rpx 40rpx;
height: 280rpx;
border-radius: 10rpx;
border: 0rpx solid #f5f5f5;
margin-top: 20rpx;
overflow: hidden;
}
.input-box {
display: flex;
justify-content: center;
align-items: center;
}
.send_btn {
color: snow;
padding: 10rpx 100rpx;
border-radius: 70rpx;
background-color: #ff5167;
display: inline-block;
vertical-align: top;
text-align: center;
margin-top: 40rpx;
font-size: 12px;
}
//comment-more.js
var app = getApp();
var util = require('../util/util.js');
Page({
/**
* 頁面的初始資料
*/
data: {
},
onLoad: function (options) {
const db = wx.cloud.database()
//接收從welcome.js傳遞過來的id
var videoId = getApp().requestDetailid;
},
// 把使用者輸入的評論儲存到變數裡
bindNewComment: function(e) {
this.data.newComment = e.detail.value; // 不更新 input,提高效率
},
//提交評論並儲存到雲資料庫中
submitComment() {
const db = wx.cloud.database() //開啟資料庫連線
var videoId = getApp().requestDetailid; //獲取當前videoId
var that = this
// 獲取當地時間
var time = util.formatTime(new Date())
// 如果評論輸入為空,則提示使用者輸入,不進行提交
if (!this.data.newComment) {
wx.showToast({
title: '請輸入評論'
});
} else {
db.collection("comments").add({
data: {
userName: app.globalData.userInfo.nickName,
userImage: app.globalData.userInfo.avatarUrl,
content: that.data.newComment,
commitTime: time,
videoId: videoId
},
success: res => {
wx.showToast({
title: '評論成功',
})
this.setData({
newComment: ''
})
wx.navigateTo({
url: '../comment/comment'
})
},
fail: err => {
wx.showToast({
title: '評論失敗',
})
}
})
}
}
})
【總結】
以上就是評論+轉發+收藏的基本程式碼,註釋的也是很清楚,如果有什麼不懂的請留言我會及時回覆給大家