相信最近大家對(duì)小程序是討論得熱火朝天吧！每個(gè)人都期望寫(xiě)出自己的小程序。

簡(jiǎn)易教程：微信小程序接入指南<<<<<通過(guò)閱讀小程序的簡(jiǎn)易教程，大概了解了appid的獲取和項(xiàng)目的創(chuàng)建了吧。

先讓我們通過(guò)一個(gè)小實(shí)例簡(jiǎn)單認(rèn)識(shí)一下微信小程序的整個(gè)項(xiàng)目流程，請(qǐng)結(jié)合簡(jiǎn)易教程進(jìn)行學(xué)習(xí)。

一、新建小程序項(xiàng)目

*填寫(xiě)自己appid，沒(méi)有id不能進(jìn)行手機(jī)預(yù)覽。?

二、先將以下三個(gè)文件分別復(fù)制到對(duì)應(yīng)的文件欄，ctrl+s保存編譯。（每次修改完記得保存養(yǎng)成習(xí)慣），只需加入三個(gè)文件，其余暫時(shí)不改動(dòng)。綠色解析部分先跳過(guò)，代實(shí)現(xiàn)功能后再查看。

wxss樣式表文件

.button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; }

解析： wxss是一種樣式語(yǔ)言，用于描述WXML的組件樣式。 好比WXML是衣服，wxss是衣服的顏色等屬性。wxss涵蓋css的大部分特性。學(xué)過(guò)HTML/CSS的大概都了解style語(yǔ)句 。button組件

index.wxml頁(yè)面結(jié)構(gòu)文件

<button class="button-style" type="primary" bindtap="listenerButtonPlay">播放</button> <button class="button-style" type="primary" bindtap="listenerButtonPause">暫停</button> <button class="button-style" type="primary" bindtap="listenerButtonSeek">設(shè)置播放進(jìn)度</button> <button class="button-style" type="primary" bindtap="listenerButtonStop">停止播放</button> <button class="button-style" type="primary" bindtap="listenerButtonGetPlayState">獲取播放狀態(tài)</button> 解析：wxml 存放整個(gè)頁(yè)面的基礎(chǔ)組件和事件系統(tǒng)

index.js腳本文件 var app = getApp() Page({data:{},//播放listenerButtonPlay:function(){wx.playBackgroundAudio({dataUrl: 'http://ws.stream.qqmusic.qq.com/5106429.m4a?fromtag=46',title:'薛之謙',//圖片地址地址coverImgUrl:'http://i.gtimg.cn/music/photo/mid_album_90/a/F/000QgFcm0v8WaF.jpg'})},//監(jiān)聽(tīng)button暫停按鈕listenerButtonPause:function(){wx.pauseBackgroundAudio({});console.log('暫停播放')},/*** 播放狀態(tài)*/listenerButtonGetPlayState:function(){wx.getBackgroundAudioPlayerState({success: function(res){// success//duration 選定音頻的長(zhǎng)度（單位：s），只有在當(dāng)前有音樂(lè)播放時(shí)返回console.log('duration:' + res.duration)console.log('currentPosition:' + res.currentPosition) //status 播放狀態(tài)（2：沒(méi)有音樂(lè)在播放，1：播放中，0：暫停中）console.log('status:' + res.status) console.log('downloadPercent:' + res.downloadPercent) //dataUrl 歌曲數(shù)據(jù)鏈接，只有在當(dāng)前有音樂(lè)播放時(shí)返回 console.log('dataUrl:' + res.dataUrl)},fail: function() {// fail},complete: function() {// complete}})},/*** 設(shè)置進(jìn)度*/listenerButtonSeek:function(){wx.seekBackgroundAudio({position: 40})},/*** 停止播放*/listenerButtonStop:function(){wx.stopBackgroundAudio({})console.log('停止播放')},onLoad:function(options){// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù) /** * 監(jiān)聽(tīng)音樂(lè)播放 */ wx.onBackgroundAudioPlay(function() {// callbackconsole.log('onBackgroundAudioPlay')})/*** 監(jiān)聽(tīng)音樂(lè)暫停*/wx.onBackgroundAudioPause(function() {// callbackconsole.log('onBackgroundAudioPause')})/*** 監(jiān)聽(tīng)音樂(lè)停止*/wx.onBackgroundAudioStop(function() {// callbackconsole.log('onBackgroundAudioStop')})} })

通過(guò)編譯就可以看到自己的代碼顯示情況了，相信聽(tīng)到歌曲的你此刻的心情必然無(wú)比的激動(dòng)吧。再重新回到第二欄查看綠色字體的解析，更好的了解微信小程序api的接入方法和各個(gè)組建的配置吧！

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门实例--音乐播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。