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

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

这里是用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练手小程序、微信小程序javascript、javascript简单小程序，以便于您获取更多的相关知识。

时间： 2024-07-29 19:49:36

微信小程序之仿微信漂流瓶实例_javascript技巧的相关文章

使用微信小程序开发前端【快速入门】_javascript技巧

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

微信小程序开发实战教程之手势解锁_javascript技巧

代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock 这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

微信小程序开发之圆形菜单仿建行圆形菜单实例_javascript技巧

建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({ data: { userInfo: {}, menuList: {},//菜单集合 animationData: {}, startPoint: {},//触摸

微信小程序开发之大转盘仿天猫超市抽奖实例_javascript技巧

天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些. 注释写了一些,凑合这

微信小程序使用第三方库Immutable.js实例详解_javascript技巧

前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f

微信小程序-详解微信登陆、微信支付、模板消息_javascript技巧

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

微信小程序 require机制详解及实例代码_JavaScript

微信小程序 require机制详解一, JS模块加载:一次性加载全部JS, 但并不一定立即执行. 先提一提微信小程序架构: 类浏览器 -> HTTP本地服务 -> 云端服务微信小程序运行的架构,基本上是浏览器 -> HTTP本地服务 -> 云端服务, HTTP本地服务用来读取本地文件或者代理云端的文件资源.读取项目中JS文件, 是由HTTP本地服务取本地存储的脚本文件. 似乎比较简单,一个HTML 引用所有JS文件既然采用了这种架构,那微信小程序就类似浏览器那样,借助一个HT

微信小程序开发环境搭建详细介绍_相关技巧

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图开发工具下载是看到GitHub上的分享.那么你可以直接

微信小程序 scroll-view组件实现列表页实例代码_JavaScript

scroll-view组件介绍 scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置底部导航在"tabBar"的列表项("lis