開篇語
寒假發(fā)了一篇練手文章，不出意外地火了：
《簡年15： 微信小程序（有始有終诗芜，全部代碼）開發(fā)---跑步App+音樂播放器 》
后來又發(fā)了BUG修復(fù)的版本，出乎意料的火了：
簡年18： 微信小程序（有始有終埃疫，全部代碼）開發(fā)---跑步App+音樂播放器 Bug修復(fù)
后來又新增了一個模塊伏恐，嗯，這個也火了：
微信小程序（有始有終栓霜，全部代碼）開發(fā)--- 新增模塊： 圖片選取以及拍照功能
現(xiàn)在開學(xué)了翠桦，我又寫了點東西：
微信小程序（有始有終，全部代碼）開發(fā)--- 新增【錄音】以及UI改進
正文
一胳蛮、UI改進
本來想要就此封筆销凑，但是最近覺得要找點事情干，所以還是寫一寫吧仅炊。同時調(diào)整了下以前的一些代碼斗幼，比如一些的UI設(shè)計增進了。代碼已經(jīng)全部更新于Github抚垄，歡迎大家去查看：
https://github.com/HustWolfzzb/WeChat-Fucking_Running.git
更新之后的頁面更加漂亮了蜕窿。新增了一個錄音的模塊，由于主頁面index.wxml只能放五個導(dǎo)航條呆馁，所以就只能整合在最后一個影音里面了桐经。不然的話無處安放也是討嫌！
新增的錄音功能
更新的代碼如下浙滤，是在
picture.js這個文件下作的更改：
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
source:"http://159.203.250.111/Carly.png",
},
listenerButtonChooseImage: function() {
var that = this;
wx.chooseImage({
count: 1,
//original原圖次询，compressed壓縮圖
sizeType: ['original'],
//album來源相冊 camera相機
sourceType: ['album', 'camera'],
//成功時會回調(diào)
success: function(res) {
//重繪視圖
that.setData({
source: res.tempFilePaths,
})
}
})
},
yulan:function(){
var that=this;
wx.previewImage({
current: 'http://119.29.74.46/myphoto/5.jpg', // 當前顯示圖片的鏈接，不填則默認為 urls 的第一張
urls: [ 'http://119.29.74.46/myphoto/0.jpg',
'http://119.29.74.46/myphoto/1.jpg',
'http://119.29.74.46/myphoto/2.jpg',
'http://119.29.74.46/myphoto/3.jpg',
'http://119.29.74.46/myphoto/4.jpg',
'http://119.29.74.46/myphoto/5.jpg',
'http://119.29.74.46/myphoto/6.jpg',
'http://119.29.74.46/myphoto/7.jpg'],
success: function(res){
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
Startrecord:function(){
wx.startRecord({
success: function(res) {
var tempFilePath = res.tempFilePath
wx.playVoice({
filePath: tempFilePath
})
setTimeout(function() {
//暫停播放
wx.pauseVoice()
}, 5000)
}
})
setTimeout(function(){
wx.stopVoice()
}, 5000)
},
Stoprecord:function(){
var that=this;
wx.stopRecord({
success: function(res){
// succes
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
onShareAppMessage: function () {
return {
title: '歡迎使用顏大傻牌跑步計',
desc: '將你的戰(zhàn)績分享到~~~',
path: '/page/picture/picture.js'
}
},
})
另外還有在wxml中加入修改：
<view class="header" style="flex-direction:row;">
<!--通過數(shù)據(jù)綁定的方式動態(tài)獲取js數(shù)據(jù)-->
<image src="{{source}}" mode="fulltoFill" class="pic"/>
<!--監(jiān)聽按鈕-->
<button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">點擊我選擇相冊</button>
<button bindtap="yulan"><image src="/resources/yulan.png" class="swiper"></image></button>
<view>
<button bindtap="Startrecord" class="button_anniu"> 開始錄音 </button>
<button bindtap="Stoprecord" class="button_anniu"> 停止錄音</button>
</view>
</view>
另外瓷叫，不好意思的聲明下：錄音功能是做出來了屯吊，但是調(diào)試的時候，錄音是可以完美進行的摹菠，但是涉及到播放控制的時候我就直接GG了盒卸。API一點都不配合我。
就這三個API 死命的不配和我次氨，恨不得生啖其肉蔽介，如果他有
能用，但是之后我就不知道它存哪兒去了！虹蓄！
二犀呼、UI改進
UI一直是我的心頭病，沒辦法薇组，強迫癥一出來外臂，幾頭牛都拉不回來。不把尺寸搞得誤差在像素級根本不能讓我心安律胀。所以這次改了幾個地方宋光。然后感覺好多了。
代碼更新如下：
<music.wxml>
<view class="header" style="flex-direction:row;">
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
<swiper-item wx:for="{{imgUrls}}">
<image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
</swiper-item>
</swiper>
<view class="img">
<image src="/resources/Carly.png" class="pic" ></image>
</view>
<view class="img1">
<block wx:for="{{song}}" wx:key="id" class="audio">
<block wx:if="{{item.musicid==count}}">
<audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true">
<view style="display:flex;flex-direction: row;">
<button type="primary" bindtap="audioPlay" class="button_anniu">Start</button>
<button type="primary" bindtap="audioPause" class="button_anniu">Pause</button>
<button type="primary" bindtap="audio14" class="button_anniu">To14s</button>
<button type="primary" bindtap="audioStart" class="button_anniu">Stop</button>
</view>
<view style="display:flex;flex-direction: row;">
<button type="primary" bindtap="NextMusic" class="button_anniu"> Next </button>
<button type="primary" bindtap="LastMusic" class="button_anniu">Last</button>
</view>
</audio>
</block>
</block>
</view>
</view>
《music.wxss》
.banner{
width: 750rpx;
height: 80rpx;
position: center;
}
.img{
position: center;
padding-left: 100rpx;
padding-right: 100rpx;
}
.img1{
position: center;
padding-left: 75rpx;
}
.pic{
width: 550rpx;
height: 640rpx;
}
.button_anniu{
width: 150rpx;
height: 100rpx;
margin: 50rpx auto;
display: flex;
}
.swiper{
width: 750rpx;
height: 80rpx;
position: center;
}
效果圖炭菌，好看了點吧
主頁的改進罪佳，我覺得很好看咯！黑低！而且加了滾條赘艳，可以滾出三個圖。
《index.wxml》
<view class="index">
<!--標題-->
<view class="header" >
<view style="flex-direction:row;"> <image class="icon" src="/resources/fuckrun.png" mode="aspectFill"/></view>
<view class="bigTitle">Fucking Running</view>
<view class="desc">The First Program of HustWolf and XNC</view>
</view>
<view class="body">
<view class="widget">
<block wx:for="{{pageNames}}">
<view class="widgets__item">
<navigator class="navigator-hover" url="{{item.id}}/{{item.id}}">{{item.name}}</navigator>
</view>
</block>
</view>
</view>
</view>
<scroll-view scroll-y="true" style="height: 630rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<image class="pic" src="/resources/run2.png" mode="aspectFill"/>
<image class="pic" src="/resources/run1.png" mode="aspectFill"/>
<image class="pic" src="/resources/run0.png" mode="aspectFill"/>
</scroll-view>
看看效果咯克握，漂亮啊
還是需要改進啊第练。沒辦法了。我現(xiàn)在是下午七點三十四玛荞，但是我還沒吃飯，有點餓呕寝！所以我待會還要走到東邊去勋眯，大概半個小時，然后再去我親愛的下梢，親愛的韻苑大酒店吃一頓客蹋，如果有黃燜雞米飯就大運臨頭了，沒有的話吃一份鹵鴨飯就行了孽江。讶坯。
時間
結(jié)束語
小程序算是假期的一個調(diào)劑吧，不過岗屏，貌似被我成功的帶到大三下了辆琅。主要是不能持續(xù)產(chǎn)出，我會松懈这刷，所以寒假的氛圍其實還是蠻好的婉烟。在學(xué)校就貝格忠東喜支配了。心塞暇屋，雖然效率高了不少似袁，但是還是想家了。最想家的一次。
今天是正式開學(xué)的第一天昙衅，我得證明下：
我這是自虐扬霜。。而涉。每次看到都會想家著瓶。。婴谱。我不是戀家的人啊
全部功能的展示（還是以前的蟹但，這次改動太小了 不截圖了）。飛速谭羔，可能看不清华糖，如果有興趣請你看文章！
個人宣言
知識傳遞力量瘟裸，技術(shù)無國界客叉，文化改變生活！
