### 1.先建組件components： ### index.js: ~~~ const audio = wx.getBackgroundAudioManager(); Component({ /** * 組件的屬性列表 */ properties: { //在外面的musci.wxml中會用到，所以需要定義。 title: String, url: String }, /** * 組件的初始數據 */ data: { //一開始是停止播放 isPlay: false }, /** * 組件的方法列表 */ methods: { onMusic() { if (this.data.isPlay) { this.setData({ isPlay: false }) audio.pause(); } else { audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay: true }) } } }, attached(){ //點播放，開始 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //點暫停，不播放 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //關掉的時候，不播放 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //歌曲放完的時候，自動停止 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } }) ~~~ ### index.wxml: ~~~ <view class="music"> <image class="pictrue {{isPlay?'rotate':''}}" src="../../images/banner.png" mode="" ></image> //判斷圖片是否播放，播放的時候需要旋轉！ <image class="play" src="{{isPlay?'../../images/play.png':'../../images/pause.png'}}" bind:tap="onMusic" ></image> //是否播放，圖標會變化； </view> music.js: const app = getApp() import {local_data} from "../../data/local"; //得引用音樂數據 Page({ data: { title:"巴啦啦小魔仙", content:"變身！！", music:local_data.music //寫入數據中 }, onLoad(){ console.log(local_data); } }) ~~~ ### music.json: ~~~ { "usingComponents": { "v-music":"/components/music/index", //定義組件， "v-movie":"/components/movie/index" } } ~~~ ### music.wxml: ~~~ <v-music title="{{music.title}}" url="{{music.url}}"></v-music> //music 下面的名字和地址 data,local.js: var local_data ={ music: { url: "http://music.163.com/song/media/outer/url?id=571338279", title: "往后余生" } }; export {local_data}; ~~~