微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

开篇语

昨晚发了一篇:

《简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 》

然后上午起来吃完午饭之后,我就准备继续开工的,但是突然的,想要看B站。然后在一股神奇力量的推动下,我找到了它:

《克苏鲁的呼唤 2005 580P中字 经典名篇完美还原》


然后促成了吃完午饭之后,沉迷其中不可自拔。下午写到四点半,才最终完成了我的近四千字的心血之作:

简年16: 初涉《克苏鲁的呼唤》--克苏鲁神话体系入门

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

可惜明珠暗投:

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

心灰意冷之下,百无聊赖的打开简书,然后惊喜的发现,这篇文章上了首页今日看点了。这算是一个慰藉?还是很不错的,所以促使了我来写这一篇文章,也就是接着这篇火热的文章的续集,Bug修复 以及更深层次的开发!

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

正文

本次由于态度没摆正,晚上又跟我的指路明灯学长聊天到八点多。然后又跟我的迷途羔羊说了会话!然后花了半个多小时测评一个免费的VPN (具体情形请去看我的另一篇文章)再来搞开发就是十点半了。时间不是很多,所以调教好的Bug也不多,但是还是有的!

一、音乐界面最上层的滑动banner

原本采用自己写函数的方式来触发,后来改用官方组件--swiper 进行调控:

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

改进代码如下(github未更新,请读者自行更改)


《---music.wxml》
<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>

《---music.js》

Page(
{
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
}, data: { count:1,
imgUrls: [
'http://159.203.250.111/banner1.png',
'http://159.203.250.111/banner2.png',
'http://159.203.250.111/banner3.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000, },
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0) }, changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}, onShareAppMessage: function () {
return {
title: '欢迎使用颜大傻牌音乐播放器',
desc: '将你正在听的歌分享到~~~',
path: '/page/music/music.js'
}
}, })

二、增置了上一首下一首切歌功能

目前还在调试,官方给定的逻辑选择模块我还没吃透。敬请见谅!目前有了一点头绪,代码在下面。(PS:最新消息,制作成功!哈哈。可以流利的播放各种音乐了!!!我还在制作目录,请诸君稍后!)

《---music.wxml》

<block wx:for="{{song}}" wx:key="id">
<block wx:if="{{item.musicid==count}}"> <audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true" > <button plain="true" type="primary" bindtap="audioPlay" class="button_anniu">开始播放</button>
<button type="primary" bindtap="audioPause" class="button_anniu">暂停</button>
<button type="primary" bindtap="audio14" class="button_anniu">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart" class="button_anniu">停止</button>
<button bindtap="NextMusic" class="button_anniu"> 上一首 </button>
<button bindtap="LastMusic" class="button_anniu"> 下一首 </button>
</audio>
</block>
</block>

《---music.js》



  data: {

    song:[{
musicid:1,
poster:'http://159.203.250.111/Carly.png',
name:'Call_Me_Baby',
author: 'Carly_Rae_Jepsen',
src:'http://159.203.250.111/Call_Me_Baby.mp3',
}, {
musicid:2,
poster:'http://159.203.250.111/carly.png',
name:'Good_Time',
author: 'Carly_Rae_Jepsen',
src:'http://159.203.250.111/Good_Time.mp3',
}, { musicid:3,
poster:'http://159.203.250.111/five1.png',
name:'Maps',
author: 'Marron 5',
src:'http://159.203.250.111/maps.mp3',
}, { musicid:4,
poster:'http://159.203.250.111five2.png',
name:'Animals',
author: 'Marron 5',
src:'http://159.203.250.111/Animals.mp3',
}, { musicid:5,
poster:'http://159.203.250.111/five3.png',
name:'Sugar',
author: 'Marron 5',
src:'http://159.203.250.111/Sugar.mp3',
}, ], count:1,
imgUrls: [
'http://159.203.250.111/banner1.png',
'http://159.203.250.111/banner2.png',
'http://159.203.250.111/banner3.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000, },
audioPlay: function () {
this.audioCtx.play()
},
audioPause: function () {
this.audioCtx.pause()
},
audio14: function () {
this.audioCtx.seek(14)
},
audioStart: function () {
this.audioCtx.seek(0) }, NextMusic: function(e) {
this.setData({
count: this.data.count + 1
})
}, LastMusic: function(e) {
this.setData({
count: this.data.count - 1
})
}, onShareAppMessage: function () {
return {
title: '欢迎使用颜大傻牌音乐播放器',
desc: '将你正在听的歌分享到~~~',
path: '/page/music/music.js'
}
}, })

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 Bug修复

结束语

小程序算是假期的一个调剂吧,不然可能就真的天天看小说,然后逛逛B站了。然后,我觉得我有必要show一下我的工作环境,最近都有点不想走人家,天天在家写代码了~~~~说好的今天去一个姑奶奶家,可是起床的时候已经是十点多了。外边还在下着蒙蒙小雨~没辙,今天是腐败堕落的一天!!!

但是明天我就要去同学聚会了,在县城,娘的,还要七点多起来搭车!虽然对像是一群男的。但是也还是要洗个澡换件衣服出门!这又把我的起床时间提前到六点半了 ** T_T ** 心塞!争取明天把电脑带上,然后找时间休息的时候继续出文吧!寒假快结束了。保持的好习惯多保留一天是一天啊!


大神的作品就不安利了。我自己写完的这些,我觉得应该比之前说的一些膜拜的作品要优秀了。

真正的主体(想看完整的代码,猛戳下面的链接吧!!)在这:

简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器

另外,对于有*外出的需求的朋友,我刚才写了一篇免费180天优秀VPN的文章可供借鉴:

简年17: 免费的VPN 以及几种网络链接的测评

![我的工作环境,我觉得我越来越有程序员的气息了
~yeah yeah yeah](//upload-images.jianshu.io/upload_images/3810775-8a865a8876f6418c.gif?imageMogr2/auto-orient/strip)

个人宣言

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

上一篇:高大上网站-CSS3总结1-图片2D处理以及BUG修复


下一篇:Unity中内嵌网页插件UniWebView