周末找事做做.看到微信里有个漂流瓶.试着敲了敲.
这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.
欢迎交流!
下面带图说模块:
1.主页面
三个button.不多说了.别吐槽这画风.哈哈哈.
2.编辑漂流瓶内容
内容可以是语音,也可以是文字.随意切换.
这里是语音的.录音完成后直接扔出去.
3.捡一个漂流瓶
有两种情况.一是没有捡到.就是一个海星;二是捡到了.语音或者是文字.
1.海星
2.捡到了漂流瓶
2.1 获取到文字.弹框显示文字
2.2 获取到语音.直接播放
3.我的瓶子
语音和文字两类.
下面上代码:
1.index.wxml
<!--index.wxml--> <view> <view> <image src="https://www.jb51.net/{{getSrc}}" bindtap="get"></image> <text>捡一个</text> </view> <view> <image src="https://www.jb51.net/{{throwSrc}}" bindtap="throw"></image> <text>扔一个</text> </view> <view> <image src="https://www.jb51.net/{{mySrc}}" bindtap="mine"></image> <text>我的瓶子</text> </view> </view>
2.index.wxss
/**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
//index.js //获取应用实例 var app = getApp() 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 } }) } })
4.write.js
//index.js //获取应用实例 var app = getApp() 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 } }) } })
5.get.js