周末找事做做.看到微信里有个漂流瓶.试着敲了敲.
这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.
欢迎交流!
技术点：
1.微信小程序开发之录音机 音频播放 动画 (真机可用)
2.微信小程序开发之用户系统 一键登录 获取session_key和openid
3.微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置
4.微信小程序开发之本地图片上传(leancloud)
下面带图说模块:
1.主页面
三个button.不多说了.别吐槽这画风.哈哈哈.
2.编辑漂流瓶内容
内容可以是语音,也可以是文字.随意切换.
这里是语音的.录音完成后直接扔出去.
3.捡一个漂流瓶
有两种情况.一是没有捡到.就是一个海星;二是捡到了.语音或者是文字.
1.海星
2.捡到了漂流瓶
2.1 获取到文字.弹框显示文字
2.2 获取到语音.直接播放
3.我的瓶子
语音和文字两类.
下面上代码:
1.index.wxml
<view class="play-style">
<view class="playstyle">
<image class="img" src="{{getSrc}}" bindtap="get"></image>
<text>捡一个</text>
</view>
<view class="leftstyle">
<image class="img" src="{{throwSrc}}" bindtap="throw"></image>
<text>扔一个</text>
</view>
<view class="rightstyle">
<image class="img" src="{{mySrc}}" bindtap="mine"></image>
<text>我的瓶子</text>
</view>
</view>
2.index.wxss
[CSS] 纯文本查看 复制代码
page {
background-image: url('https://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
const AV = require('../../utils/av-weapp.js');
Page({
data: {
getSrc: "../../images/a.png",//捡一个
throwSrc: "../../images/b.png",//扔一个
mySrc: "../../images/c.png"//我的
},
onLoad: function () {
const user = AV.User.current();
// 调用小程序 API，得到用户信息
wx.getUserInfo({
success: ({userInfo}) => {
console.log(userInfo)
// 更新当前用户的信息
user.set(userInfo).save().then(user => {
// 成功，此时可在控制台中看到更新后的用户信息
this.globalData.user = user.toJSON();
}).catch(console.error);
}
});
},
//捡一个
get: function () {
console.log("捡一个")
//随机去后台拉取一个录音
wx.navigateTo({
url: '../get/get',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//扔一个
throw: function () {
console.log("扔一个")
wx.navigateTo({
url: '../write/write',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
//我的瓶子
mine: function () {
console.log("我的瓶子")
wx.navigateTo({
url: '../mine/mine',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
}
})
