### 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}; ~~~