周末找事做做.看到微信里有个漂流瓶.试着敲了敲.
这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.
欢迎交流!
下面带图说模块:
1.主页面
三个button.不多说了.别吐槽这画风.哈哈哈.
2.编辑漂流瓶内容
这里是语音的.录音完成后直接扔出去.
3.捡一个漂流瓶
有两种情况.一是没有捡到.就是一个海星;二是捡到了.语音或者是文字.
1.海星
2.捡到了漂流瓶
2.2 获取到语音.直接播放
3.我的瓶子
语音和文字两类.
下面上代码:
1.index.wxml
2.index.wxss
page {
background-image: url('http://ac-nfyusptg.clouddn.com/0ee678402f996ad3a5c2.gif');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.play-style {
position: fixed;
bottom: 50rpx;
left: 0;
height: 240rpx;
width: 100%;
text-align: center;
color: #fff;
}
.playstyle {
position: absolute;
width: 160rpx;
height: 160rpx;
top: 10rpx;
left: 295rpx;
}
.leftstyle {
position: absolute;
width: 160rpx;
height: 160rpx;
top: 10rpx;
left: 67.5rpx;
}
.rightstyle {
position: absolute;
width: 160rpx;
height: 160rpx;
top: 10rpx;
right: 67.5rpx;
}
.img {
width: 160rpx;
height: 160rpx;
}
3.index.js
4.write.js
5.get.js
//去后台拉取漂流瓶数据,1.获取到文字,左边弹框;2.获取到语音,播放
//1.获取语音
var _this = this;
//获取语音漂流瓶
var queryRecord = new AV.Query('_File');
queryRecord.find().then(function (myrecord) {
console.log(myrecord);
var audio = []
for (var i = 0; i < myrecord.length; i++) {
//判断上传用户身份
if (myrecord[i].attributes.name == 'myRecord_dzp') {
_this.data.plp = _this.data.plp.concat(myrecord[i].attributes.url);
}
console.log(myrecord[i].attributes.url);
}
}).catch(function (error) {
alert(JSON.stringify(error));
});
//2.获取文本
var queryText = new AV.Query('TodoFolder');
// 查询 name 是 myText 的漂流瓶内容
queryText.equalTo('name','myText');
queryText.find().then(function (results) {
var mytext = []
for (var i = 0; i < results.length; i++) {
var query = new AV.Query('TodoFolder');
console.log(results[i].id)
query.get(results[i].id).then(function (todo) {
// 成功获得实例
// data 就是 id 为 57328ca079bc44005c2472d0 的 TodoFolder 对象实例
console.log(
todo.attributes.plp_content
)
_this.data.plp = _this.data.plp.concat(todo.attributes.plp_content);
},function (error) {
// 异常处理
});
}
},function (error) {
});
/**
- 监听音乐停止
/
wx.onBackgroundAudioStop(function () {
console.log('onBackgroundAudioStop')
_this.setData({
isPlaying: false
})
clearInterval(_this.timer)
})
},onReady: function () {
// 标题栏
wx.setNavigationBarTitle({
title: '捡一个'
})
},//右上角关闭按钮
onClick: function () {
var _this = this;
//捡到海星,return
if (!this.data.isGet) return
this.setData({
isGet: false
})
console.log("打开漂流瓶")
//随机获取一个索引
var index = parseInt(Math.random() this.data.plp.length)
var content = this.data.plp[index]
if (content.indexOf("http://") == 0) {
wx.playBackgroundAudio({
dataUrl: _this.data.plp[index],title: _this.data.plp[index],coverimgurl: ''
})
playRecord.call(_this)
} else {
_this.setData({
contentText: content
})
slideUp.call(_this);
}
},//遮罩点击 侧栏关闭
slideCloseEvent: function () {
slideDown.call(this);
}
})
//侧栏展开
function slideUp() {
var animation = wx.createAnimation({
duration: 600
});
this.setData({ maskdisplay: 'block' });
animation.translateX('110%').step();
this.setData({
slideAnimation: animation.export()
});
}
//侧栏关闭
function slideDown() {
var animation = wx.createAnimation({
duration: 800
});
animation.translateX('-110%').step();
this.setData({
slideAnimation: animation.export()
});
this.setData({ maskdisplay: 'none' });
}
//播放动画
function playRecord() {
var _this = this;
this.setData({
isPlaying: true
})
//话筒帧动画
var i = 1;
this.timer = setInterval(function () {
i++;
i = i % 5;
_this.setData({
j: i
})
},200);
}
6.mine.js
_this.data.mytext = _this.data.mytext.concat(todo.attributes.plp_content);
// console.log(_this.data.mytext)
},function (error) {
});
/**
- 监听音乐停止
*/
wx.onBackgroundAudioStop(function () {
console.log('onBackgroundAudioStop')
_this.setData({
isPlaying: false
})
clearInterval(_this.timer)
})
},onReady: function () {
// 标题栏
wx.setNavigationBarTitle({
title: '我的瓶子'
})
},//弹框显示文本内容
gotodisplay: function (e) {
this.setData({
isPlaying: false
})
clearInterval(this.timer)
//数组索引
var index = e.currentTarget.dataset.key;
wx.showModal({
title: '内容',content: this.data.mytext[index],showCancel: false,success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
},//播放音频
gotoPlay: function (e) {
var index = e.currentTarget.dataset.key;
console.log(this.data.audio[index])
//开启播放动画
playRecord.call(this)
wx.playBackgroundAudio({
dataUrl: this.data.audio[index],title: this.data.audio[index],coverimgurl: ''
})
}
})
//播放动画
function playRecord() {
var _this = this;
this.setData({
isPlaying: true
})
//话筒帧动画
var i = 1;
this.timer = setInterval(function () {
i++;
i = i % 5;
_this.setData({
j: i
})
},200);
}
数据的增删改查请看.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
