【四：录音功能】微信小程序（全部代码）开发跑步App+音乐播放器

本来想要就此封笔，但是最近觉得要找点事情干，所以还是写一写吧。同时调整了下以前的一些代码，比如一些的UI设计增进了。代码已经全部更新于Github，欢迎大家去查看：
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git

为了方便直接在贴子里上传一份：

WeChat-Fucking_Running-master (1).zip

更新之后的页面更加漂亮了。新增了一个录音的模块，由于主页面index.wxml只能放五个导航条，所以就只能整合在最后一个影音里面了。不然的话无处安放也是讨嫌！

新增的录音功能

更新的代码如下，是在picture.js这个文件下作的更改：

1. //index.js
2. //获取应用实例
3. var app = getApp()
4. Page({
5.   data: {
6. source:"https://159.203.250.111/Carly.png",
7.   },
8.  
9.  
10. listenerButtonChooseImage: function() {
11.       var that = this;
12.       wx.chooseImage({
13.           count: 1,
14.           //original原图，compressed压缩图
15.           sizeType: ['original'],
16.           //album来源相册 camera相机 
17.           sourceType: ['album', 'camera'],
18.           //成功时会回调
19.           success: function(res) {
20.                 //重绘视图
21.               that.setData({
22.                   source: res.tempFilePaths,
23.                              })
24.  
25.           }
26.       })
27.   },
28.  
29.   yulan:function(){
30.     var that=this;
31.     wx.previewImage({
32.    current: 'https://119.29.74.46/myphoto/5.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张
33.   urls: [ 'https://119.29.74.46/myphoto/0.jpg',
34.    'https://119.29.74.46/myphoto/1.jpg',
35.     'https://119.29.74.46/myphoto/2.jpg',
36.      'https://119.29.74.46/myphoto/3.jpg',
37.       'https://119.29.74.46/myphoto/4.jpg',
38.        'https://119.29.74.46/myphoto/5.jpg',
39.        'https://119.29.74.46/myphoto/6.jpg',
40.         'https://119.29.74.46/myphoto/7.jpg'],
41.   success: function(res){
42.  
43.  
44.   },
45.   fail: function() {
46.     // fail
47.   },
48.   complete: function() {
49.     // complete
50.   }
51. })
52.   },
53.  
54.  
55. Startrecord:function(){
56. wx.startRecord({
57.   success: function(res) {
58.     var tempFilePath = res.tempFilePath
59.       wx.playVoice({
60.       filePath: tempFilePath
61.     })
62.  
63.     setTimeout(function() {
64.         //暂停播放
65.       wx.pauseVoice()
66.     }, 5000)
67.   }
68. })
69.  
70.  
71.     setTimeout(function(){
72.       wx.stopVoice()
73.     }, 5000)
74. },
75.  
76.  
77.  
78. Stoprecord:function(){
79.     var that=this;
80.    wx.stopRecord({
81.     success: function(res){
82.       // succes
83.     },
84.     fail: function() {
85.       // fail
86.     },
87.     complete: function() {
88.       // complete
89.     }
90.   })
91. },
92.  
93.  
94.  
95.  
96.  
97.  
98.  
99.    onShareAppMessage: function () {
100.     return {
101.       title: '欢迎使用颜大傻牌跑步计',
102.       desc: '将你的战绩分享到~~~',
103.       path: '/page/picture/picture.js'
104.     }
105.   },
106. })

另外还有在wxml中加入修改：

1. <view class="header" style="flex-direction:row;">
2.  
3. <!--通过数据绑定的方式动态获取js数据-->
4. <image src="{{source}}" mode="fulltoFill"  class="pic"/>
5.  
6. <!--监听按钮-->
7. <button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">点击我选择相册</button>
8.  
9. <button bindtap="yulan"><image src="/resources/yulan.png"  class="swiper"></image></button>
10.  
11.  
12. <view>
13. <button bindtap="Startrecord" class="button_anniu"> 开始录音 </button>
14. <button bindtap="Stoprecord" class="button_anniu">  停止录音</button>
15. </view>
16.  
17.  
18.  
19. </view>

另外，不好意思的声明下：录音功能是做出来了，但是调试的时候，录音是可以完美进行的，但是涉及到播放控制的时候我就直接GG了。API一点都不配合我。

就这三个API 死命的不配和我，恨不得生啖其肉，如果他有

能用，但是之后我就不知道它存哪儿去了！！

UI一直是我的心头病，没办法，强迫症一出来，几头牛都拉不回来。不把尺寸搞得误差在像素级根本不能让我心安。所以这次改了几个地方。然后感觉好多了。

代码更新如下：

<music.wxml>

1. <view class="header" style="flex-direction:row;">
2.  
3.  
4. <swiper  class="swiper" indicator-dots="{{indicatorDots}}"
5.   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
6.     <swiper-item wx:for="{{imgUrls}}">
7.       <image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
8.     </swiper-item>
9. </swiper>
10.  
11. <view class="img">
12. <image src="/resources/Carly.png" class="pic" ></image>
13.  
14. </view>
15.  
16. <view class="img1">
17. <block wx:for="{{song}}" wx:key="id" class="audio">
18. <block wx:if="{{item.musicid==count}}"> 
19. <audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true">
20. <view style="display:flex;flex-direction: row;">
21. <button  type="primary" bindtap="audioPlay" class="button_anniu">Start</button>
22. <button type="primary" bindtap="audioPause" class="button_anniu">Pause</button>
23. <button type="primary" bindtap="audio14" class="button_anniu">To14s</button>
24. <button type="primary" bindtap="audioStart" class="button_anniu">Stop</button>
25. </view>
26.  
27. <view style="display:flex;flex-direction: row;">
28. <button type="primary" bindtap="NextMusic" class="button_anniu"> Next </button>
29. <button  type="primary" bindtap="LastMusic" class="button_anniu">Last</button>
30. </view>
31. </audio>
32. </block>
33. </block>
34. </view>
35.  
36.  
37.  
38. </view>
39.  

《music.wxss》

1. .banner{
2.     width: 750rpx;
3.     height: 80rpx;
4.    position: center;
5.  
6. }
7.  
8. .img{
9.     position: center;
10.     padding-left: 100rpx;
11.     padding-right: 100rpx;
12. }
13.  
14. .img1{
15.     position: center;
16.     padding-left: 75rpx;
17.  
18. }
19.  
20. .pic{
21.     width: 550rpx;
22.     height:  640rpx;
23.  
24. }
25.  
26.  
27.  
28. .button_anniu{
29.     width: 150rpx;
30.     height: 100rpx;
31.   margin: 50rpx auto; 
32.     display: flex;
33.  
34. }
35.  
36. .swiper{
37.     width: 750rpx;
38.     height: 80rpx;
39.     position: center;
40. }
41.  

效果图，好看了点吧

主页的改进，我觉得很好看咯！！而且加了滚条，可以滚出三个图。

看看效果咯，漂亮啊

还是需要改进啊。没办法了。我现在是下午七点三十四，但是我还没吃饭，有点饿！所以我待会还要走到东边去，大概半个小时，然后再去我亲爱的，亲爱的韵苑大酒店吃一顿，如果有黄焖鸡米饭就大运临头了，没有的话吃一份卤鸭饭就行了。。

时间

小程序算是假期的一个调剂吧，不过，貌似被我成功的带到大三下了。主要是不能持续产出，我会松懈，所以寒假的氛围其实还是蛮好的。在学校就贝格忠东喜支配了。心塞，虽然效率高了不少，但是还是想家了。最想家的一次。

今天是正式开学的第一天，我得证明下：

我这是自虐。。。每次看到都会想家。。。我不是恋家的人啊

全部功能的展示（还是以前的，这次改动太小了 不截图了）。飞速，可能看不清，如果有兴趣请你看文章！

知识传递力量，技术无国界，文化改变生活！