微信小程序开发之『侧边栏滑动』特效

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

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