爆文詳情頁制作
從首頁中數據列表打開相應詳情頁面的方法：
給數據列表中每個數據項加一個點擊事件，同時將當前數據項的id暫時記錄在本地，然后跳轉到詳情頁面detail
goopen: function (e) {
//獲取當前內容的標識id，保存，方便進入查詢
var id = e.currentTarget.id
wx.setStorageSync('id', id)
wx.navigateTo({
url: '../detail/detail',
});
},
在detail頁面中的onLoad函數中對當前本地記錄的爆文id進行查詢，獲取爆文詳情數據
//取出標識id，查詢
var id = wx.getStorageSync('id')
// 查詢數據，初始化數據和判斷值wy
db.collection('bao').where({
_id: id
}).get()
爆文轉發功能實現
使用onShareAppMessage函數，title轉發標題，path當前頁面地址，path中頁面路徑后我們添加爆文的id為頁面攜帶的參數，使得轉發唯一
//分享
onShareAppMessage: function () {
var detailId = this.data.detail._id
var id = wx.getStorageSync('id')
return {
title: '我要點爆',
desc: '幫我點爆',
path: '/pages/detail/detail?id=' + id + "1",
}
}
app.json中增加詳情頁detail路徑，編譯創建詳情頁
<!--pages/detail/detail.wxml-->
<block wx:if="{{detail.text}}">
<view class="the_top">
<view class="top_left">
<text space="ensp">性 別：</text>
<text>情緒顏色：</text>
<text>點爆類型：</text>
<text>點爆方式：</text>
<text>點爆時間：</text>
</view>
<view class="top_right">
<text>{{detail.gender}}</text>
<text>{{detail.wmood}}</text>
<text>文爆</text>
<text>{{detail.wway}}</text>
<text>{{detail.time}}</text>
</view>
</view>
<view class="the_mid">
<scroll-view scroll-y="true" scroll-x="false" scroll-with-animation="true">
<view>
<text>{{detail.text}}</text>
</view>
<block wx:if="{{detail.baofilename}}">
<view class="yuimage">
<image src="/images/yuyin4.png" bindtap="playtwo"></image>
</view>
</block>
</scroll-view>
</view>
<view class="the_button">
<button bindtap="boost">{{boostText}}</button>
</view>
<view class="the_bottom">
<view class="bottom_one">
<image src="/images/re.png"></image>
<text>{{temperature}}</text>
</view>
<view class="bottom_two" bindtap="collect">
<image src="{{collectimage}}"></image>
<text>{{collectText}}</text>
</view>
</view>
</block>
<block wx:if="{{detail.filename}}">
<view class="the_top">
<view class="top_left">
<text space="ensp">性 別：</text>
<text>情緒顏色：</text>
<text>點爆類型：</text>
<text>點爆方式：</text>
<text>點爆時間：</text>
</view>
<view class="top_right">
<text>{{detail.gender}}</text>
<text>{{detail.ymood}}</text>
<text>音爆</text>
<text>{{detail.yway}}</text>
<text>{{detail.time}}</text>
</view>
</view>
<view class="the_mid">
<view class="yuyin">
<image src="/images/yuyin3.png" class="image1 {{im1?'bb':''}}" bindtap="playone"></image>
<block wx:if="{{detail.baofilename}}">
<image src="/images/yuyin4.png" class="image2 {{im2?'bb':''}}" bindtap="playtwo"></image>
</block>
</view>
</view>
<view class="the_button">
<button bindtap="boost">{{boostText}}</button>
</view>
<view class="the_bottom">
<view class="bottom_one">
<image src="/images/re.png"></image>
<text>{{temperature}}</text>
</view>
<view class="bottom_two" bindtap="collect">
<image src="{{collectimage}}"></image>
<text>{{collectText}}</text>
</view>
</view>
</block>
detail.js完整代碼
const db = wx.cloud.database();
var _innerAudioContext;
Page({
data: {
detail: {},//存儲數據
userInfo: {},
temperature: 0,//熱度
boost: true,//判斷是助爆還是取消助爆
boostText: '助爆',//控制助爆按鈕
wy: 1,//判斷是文爆還是音爆，為相應數據庫更新
collectimage: '/images/shoucang.png',//收藏圖標
collectText: '收藏',//判斷收藏文字變化
fileIDd: '',//爆炸之音
fileIDy: '',//語音
theplay: true,//判斷是否在播放聲音,
im1: false,//控制顯示語音播放樣式
im2: false,
boostNumber: 0,
},
//助爆
boost: function () {
//向助爆表中增加,傳入這兩個值方便保存，和查找刪除
var detailId = this.data.detail._id
var openId = wx.getStorageSync('openId')
if (this.data.boost) {
//調用雲函數，修改熱度數量，向雲函數傳值，對bao數據庫更新
wx.cloud.callFunction({
name: 'updateBoost',
data: {
id: this.data.detail._id,
temperature: this.data.temperature,
boost: this.data.boost,
detailId: detailId,
openId: openId
},
success: res => {
var detailId = this.data.detail._id
db.collection('boost').add({
data: {
detailId: detailId
},
success: function () {
console.log('增加成功')
},
fail: function (e) {
console.error(e)
}
})
this.setData({
boost: false,
boostText: '已助爆',
temperature: this.data.temperature + 10
})
wx.showToast({
title: '助爆成功',
})
}
})
} else {
//調用雲函數，修改熱度數量，向雲函數傳值
wx.cloud.callFunction({
name: 'updateBoost',
data: {
id: this.data.detail._id,
temperature: this.data.temperature,
boost: this.data.boost,
detailId: detailId,
openId: openId
},
success: res => {
this.setData({
boost: true,
boostText: '助爆',
temperature: this.data.temperature - 10
})
wx.showToast({
title: '已取消助爆',
})
}
})
}
},
//收藏按鈕
collect: function () {
//在異步success中不能用this要用var that
var that = this
var detailId = this.data.detail._id
//變換收藏
if (this.data.collectText == '收藏') {
var img = '/images/usercang.png'
var detailId = this.data.detail._id
db.collection('collect').add({
data: {
detailId: detailId
},
success: function () {
that.setData({
collectimage: img,
collectText: '已收藏'
})
console.log('收藏成功')
},
fail: function (e) {
console.log(e)
}
})
} else {
var img = '/images/shoucang.png'
wx.cloud.callFunction({
name: 'removeCollect',
data: {
id: this.data.detail._id,
openId: wx.getStorageSync('openId')
},
success: res => {
that.setData({
collectimage: img,
collectText: '收藏'
})
console.log('取消收藏')
}
})
}
},
//第一個語音按鈕播放
playone: function () {
if (this.data.theplay) {
this.setData({
theplay: false,
im1: true,
})
const innerAudioContext = wx.createInnerAudioContext()
_innerAudioContext = innerAudioContext
innerAudioContext.autoplay = true
innerAudioContext.src = this.data.detail.fileIDy
innerAudioContext.onPlay(() => {
console.log('開始播放')
}),
innerAudioContext.onEnded(() => {
this.setData({
theplay: true,
im1: false,
})
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
})
}
},
//第二個語音按鈕播放
playtwo: function () {
if (this.data.theplay) {
this.setData({
theplay: false,
im2: true,
})
const innerAudioContext = wx.createInnerAudioContext()
_innerAudioContext = innerAudioContext
innerAudioContext.autoplay = true
innerAudioContext.src = this.data.detail.fileIDd
innerAudioContext.onPlay(() => {
console.log('開始播放')
}),
innerAudioContext.onEnded(() => {
this.setData({
theplay: true,
im2: false,
})
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
}
},
//如果頁面被卸載時被執行，關掉所有正在播放的語音
onUnload: function () {
if (_innerAudioContext){
_innerAudioContext.stop();
}
},
//查詢出點爆數據，並初始化各個需要用的參數
onLoad: function () {
wx.showLoading({
title: '加載中',
mask: true
})
var that = this
//取出標識id，查詢
var id = wx.getStorageSync('id')
// 查詢數據，初始化數據和判斷值wy
db.collection('bao').where({
_id: id
}).get({
success: res => {
var wy = 1
if (res.data[0].text) {
wy = 1
} else {
wy = 2
}
that.setData({
detail: res.data[0],
temperature: res.data[0].temperature,
wy: wy
})
//查詢當前文章是不是當前用戶已經收藏的，如果是變換收藏圖標
db.collection('collect').where({
_openid: wx.getStorageSync('openId'),
detailId: this.data.detail._id
}).get({
success(res) {
//如果返回值存在且有數據
if (res.data && res.data.length > 0) {
var img = '/images/usercang.png'
that.setData({
collectimage: img,
collectText: '已收藏'
})
}
}
})
//查詢當前文章是不是當前用戶已經助爆
db.collection('boost').where({
_openid: wx.getStorageSync('openId'),
detailId: this.data.detail._id
}).get({
success(res) {
//結束加載按鈕
wx.hideLoading()
//如果返回值存在且有數據
if (res.data && res.data.length > 0) {
that.setData({
boost: false,
boostText: '已助爆'
})
}
}
})
}
});
},
//分享
onShareAppMessage: function () {
var detailId = this.data.detail._id
var id = wx.getStorageSync('id')
return {
title: '我要點爆',
desc: '幫我點爆',
path: '/pages/detail/detail?id=' + id + "1",
}
}
})
新建助爆記錄集合boost和收藏記錄集合collect
兩個集合的結果如下：
| 字段名 | 數據類型 | 主鍵 | 非空 | 描述 |
|---|---|---|---|---|
| _id | String | 是 | 是 | ID |
| _openid | String | 是 | 用戶唯一標識 | |
| time | String | 用戶簽到時間 |
新建助爆時修改熱度值的雲函數updateBoost，用於修改爆文熱度和刪除爆文
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//聲明數據庫
const db = cloud.database()
// 雲函數入口函數
exports.main = async (event, context) => {
//取得傳過來的參數
var temperature = event.temperature,
id = event.id,
boost = event.boost,
detailId = event.detailId,
openId = openId;
if (boost) {
temperature = temperature + 10
} else {
temperature = temperature - 10
try {
db.collection('boost').where({
openId: openId,
detailId: detailId,
}).remove()
} catch (e) {
console.error(e)
}
}
try {
return await db.collection('bao').where({
_id: id
}).update({
data: {
temperature: temperature
},
success: res => {
console.log('雲函數成功')
},
fail: e => {
console.error(e)
}
})
} catch (e) {
console.error(e)
}
}
新建收藏取消收藏的雲函數removeCollect，用於刪除收藏集合中的數據
// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
//聲明數據庫
const db = cloud.database()
// 雲函數入口函數
exports.main = async (event, context) => {
//取得傳過來的參數
var openId = event.openId,
id = event.id;
try {
return await db.collection('collect').where({
_openid: openId,
detailId: id
}).remove()
} catch (e) {
console.error(e)
}
}
運行結果
至此，“我要點爆”微信小程序雲開發實例項目的主要功能和所用知識點就都講解完了，下面的我的頁面的簽到、收藏、助爆、封存和點爆記錄就由大家自己來實現吧！