uni-app写小程序音乐播放器

音乐播放小程序

uni-app开发,学习成本低开发小程序还是比较好用的

uni-app框架,这个框架现阶段还是有不少问题的,项目中遇到的几点
1,v-show不能正常使用->绑定一个display:none的样式根据条件判断实现v-show功能
2,axios好像不支持或者使用方式和vue中使用不同,也有提供的请求api
3,因为小程序没有dom的原因在标签上绑定ref无效,不过对于自定义的组件还是好使的

vuex的代码和组件的代码以及用到的图片音频放在GitHub中地址
目前这个小程序的歌词部分没有做完,有兴趣的朋友可以下载代码自己做试试看歌词也放在github中

总体来说对于小程序的api和组件还不认识几个的我来说也能写一个小程序,或者说写起来就跟写html一样一些问题网上查也大部分能解决,这个框架目前发展感觉还不错在社区提出问题下面也会有人讨论官方也经常有回答,希望以后uni-app发展越来越好吧


实现音乐播放功能
原生微信有一个wx.createInnerAudioContext(),uni-app对应的叫uni.createInnerAudioContext()
都是一个道理,这个api可以将当前scr属性指定的音乐进行播放暂停等操作,不过要注意的是如果每点击一此播放,就创建一个createInnerAudioContext()并给他添加src属性,设置它自动播放,当实现暂停功能式,会发现停不下来,原来的音乐还在播放,而当前点击的音乐也会开始播放,那是因为,每次点击添加的createInnerAudioContext()实例都是一个新的实例,如果确保全局只有一createInnerAudioContext()实例,对音乐的src属性的改变就反映在这个实例上,就可以实现音乐的暂停和播放等功能了

发布了117 篇原创文章 · 获赞 146 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/printf_hello/article/details/105365596