第六章 “我要點爆”微信小程式雲開發例項之爆文詳情頁製作

浪羽發表於2019-05-27

爆文詳情頁製作

從首頁中資料列表開啟相應詳情頁面的方法:

給資料列表中每個資料項加一個點選事件,同時將當前資料項的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)
  }
}

執行結果
第六章 “我要點爆”微信小程式雲開發例項之爆文詳情頁製作

至此,“我要點爆”微信小程式雲開發例項專案的主要功能和所用知識點就都講解完了,下面的我的頁面的簽到、收藏、助爆、封存和點爆記錄就由大家自己來實現吧!

專案原始碼:https://github.com/xiedong2016/dbx

相關文章