前言:最近的任务是实现多屏互动弹幕系统,小程序自带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;
?>