The _javascript technique of micro-letter imitation micro-letter Drifting Bottle Example

Do something for the weekend. See the micro-letter has a drifting bottle. Try knocking.

This is done backstage with Leancloud. It involves the storage of voice and text, query. I can't write back code, it's a benefit for me.

Welcome to the Exchange!

The following illustrated module:

1. Main face

Three button. Don't spit it out. The painting wind. hahaha.

2. Edit the contents of the drifting bottle

Content can be either speech or text. Switch at will.

Here's the voice. Just throw it out after the recording is complete.

3. Pick up a drifting bottle

There are two situations. One is not picked up. is a starfish, and the second is found. Voice or text.

1. Starfish

2. Picked up the drifting bottle

2.1 Get to text. Frame display text

2.2 Get to voice. Play directly

3. My bottle

Two types of speech and text.

The following code:

1.index.wxml

<!--index.wxml--> 
<view class= "Play-style" > 
 <view class= "Playstyle" > 
 <image Class= "img" src= "{GETSRC}}" bindtap= "get" ></image> 
 <text> pick up a </text> 
 </view> 
 <view class= "Leftstyle" > 
 <image class= "img" src= "{THROWSRC}}" bindtap= "throw" ></image> 
 <text> throw a </text> 
 </view> 
 <view class= "Rightstyle" > 
 <image class= " IMG "src=" {MYSRC}} "bindtap=" Mine ></image> 
 <text> my bottle </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//Get application instance var app = Getapp () const AV = require (' ... /.. 
/utils/av-weapp.js '); Page ({data: {getsrc:). /.. /images/a.png ",//Pick up a throwsrc:". /.. /images/b.png ",//Throw a mysrc:". /.. /images/c.png "//My}, Onload:function () {Const USER = AV. 
 User.current (); Invoke applet API to get user information Wx.getuserinfo ({success: ({userInfo}) => {console.log (userInfo)//update Current user's information user.s 
  ET (userInfo). Save (). Then (user => {//successful, you can see updated user information in the console this.globalData.user = User.tojson (); 
  ). catch (Console.error); 
 } 
 }); ///Pick up a get:function () {Console.log ("pick one")//randomly go backstage to pull a recording Wx.navigateto ({url: ' ... /get/get ', success:function (res) {//success}, Fail:function () {//fail}, Complete:function () {//Complete}}},//Throw a throw:function () {Console.log ("throw One") wx.navigateto ({url: ' ... /write/write ', success:function (res) {//success}, Fail:function () {//fail}, COMplete:function () {//Complete}}},//My Bottle mine:function () {Console.log ("my Bottle") Wx.navigateto ({ URL: '.. /mine/mine ', success:function (res) {//success}, Fail:function () {//fail}, Complete:functio 
 N () {//Complete}}})

 4.write.js

 Index.js//Get application instance var app = Getapp () const AV = require (' ... /.. 
/utils/av-weapp.js '); Page ({data: {getsrc:). /.. /images/a.png ",//Pick up a throwsrc:". /.. /images/b.png ",//Throw a mysrc:". /.. /images/c.png "//My}, Onload:function () {Const USER = AV. 
 User.current (); Invoke applet API to get user information Wx.getuserinfo ({success: ({userInfo}) => {console.log (userInfo)//update Current user's information user.s 
  ET (userInfo). Save (). Then (user => {//successful, you can see updated user information in the console this.globalData.user = User.tojson (); 
  ). catch (Console.error); 
 } 
 }); ///Pick up a get:function () {Console.log ("pick one")//randomly go backstage to pull a recording Wx.navigateto ({url: ' ... /get/get ', success:function (res) {//success}, Fail:function () {//fail}, Complete:function () {//Complete}}},//Throw a throw:function () {Console.log ("throw One") wx.navigateto ({url: ' ... /write/write ', success:function (res) {//success}, Fail:function () {//fail}, COmplete:function () {//Complete}}},//My Bottle mine:function () {Console.log ("my Bottle") Wx.navigateto ( {URL: '.. /mine/mine ', success:function (res) {//success}, Fail:function () {//fail}, Complete:functio 
 N () {//Complete}}})

5.get.js

Get.js//Get application instance var app = Getapp () const AV = require (' ... /.. 
/utils/av-weapp.js '); Page ({data: {getpngsecond: "http://ac-ejx0nsfy.clouddn.com/6f50e35237db20a4edd6.png",//Starfish Getpngthrid: "http://ac-  
 Ejx0nsfy.clouddn.com/15070f4f33bb6090ec1b.png ",//whether the drifting bottle isget:true,//picked up the drifting bottle maskdisplay: ' None ', Slideanimation: {}, slideheight:0, slideright:0, slidewidth:0, Isplaying:false, PLP: [], J:1, ContentText: '}, Onloa 
 D:function () {var _this = this; 
  Gets the screen width high wx.getsysteminfo ({success:function (res) {var windowwidth = res.windowwidth; 
  var windowheight = res.windowheight; Console.log (' windowwidth: ' + windowwidth) console.log (' windowheight: ' + windowheight ') _this.setdata ({Imagewid 
   Th: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) {//Pick up drift bottle this.setdata ({bgPng:this.data.getPngThrid, isget:true})} else {//Starfish This.setdata ({bgPng:this.data.getPngSecond, isget:false})}//Go backstage pull the drift bottle data, 1. Get to text, left frame; 2. Get to Voice, play// 
 1. Get voice var _this = this; Get voice drift bottle var Queryrecord = new AV. 
 Query (' _file '); 
  Queryrecord.find (). Then (function (Myrecord) {console.log (Myrecord); var audio = [] for (var i = 0; i < myrecord.length; i++) {//Judge upload User ID if (myrecord[i].attributes.name = = ' Myre 
  Cord_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. Get text var querytext = new AV. 
 Query (' Todofolder '); 
 Query name is MyText querytext.equalto (' name ', ' MyText ') of the float bottle; Querytext.find (). Then (function (results) {var mytext = [] for (var i = 0; i < results.length; i++) {var quer y = new AV. Query(' Todofolder '); Console.log (results[i].id) query.get (results[i].id). Then (function (TODO) {//successfully obtained instance//data is ID 57328ca079 Bc44005c2472d0 Todofolder Object Instance Console.log (todo.attributes.plp_content) _THIS.DATA.PLP = _this.data.pl 
  P.concat (todo.attributes.plp_content); 
  }, function (Error) {//exception handling}); 
 
 
 }}, function (Error) {}); 
  /** * Listening to music stop/wx.onbackgroundaudiostop (function () {console.log (' onbackgroundaudiostop ') _this.setdata ({ Isplaying:false}) Clearinterval (_this.timer)})}, Onready:function () {//title bar Wx.setnavigationbartit 
 Le ({title: ' Pick Up a '})},//upper right corner Close button onclick:function () {var _this = this; Pick up starfish, return if (!this.data.isget) return This.setdata ({isget:false}) Console.log ("Open drift Bottle")//random fetch an index V AR 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); 
 },//Mask click Side Bar to close slidecloseevent:function () {slidedown.call (this); 
 })//Sidebar expansion function slideup () {var animation = Wx.createanimation ({duration:600}); 
 This.setdata ({maskdisplay: ' block '}); 
 Animation.translatex (' 110% '). Step (); 
This.setdata ({slideAnimation:animation.export ()}); 
 }//Sidebar close function Slidedown () {var animation = Wx.createanimation ({duration:800}); 
 Animation.translatex (' -110% '). Step (); 
 This.setdata ({slideAnimation:animation.export ()}); 
This.setdata ({maskdisplay: ' none '}); 
 //Play Animation function PlayRecord () {var _this = this; 
 This.setdata ({isplaying:true})//Microphone frame animation var i = 1; 
 This.timer = setinterval (function () {i++; 
 i = i% 5; 
_this.setdata ({j:i})}, 200); }
 

6.mine.js

Mine.js//Get application instance var app = Getapp () const AV = require (' ... /.. 
/utils/av-weapp.js '); Page {data: {audio: [],//Recording collection mytext: [],//Text Collection isplaying:false,//is playing voice}, Onload:function () {var _t 
 he = this; Get voice drift bottle var Queryrecord = new AV. 
 Query (' _file '); 
  Queryrecord.find (). Then (function (Myrecord) {console.log (Myrecord); var audio = [] for (var i = 0; i < myrecord.length; i++) {//Judge upload User ID if (myrecord[i].attributes.name = = ' Myre 
  Cord_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)); 
 }); Get text Rafting bottle var querytext = new AV. 
 Query (' Todofolder '); 
 Query name is MyText querytext.equalto (' name ', ' MyText ') of the float bottle; Querytext.find (). Then (function (results) {var mytext = [] for (var i = 0; i < results.length; i++) {var quer y = new AV. 
  Query (' Todofolder '); Console.log (results[i].idQuery.get (results[i].id). Then (function (TODO) {//successfully obtained instance//data is the Todofold with ID 57328ca079bc44005c2472d0 Er object instance console.log (todo.attributes.plp_content) _this.data.mytext = _this.data.mytext.concat (Todo.att 
   Ributes.plp_content); 
  Console.log (_this.data.mytext)}, function (Error) {//exception handling}); 
 
 
 }}, function (Error) {}); 
  /** * Listening to music stop/wx.onbackgroundaudiostop (function () {console.log (' onbackgroundaudiostop ') _this.setdata ({ Isplaying:false}) Clearinterval (_this.timer)})}, Onready:function () {//title bar Wx.setnavigationbart Itle ({title: ' My Bottle '})},//Balloons display text content gotodisplay:function (e) {this.setdata ({isplaying:false}) C 
 Learinterval (This.timer)//array index var index = E.currenttarget.dataset.key; 
  Wx.showmodal ({title: ' content ', Content:this.data.mytext[index], Showcancel:false, success:function (res) { if (res.confirm) {console.log (' user clicks OK')}}},//Play audio Gotoplay:function (e) {var index = E.currenttarget.dataset.key; Console.log (This.data.audio[index])//Turn on Play animation Playrecord.call (this) wx.playbackgroundaudio ({dataUrl:this.data.au Dio[index], Title:this.data.audio[index], Coverimgurl: '}}})//Play animation function PlayRecord () {var _ 
 this = this; 
 This.setdata ({isplaying:true})//Microphone frame animation var i = 1; 
 This.timer = setinterval (function () {i++; 
 i = i% 5; 
_this.setdata ({j:i})}, 200); }

To check the data, please see the Leancloud document.

Demo Download: Demo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.