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

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

这里是用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

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

(0)

相关推荐

  • 微信小程序(应用号)简单实例应用及实例详解

    Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

  • 微信小程序 实现列表刷新的实例详解

    微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

  • 微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序 (三)tabBar底部导航详细介绍

    tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp                     icon组件 Window                            text组件        

  • 微信小程序 获取微信OpenId详解及实例代码

    获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc

  • 微信小程序 实战小程序实例

    微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

  • 微信小程序 触控事件详细介绍

    微信小程序 触控事件: 微信小程序的"事件"挺有意思.看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便. 接下来把文档copy过来 原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html >>>什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发

  • 微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

  • 微信小程序 参数传递详解

    微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

随机推荐