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


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

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

Javascript 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
js prototype和__proto__的关系是什么
Aug 23 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
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python实现微信小程序自动回复
2018/09/10 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
Python:slice与indices的用法
2019/11/25 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
竞聘上岗演讲稿范文
2014/01/10 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
投资建议书模板
2014/05/12 职场文书
学校读书活动总结
2014/06/30 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
Python OpenCV之常用滤波器使用详解
2022/04/07 Python