小程序弹幕实现（PHP后台）

前言：最近的任务是实现多屏互动弹幕系统，小程序自带danmu-list，省去了很多工作，也抱着顺便玩一玩小程序的心态，选择了小程序开发。网上很多例子都是无后台版本的弹幕实现，由于项目要求，需要显示以前发送的弹幕，这就涉及到存储和调用的问题。下面是利用php做后台处理数据与小程序前端交互的例子。
首先明确，小程序只是前端，即不能直接调用操作数据库，必须通过接口实现与数据库的交互。

小程序端代码：
index.js:

//全局变量，获取初始time
var starttime = Date.now();

//获取到的接口数据
var jsondata;
//测试接口数据是否正确
//var testdata;

//随机获取弹幕颜色的函数
function getRandomColor () {
  let randomColor = []
  for (let i = 0 ; i < 3; ++i){
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    randomColor.push(color)
  }
  return '#' + randomColor.join('')
}

Page({
  //直接调用已保存的接口数据
  onLoad: function () {
    /*测试
      console.log('onLoad');
      console.log(this.data.danmuList)
      */
      var that = this; wx.request({
      url: 'http://xxxx.xxxx.xxxx.xxxx',
      headers: {
        'Content-Type': 'application/json'
      },
      //成功回调函数，请求成功即执行
      success: function (res) {

        //获取到的json数据
        jsondata = res.data;

        /*将获取到的json数据组装成danmulist的格式
          转换time值由字符型变为为数值型
          随机获取color值*/
        for(var i=0;i<jsondata.length;i++){
          jsondata[i].time = parseInt(jsondata[i].time);
          jsondata[i]['color']= getRandomColor();
        }
        //console.log(jsondata)
      },
    })
  },

  data: {
    src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 2s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]
  },

  /*
  弹幕替换，用接口数据jsondata替换data中自定义的danmuList
  这里很多坑 */
bindPlay:function(){
  this.data.danmuList = jsondata.concat(this.data.danmuList);
  this.setData({
    'danmuList':this.data.danmuList
  })
},

  onReady: function (res) {

    this.videoContext = wx.createVideoContext('danmu_video');  
  },

  //事件处理函数
  bindInputBlur: function(e) {
    this.inputValue = e.detail.value
  },

  //弹幕发送函数
  bindSendDanmu: function () {
    //获取当前时间
    var nowtime = Date.now();
    //计算弹幕时间
    var time = (nowtime-starttime)/10000;
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })

    //发送弹幕到后台
    wx.request({
      url: 'http://xx.xx.xx.xx',
      data:{
        data: this.inputValue,
        vid:vid,
        uid:uid,
        time:time,
      },
      header: {
        'content-type': 'application/json,charset=utf-8'
      },
      method: 'GET',
      success: function (res) {
       // console.log(1);
      }
    });
    //console.log('form发生了submit事件，携带数据为：', time)
  },

})

index.wxml

<view class="dammu_container">
  <video id="danmu_video" src="{{src}}" danmu-list="{{danmuList}}" bindplay="bindPlay" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur" class="danmu_input" placeholder="在这里输入弹幕"/>
    <button bindtap="bindSendDanmu" class="sendBtn">发送弹幕</button>
  </view>
</view>

index.wxss

#danmu_video{
  width: 100%;
}
.sendBtn{
  width: 94%;
  margin:2% auto 0;
}
.danmu_input{
  display: block;
  line-height: 2rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  width: 94%;
  margin: 0 auto;
}

后台接口：
danmu.php:将弹幕存入数据库

<?php
   header('content-type:application/json;charset=utf8');

   mysql_connect("localhost","root","");
   mysql_query("set names 'utf-8' ");
   mysql_select_db("test");

   $res = $_GET;
   $data = $res["data"];
   $vid = $res["vid"];
   $uid = $res["uid"];
   $time = $res["time"];
   $insertsql = mysql_query("insert into danmu values('$vid','$uid','$data','$time');");  
?>

danmu_return.php: 返回数据库数据给小程序使用

<?php
   mysql_connect("localhost","root","");
   mysql_query("set names 'utf-8' ");
   mysql_select_db("yourdatabase name");
   $sql = mysql_query("select * from yourtablename ");
   $res = array();
   $i = 0;
   //通过遍历获取$sql语句取出的内容，将其存入数组中
  while( $row = mysql_fetch_array($sql))
  {
      /*
      var_dump($row);
      $res[$i] = $row;
      */
      $res[$i]['text']=$row[2];
      $res[$i]['color']='#ff0000';
      $res[$i]['time']=$row[3];
      $i++;
  };
  $i--;  

  //将数据数组封装为json格式，用于js的接收
  $res = json_encode($res);
  echo $res;
 ?>