• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

爆文详情页制作

从首页中数据列表打开相应详情页面的方法:

给数据列表中每个数据项加一个点击事件,同时将当前数据项的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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap