微信小程序仿微信漂流瓶

看到微信里有个漂流瓶.试了一下.

这里是用leancloud做后台.涉及到语音和文字的储存,查询.

技术点:

1.微信小程序开发之录音机 音频播放 动画 (真机可用)

2.微信小程序开发之用户系统 一键登录 获取session_key和openid

3.微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置

4.微信小程序开发之本地图片上传(leancloud)

下面带图说模块:

1.主页面

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

2.编辑漂流瓶内容

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

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

3.捡一个漂流瓶

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

1.海星

2.捡到了漂流瓶

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

2.2 获取到语音.直接播放

3.我的瓶子

语音和文字两类.

下面上代码:

1.index.wxml

[html]  view plain  copy

 

1. <!--index.wxml-->  
2. <view class="play-style">  
3.   <view class="playstyle">  
4.     <image class="img" src="{{getSrc}}" bindtap="get"></image>  
5.     <text>捡一个</text>  
6.   </view>  
7.   <view class="leftstyle">  
8.     <image class="img" src="{{throwSrc}}" bindtap="throw"></image>  
9.     <text>扔一个</text>  
10.   </view>  
11.   <view class="rightstyle">  
12.     <image class="img" src="{{mySrc}}" bindtap="mine"></image>  
13.     <text>我的瓶子</text>  
14.   </view>  
15. </view>  

 2.index.wxss

[css]  view plain  copy

 

1. /**index.wxss**/  
2.   
3. page {  
4.   background-image: url('http://ac-nfyusptg.clouddn.com/0ee678402f996ad3a5c2.gif');  
5.   background-attachment: fixed;  
6.   background-repeat: no-repeat;  
7.   background-size: cover;  
8. }  
9.   
10. .play-style {  
11.   position: fixed;  
12.   bottom: 50rpx;  
13.   left: 0;  
14.   height: 240rpx;  
15.   width: 100%;  
16.   text-align: center;  
17.   color: #fff;  
18. }  
19.   
20. .playstyle {  
21.   position: absolute;  
22.   width: 160rpx;  
23.   height: 160rpx;  
24.   top: 10rpx;  
25.   left: 295rpx;  
26. }  
27.   
28. .leftstyle {  
29.   position: absolute;  
30.   width: 160rpx;  
31.   height: 160rpx;  
32.   top: 10rpx;  
33.   left: 67.5rpx;  
34. }  
35.   
36. .rightstyle {  
37.   position: absolute;  
38.   width: 160rpx;  
39.   height: 160rpx;  
40.   top: 10rpx;  
41.   right: 67.5rpx;  
42. }  
43.   
44. .img {  
45.   width: 160rpx;  
46.   height: 160rpx;  
47. }  

3.index.js

[javascript]  view plain  copy

 

1. <span style="font-size:24px;">//index.js  
2. //获取应用实例  
3. var app = getApp()  
4. const AV = require('../../utils/av-weapp.js');  
5. Page({  
6.   data: {  
7.     getSrc: "../../images/a.png",//捡一个  
8.     throwSrc: "../../images/b.png",//扔一个  
9.     mySrc: "../../images/c.png"//我的  
10.   },  
11.   onLoad: function () {  
12.     const user = AV.User.current();  
13.     // 调用小程序 API，得到用户信息    
14.     wx.getUserInfo({  
15.       success: ({userInfo}) => {  
16.         console.log(userInfo)  
17.         // 更新当前用户的信息    
18.         user.set(userInfo).save().then(user => {  
19.           // 成功，此时可在控制台中看到更新后的用户信息    
20.           this.globalData.user = user.toJSON();  
21.         }).catch(console.error);  
22.       }  
23.     });  
24.   },  
25.   //捡一个  
26.   get: function () {  
27.     console.log("捡一个")  
28.     //随机去后台拉取一个录音  
29.     wx.navigateTo({  
30.       url: '../get/get',  
31.       success: function (res) {  
32.         // success  
33.       },  
34.       fail: function () {  
35.         // fail  
36.       },  
37.       complete: function () {  
38.         // complete  
39.       }  
40.     })  
41.   },  
42.   //扔一个  
43.   throw: function () {  
44.     console.log("扔一个")  
45.     wx.navigateTo({  
46.       url: '../write/write',  
47.       success: function (res) {  
48.         // success  
49.       },  
50.       fail: function () {  
51.         // fail  
52.       },  
53.       complete: function () {  
54.         // complete  
55.       }  
56.     })  
57.   },  
58.   //我的瓶子  
59.   mine: function () {  
60.     console.log("我的瓶子")  
61.     wx.navigateTo({  
62.       url: '../mine/mine',  
63.       success: function (res) {  
64.         // success  
65.       },  
66.       fail: function () {  
67.         // fail  
68.       },  
69.       complete: function () {  
70.         // complete  
71.       }  
72.     })  
73.   }  
74. })  
75. </span>  

 4.write.js

[html]  view plain  copy

 

1. //index.js  
2. //获取应用实例  
3. var app = getApp()  
4. const AV = require('../../utils/av-weapp.js');  
5. Page({  
6.   data: {  
7.     getSrc: "../../images/a.png",//捡一个  
8.     throwSrc: "../../images/b.png",//扔一个  
9.     mySrc: "../../images/c.png"//我的  
10.   },  
11.   onLoad: function () {  
12.     const user = AV.User.current();  
13.     // 调用小程序 API，得到用户信息    
14.     wx.getUserInfo({  
15.       success: ({userInfo}) => {  
16.         console.log(userInfo)  
17.         // 更新当前用户的信息    
18.         user.set(userInfo).save().then(user => {  
19.           // 成功，此时可在控制台中看到更新后的用户信息    
20.           this.globalData.user = user.toJSON();  
21.         }).catch(console.error);  
22.       }  
23.     });  
24.   },  
25.   //捡一个  
26.   get: function () {  
27.     console.log("捡一个")  
28.     //随机去后台拉取一个录音  
29.     wx.navigateTo({  
30.       url: '../get/get',  
31.       success: function (res) {  
32.         // success  
33.       },  
34.       fail: function () {  
35.         // fail  
36.       },  
37.       complete: function () {  
38.         // complete  
39.       }  
40.     })  
41.   },  
42.   //扔一个  
43.   throw: function () {  
44.     console.log("扔一个")  
45.     wx.navigateTo({  
46.       url: '../write/write',  
47.       success: function (res) {  
48.         // success  
49.       },  
50.       fail: function () {  
51.         // fail  
52.       },  
53.       complete: function () {  
54.         // complete  
55.       }  
56.     })  
57.   },  
58.   //我的瓶子  
59.   mine: function () {  
60.     console.log("我的瓶子")  
61.     wx.navigateTo({  
62.       url: '../mine/mine',  
63.       success: function (res) {  
64.         // success  
65.       },  
66.       fail: function () {  
67.         // fail  
68.       },  
69.       complete: function () {  
70.         // complete  
71.       }  
72.     })  
73.   }  
74. })  

5.get.js

[javascript]  view plain  copy

 

1. //get.js  
2. //获取应用实例  
3. var app = getApp()  
4. const AV = require('../../utils/av-weapp.js');  
5. Page({  
6.   data: {  
7.     getPngSecond: "http://ac-ejx0nsfy.clouddn.com/6f50e35237db20a4edd6.png",//海星  
8.     getPngThrid: "http://ac-ejx0nsfy.clouddn.com/15070f4f33bb6090ec1b.png",//漂流瓶  
9.     isGet: true,//是否捡到了漂流瓶  
10.     maskDisplay: 'none',  
11.     slideAnimation: {},  
12.     slideHeight: 0,  
13.     slideRight: 0,  
14.     slideWidth: 0,  
15.     isPlaying: false,  
16.     plp: [],  
17.     j: 1,  
18.     contentText: ''  
19.   },  
20.   onLoad: function () {  
21.     var _this = this;  
22.     //获取屏幕宽高    
23.     wx.getSystemInfo({  
24.       success: function (res) {  
25.         var windowWidth = res.windowWidth;  
26.         var windowHeight = res.windowHeight;  
27.         console.log('windowWidth: ' + windowWidth)  
28.         console.log('windowHeight: ' + windowHeight)  
29.         _this.setData({  
30.           imageWidth: windowWidth,  
31.           imageHeight: windowHeight,  
32.           slideHeight: res.windowHeight * 0.6,  
33.           slideRight: res.windowWidth,  
34.           slideWidth: res.windowWidth * 0.80  
35.         })  
36.       }  
37.     })  
38.     var num = Math.round(Math.random() * 9 + 1);  
39.     console.log(num)  
40.     if (num > 5) {  
41.       //捡到漂流瓶  
42.       this.setData({  
43.         bgPng: this.data.getPngThrid,  
44.         isGet: true  
45.       })  
46.     } else {  
47.       //海星  
48.       this.setData({  
49.         bgPng: this.data.getPngSecond,  
50.         isGet: false  
51.       })  
52.     }  
53.   
54.     //去后台拉取漂流瓶数据,1.获取到文字,左边弹框;2.获取到语音,播放  
55.     //1.获取语音  
56.     var _this = this;  
57.     //获取语音漂流瓶  
58.     var queryRecord = new AV.Query('_File');  
59.     queryRecord.find().then(function (myrecord) {  
60.       console.log(myrecord);  
61.       var audio = []  
62.       for (var i = 0; i < myrecord.length; i++) {  
63.         //判断上传用户身份  
64.         if (myrecord[i].attributes.name == 'myRecord_dzp') {  
65.           _this.data.plp = _this.data.plp.concat(myrecord[i].attributes.url);  
66.         }  
67.         console.log(myrecord[i].attributes.url);  
68.       }  
69.     }).catch(function (error) {  
70.       alert(JSON.stringify(error));  
71.     });  
72.   
73.     //2.获取文本  
74.     var queryText = new AV.Query('TodoFolder');  
75.     // 查询 name 是 myText 的漂流瓶内容  
76.     queryText.equalTo('name', 'myText');  
77.     queryText.find().then(function (results) {  
78.       var mytext = []  
79.       for (var i = 0; i < results.length; i++) {  
80.         var query = new AV.Query('TodoFolder');  
81.         console.log(results[i].id)  
82.         query.get(results[i].id).then(function (todo) {  
83.           // 成功获得实例  
84.           // data 就是 id 为 57328ca079bc44005c2472d0 的 TodoFolder 对象实例  
85.           console.log(  
86.             todo.attributes.plp_content  
87.           )  
88.           _this.data.plp = _this.data.plp.concat(todo.attributes.plp_content);  
89.         }, function (error) {  
90.           // 异常处理  
91.         });  
92.       }  
93.   
94.     }, function (error) {  
95.     });  
96.   
97.   
98.     /**  
99.  * 监听音乐停止  
100.  */  
101.     wx.onBackgroundAudioStop(function () {  
102.       console.log('onBackgroundAudioStop')  
103.       _this.setData({  
104.         isPlaying: false  
105.       })  
106.       clearInterval(_this.timer)  
107.     })  
108.   },  
109.   onReady: function () {  
110.     // 标题栏  
111.     wx.setNavigationBarTitle({  
112.       title: '捡一个'  
113.     })  
114.   },  
115.   //右上角关闭按钮  
116.   onClick: function () {  
117.     var _this = this;  
118.     //捡到海星,return  
119.     if (!this.data.isGet) return  
120.     this.setData({  
121.       isGet: false  
122.     })  
123.     console.log("打开漂流瓶")  
124.     //随机获取一个索引  
125.     var index = parseInt(Math.random() * this.data.plp.length)  
126.     var content = this.data.plp[index]  
127.     if (content.indexOf("http://") == 0) {  
128.       wx.playBackgroundAudio({  
129.         dataUrl: _this.data.plp[index],  
130.         title: _this.data.plp[index],  
131.         coverImgUrl: ''  
132.       })  
133.       playRecord.call(_this)  
134.     } else {  
135.       _this.setData({  
136.         contentText: content  
137.       })  
138.       slideUp.call(_this);  
139.     }  
140.   },  
141.   //遮罩点击  侧栏关闭  
142.   slideCloseEvent: function () {  
143.     slideDown.call(this);  
144.   }  
145. })  
146.   
147. //侧栏展开  
148. function slideUp() {  
149.   var animation = wx.createAnimation({  
150.     duration: 600  
151.   });  
152.   this.setData({ maskDisplay: 'block' });  
153.   animation.translateX('110%').step();  
154.   this.setData({  
155.     slideAnimation: animation.export()  
156.   });  
157. }  
158.   
159. //侧栏关闭  
160. function slideDown() {  
161.   var animation = wx.createAnimation({  
162.     duration: 800  
163.   });  
164.   animation.translateX('-110%').step();  
165.   this.setData({  
166.     slideAnimation: animation.export()  
167.   });  
168.   this.setData({ maskDisplay: 'none' });  
169. }  
170.   
171. //播放动画  
172. function playRecord() {  
173.   var _this = this;  
174.   this.setData({  
175.     isPlaying: true  
176.   })  
177.   //话筒帧动画    
178.   var i = 1;  
179.   this.timer = setInterval(function () {  
180.     i++;  
181.     i = i % 5;  
182.     _this.setData({  
183.       j: i  
184.     })  
185.   }, 200);  
186. }  

6.mine.js

[javascript]  view plain  copy

 

1. <span style="font-size:24px;">//mine.js  
2. //获取应用实例  
3. var app = getApp()  
4. const AV = require('../../utils/av-weapp.js');  
5. Page({  
6.   data: {  
7.     audio: [],//录音集合  
8.     mytext: [],//文本集合  
9.     isPlaying: false,//是否在播放语音  
10.   },  
11.   onLoad: function () {  
12.     var _this = this;  
13.     //获取语音漂流瓶  
14.     var queryRecord = new AV.Query('_File');  
15.     queryRecord.find().then(function (myrecord) {  
16.       console.log(myrecord);  
17.       var audio = []  
18.       for (var i = 0; i < myrecord.length; i++) {  
19.         //判断上传用户身份  
20.         if (myrecord[i].attributes.name == 'myRecord_dzp') {  
21.           _this.data.audio = _this.data.audio.concat(myrecord[i].attributes.url);  
22.         }  
23.         console.log(myrecord[i].attributes.url);  
24.       }  
25.     }).catch(function (error) {  
26.       alert(JSON.stringify(error));  
27.     });  
28.     //获取文本漂流瓶  
29.     var queryText = new AV.Query('TodoFolder');  
30.     // 查询 name 是 myText 的漂流瓶内容  
31.     queryText.equalTo('name', 'myText');  
32.     queryText.find().then(function (results) {  
33.       var mytext = []  
34.       for (var i = 0; i < results.length; i++) {  
35.         var query = new AV.Query('TodoFolder');  
36.         console.log(results[i].id)  
37.         query.get(results[i].id).then(function (todo) {  
38.           // 成功获得实例  
39.           // data 就是 id 为 57328ca079bc44005c2472d0 的 TodoFolder 对象实例  
40.           console.log(  
41.             todo.attributes.plp_content  
42.           )  
43.   
44.           _this.data.mytext = _this.data.mytext.concat(todo.attributes.plp_content);  
45.           // console.log(_this.data.mytext)  
46.         }, function (error) {  
47.           // 异常处理  
48.         });  
49.       }  
50.   
51.     }, function (error) {  
52.     });  
53.   
54.   
55.     /**  
56.     * 监听音乐停止  
57.     */  
58.     wx.onBackgroundAudioStop(function () {  
59.       console.log('onBackgroundAudioStop')  
60.       _this.setData({  
61.         isPlaying: false  
62.       })  
63.       clearInterval(_this.timer)  
64.     })  
65.   
66.   },  
67.   onReady: function () {  
68.     // 标题栏  
69.     wx.setNavigationBarTitle({  
70.       title: '我的瓶子'  
71.     })  
72.   },  
73.   //弹框显示文本内容  
74.   gotoDisplay: function (e) {  
75.     this.setData({  
76.       isPlaying: false  
77.     })  
78.     clearInterval(this.timer)  
79.     //数组索引  
80.     var index = e.currentTarget.dataset.key;  
81.     wx.showModal({  
82.       title: '内容',  
83.       content: this.data.mytext[index],  
84.       showCancel: false,  
85.       success: function (res) {  
86.         if (res.confirm) {  
87.           console.log('用户点击确定')  
88.         }  
89.       }  
90.     })  
91.   },  
92.   //播放音频  
93.   gotoPlay: function (e) {  
94.     var index = e.currentTarget.dataset.key;  
95.     console.log(this.data.audio[index])  
96.     //开启播放动画  
97.     playRecord.call(this)  
98.     wx.playBackgroundAudio({  
99.       dataUrl: this.data.audio[index],  
100.       title: this.data.audio[index],  
101.       coverImgUrl: ''  
102.     })  
103.   }  
104. })  
105.   
106.   
107. //播放动画  
108. function playRecord() {  
109.   var _this = this;  
110.   this.setData({  
111.     isPlaying: true  
112.   })  
113.   //话筒帧动画    
114.   var i = 1;  
115.   this.timer = setInterval(function () {  
116.     i++;  
117.     i = i % 5;  
118.     _this.setData({  
119.       j: i  
120.     })  
121.   }, 200);  
122. }</span>  

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

代码太多了.我这里只贴了 js代码.

还是去下载吧.demo代码下载