微信小程序api 点赞 评论 暂停 循环播放 . (2019年3月29日)

点赞功能

1. 在点赞图标组件上绑定方法zan

   <!-- 点赞按钮 -->
      <image wx:if="{{item.is_zan == 0}}" class="right_img" src="../../img/love.png" bindtap="zan" data-id="{{item.id}}" data-key="{{key}}"></image>

2. 创建方法zan

• 首先需要判断用户是否登陆，如果没有登陆让其确认登陆，这里简化一下，确认为uid为1的用户登陆
• 然后在登陆的情况下 在执行点赞，把uid vid a 组合成json数据data，调用api接口链接数据
  //点赞

  zan: function (e) {
    if(!uid){
      wx.showModal({
        title: '您未登陆',
        content: '请登录',
        success (res) {
          if (res.confirm) {
            uid = 1
            // console.log(uid)
          }
        }
      })
    } else {
      var data = {
        vid : e.currentTarget.dataset.id,
        uid : uid,
        a   : "zan"
      }
      //连接api获取数据进行处理
      com.post('douyin.php', data, 'zanret', this); 
    }

1. zanren方法处理api获取的数据，获取数据集合play，当前下标的视频的is_zan赋值为1，zan_number++；这里的下标用key来表示，值是在滑动后就获取并且在开头定义为全局变量

   //处理赞数据
      zanret : function (e) {
        var play = this.data.play;
        play[key].is_zan = 1;
        play[key].zan_number++;
        this.setData({
          play : play
        })
   edit_v: function(e){
        // console.log(e)
        var old = key;
        key = e.detail.current;
        wx.createVideoContext("video_" + key).seek(0);
            wx.createVideoContext("video_" + key).play();
        wx.createVideoContext("video_" + old).pause();
            wx.createVideoContext("video_" + old).seek(0);
        },

   评论功能

2. 在评论组件绑定事件 b

   <!-- 消息按钮 -->
      <image class="right_img" src="../../img/com.png" bindtap="b" data-id="{{item.id}}" data-key="{{key}}"></image>
      <view class="text">{{item.msg_number}}</view>

3. b方法与之前点赞类似，首先也是要判断是否登陆，没登录那么久让其确认登陆，登陆后，将is_p赋值为1，评论层弹出，把当前视频id赋给msg_id

   //评论
   b: function (e) {
    if(!uid){
      wx.showModal({
        title: '您未登陆',
        content: '请登录',
        success (res) {
          if (res.confirm) {
            uid = 1
            // console.log(uid)
          }
        }
      })
    } else {
      this.setData({
        is_p : 1
      })
      msg_id = e.currentTarget.dataset.id;
    }
   },

4. 点击取消，在取消组件上绑定事件c，该方法给is_p赋值为0

   <!-- 弹框 评论 -->
   <view style="position:fixed;bottom:0rpx;" wx:if="{{is_p == 1}}">
   <input style="width:720rpx;background-color:#fff;padding:20rpx;" placeholder="有爱评论，说点儿好听的~" focus="true" bindinput="i"></input>
   <view>
    <button type="default" style='width:50%;float:left;' bindtap="c">取消</button>
    <button type="primary" style='width:50%' bindtap="d">确定</button>
   </view>
   </view>

   //取消评论
   c: function () {
    this.setData({
      is_p : 0
    })
   },

5. 获取评论值 在评论框组件绑定事件i，该方法主要是将评论内容保存在全局变量content

   //将评论框的内容提取赋给变量
   i: function (e) {
    content = e.detail.value;
   },

6. 点击确定 绑定事件d整合uid vid content a传给api接口，然后链接数据，将数据交给 m处理

   //点击确定 提交数据
   d: function () {
    var data = {
      a: "comment",
      vid: msg_id,
      uid: uid,
      content: content
    }
    com.post('douyin.php', data, 'm', this); 
   },
   //确定后数据处理
   m: function (e) {
    var play = this.data.play;
    play[key].msg_number++;
    this.setData({
      play : play,
      is_p : 0
    })
   },

   暂停视频

7. 在视频组件绑定事件z给全局变量status为开关，1为播放，0为暂停

   //暂停视频
   z : function () {
    // console.log(2)
    if(status == 1){
      status = 0;
      wx.createVideoContext("video_" + key).pause();
    }else {
      status = 1;
      wx.createVideoContext("video_" + key).play();
    }
   }

   <!-- 视频 -->
    <video id="video_{{key}}" autoplay="{{item.autoplay}}" initial-time="{{item.initial}}" controls="" class="wh100" src="{{item.video}}" bindtap="z" bindended="g"></video>

   循环播放

8. 在视频播放完绑定事件g 让其播放完回退到开头继续播放

   //循环播放
   g: function () {
    wx.createVideoContext("video_" + key).seek(0);
        wx.createVideoContext("video_" + key).play();
   },

   完善昨天的功能

9. 滑动切换视频后原视频停止播放并且返回开头，新视频从头播放

   //这里是滑块滑动时绑定的方法，用来滑动后的视频播放
    edit_v: function(e){
    // console.log(e)
    var old = key;
    key = e.detail.current;
    wx.createVideoContext("video_" + key).seek(0);
        wx.createVideoContext("video_" + key).play();
    wx.createVideoContext("video_" + old).pause();
        wx.createVideoContext("video_" + old).seek(0);
    },