看到微信里有个漂流瓶.试了一下.
这里是用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
[html]view plaincopy<!--index.wxml--> <viewclass="play-style"> <viewclass="playstyle"> <imageclass="img"src="{{getSrc}}"bindtap="get"></image> <text>捡一个</text> </view> <viewclass="leftstyle"> <imageclass="img"src="{{throwSrc}}"bindtap="throw"></image> <text>扔一个</text> </view> <viewclass="rightstyle"> <imageclass="img"src="{{mySrc}}"bindtap="mine"></image> <text>我的瓶子</text> </view> </view>
2.index.wxss[css]view plaincopy/**index.wxss**/ page{ background-image:url('http://ac-/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
[javascript]view plaincopy<spanstyle="font-size:24px;">//index.js //获取应用实例 varapp=getApp() constAV=require('../../utils/av-weapp.js'); Page({ data:{ getSrc:"../../images/a.png",//捡一个 throwSrc:"../../images/b.png",//扔一个 mySrc:"../../images/c.png"//我的 }, onLoad:function(){ constuser=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 } }) } }) </span>
4.write.js[html]view plaincopy//index.js //获取应用实例 varapp=getApp() constAV=require('../../utils/av-weapp.js'); Page({ data:{ getSrc:"../../images/a.png",//捡一个 throwSrc:"../../images/b.png",//扔一个 mySrc:"../../images/c.png"//我的 }, onLoad:function(){ constuser=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[javascript]view plaincopy//get.js //获取应用实例 varapp=getApp() constAV=require('../../utils/av-weapp.js'); Page({ data:{ getPngSecond:"http://ac-/6f50e35237db20a4edd6.png",//海星 getPngThrid:"http://ac-/15070f4f33bb6090ec1b.png",//漂流瓶 isGet:true,//是否捡到了漂流瓶 maskDisplay:'none', slideAnimation:{}, slideHeight:0, slideRight:0, slideWidth:0, isPlaying:false, plp:[], j:1, contentText:'' }, onLoad:function(){ var_this=this; //获取屏幕宽高 wx.getSystemInfo({ success:function(res){ varwindowWidth=res.windowWidth; varwindowHeight=res.windowHeight; console.log('windowWidth:'+windowWidth) console.log('windowHeight:'+windowHeight) _this.setData({ imageWidth:windowWidth, imageHeight:windowHeight, slideHeight:res.windowHeight*0.6, slideRight:res.windowWidth, slideWidth:res.windowWidth*0.80 }) } }) varnum=Math.round(Math.random()*9+1); console.log(num) if(num>5){ //捡到漂流瓶 this.setData({ bgPng:this.data.getPngThrid, isGet:true }) }else{ //海星 this.setData({ bgPng:this.data.getPngSecond, isGet:false }) } //去后台拉取漂流瓶数据,1.获取到文字,左边弹框;2.获取到语音,播放 //1.获取语音 var_this=this; //获取语音漂流瓶 varqueryRecord=newAV.Query('_File'); queryRecord.find().then(function(myrecord){ console.log(myrecord); varaudio=[] for(vari=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.获取文本 varqueryText=newAV.Query('TodoFolder'); //查询name是myText的漂流瓶内容 queryText.equalTo('name','myText'); queryText.find().then(function(results){ varmytext=[] for(vari=0;i<results.length;i++){ varquery=newAV.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("打开漂流瓶") //随机获取一个索引 varindex=parseInt(Math.random()*this.data.plp.length) varcontent=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); } }) //侧栏展开 functionslideUp(){ varanimation=wx.createAnimation({ duration:600 }); this.setData({maskDisplay:'block'}); animation.translateX('110%').step(); this.setData({ slideAnimation:animation.export() }); } //侧栏关闭 functionslideDown(){ varanimation=wx.createAnimation({ duration:800 }); animation.translateX('-110%').step(); this.setData({ slideAnimation:animation.export() }); this.setData({maskDisplay:'none'}); } //播放动画 functionplayRecord(){ var_this=this; this.setData({ isPlaying:true }) //话筒帧动画 vari=1; this.timer=setInterval(function(){ i++; i=i%5; _this.setData({ j:i }) },200); }
6.mine.js[javascript]view plaincopy<spanstyle="font-size:24px;">//mine.js //获取应用实例 varapp=getApp() constAV=require('../../utils/av-weapp.js'); Page({ data:{ audio:[],//录音集合 mytext:[],//文本集合 isPlaying:false,//是否在播放语音 }, onLoad:function(){ var_this=this; //获取语音漂流瓶 varqueryRecord=newAV.Query('_File'); queryRecord.find().then(function(myrecord){ console.log(myrecord); varaudio=[] for(vari=0;i<myrecord.length;i++){ //判断上传用户身份 if(myrecord[i].attributes.name=='myRecord_dzp'){ _this.data.audio=_this.data.audio.concat(myrecord[i].attributes.url); } console.log(myrecord[i].attributes.url); } }).catch(function(error){ alert(JSON.stringify(error)); }); //获取文本漂流瓶 varqueryText=newAV.Query('TodoFolder'); //查询name是myText的漂流瓶内容 queryText.equalTo('name','myText'); queryText.find().then(function(results){ varmytext=[] for(vari=0;i<results.length;i++){ varquery=newAV.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.mytext=_this.data.mytext.concat(todo.attributes.plp_content); //console.log(_this.data.mytext) },function(error){ //异常处理 }); } },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) //数组索引 varindex=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){ varindex=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:'' }) } }) //播放动画 functionplayRecord(){ var_this=this; this.setData({ isPlaying:true }) //话筒帧动画 vari=1; this.timer=setInterval(function(){ i++; i=i%5; _this.setData({ j:i }) },200); }</span>
数据的增删改查请看leancloud文档.
代码太多了.我这里只贴了 js代码.
还是去下载吧.demo代码下载
