编程 Javascript

微信小程序之仿微信漂流瓶实例

Posted in Javascript onDecember 09, 2016

周末找事做做.看到微信里有个漂流瓶.试着敲了敲.

这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.

欢迎交流!

微信小程序之仿微信漂流瓶实例

下面带图说模块:

1.主页面

三个button.不多说了.别吐槽这画风.哈哈哈.

微信小程序之仿微信漂流瓶实例

2.编辑漂流瓶内容

内容可以是语音,也可以是文字.随意切换.

微信小程序之仿微信漂流瓶实例

这里是语音的.录音完成后直接扔出去.

微信小程序之仿微信漂流瓶实例

3.捡一个漂流瓶

有两种情况.一是没有捡到.就是一个海星;二是捡到了.语音或者是文字.

1.海星

微信小程序之仿微信漂流瓶实例

2.捡到了漂流瓶

微信小程序之仿微信漂流瓶实例

2.1 获取到文字.弹框显示文字

微信小程序之仿微信漂流瓶实例

2.2 获取到语音.直接播放

微信小程序之仿微信漂流瓶实例

3.我的瓶子

语音和文字两类.

微信小程序之仿微信漂流瓶实例

下面上代码:

1.index.wxml

<!--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

/**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

//get.js 
//获取应用实例 
var app = getApp() 
const AV = require('../../utils/av-weapp.js'); 
Page({ 
 data: { 
 getPngSecond: "http://ac-ejx0nsfy.clouddn.com/6f50e35237db20a4edd6.png",//海星 
 getPngThrid: "http://ac-ejx0nsfy.clouddn.com/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) { 
  var windowWidth = res.windowWidth; 
  var windowHeight = 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 
  }) 
  } 
 }) 
 var num = 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; 
 //获取语音漂流瓶 
 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

//mine.js 
//获取应用实例 
var app = getApp() 
const AV = require('../../utils/av-weapp.js'); 
Page({ 
 data: { 
 audio: [],//录音集合 
 mytext: [],//文本集合 
 isPlaying: false,//是否在播放语音 
 }, 
 onLoad: function () { 
 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.audio = _this.data.audio.concat(myrecord[i].attributes.url); 
  } 
  console.log(myrecord[i].attributes.url); 
  } 
 }).catch(function (error) { 
  alert(JSON.stringify(error)); 
 }); 
 //获取文本漂流瓶 
 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.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) 
 //数组索引 
 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); 
}

数据的增删改查请看leancloud文档.

demo下载：demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序之仿微信漂流瓶实例

- Author -

dzp_coder

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

国外的为初学者写的JavaScript教程

Jun 09 Javascript

Jquery Autocomplete 结合asp.net使用要点

Oct 29 Javascript

深入理解JavaScript系列（15）函数（Functions）

Apr 12 Javascript

JS 实现点击a标签的时候让其背景更换

Oct 15 Javascript

JQuery解析HTML、JSON和XML实例详解

Mar 29 Javascript

JS下载文件|无刷新下载文件示例代码

Apr 17 Javascript

浅析jquery如何判断滚动条滚到页面底部并执行事件

Apr 29 Javascript

Angularjs中使用layDate日期控件示例

Jan 11 Javascript

js实现文字选中分享功能

Jan 25 Javascript

webpack之devtool详解

Feb 10 Javascript

解决layui追加或者动态修改的表单元素“没效果”的问题

Sep 18 Javascript

小程序瀑布流组件实现翻页与图片懒加载

May 19 Javascript

JS判断是否手机或pad访问实现方法

Dec 09 #Javascript

js实现一个可以兼容PC端和移动端的div拖动效果实例

Dec 09 #Javascript

利用JS实现页面删除并重新排序功能

Dec 09 #Javascript

Bootstrap table使用方法详细介绍

Dec 09 #Javascript

jQuery Validate设置onkeyup验证的实例代码

Dec 09 #Javascript

任意Json转成无序列表的方法示例

Dec 09 #Javascript

利用jQuery.Validate异步验证用户名是否存在（推荐）

Dec 09 #Javascript