音乐播放器制作（通过数据绑定切换图片）

isPlayingMusic?detail.music.coverImg:detail.headImgSrc是用JS的真值表达式来实现图片切换

 <!--index.wxml-->
 <image class="head-image" src="{{isPlayingMusic?detail.music.coverImg:detail.headImgSrc}}"></image>
 <image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic?'/images/stop.png':'/images/music.png'}}"></image>

　　

<!--index.js-->
var postsData = require('../../../data/posts-data.js')  //先引入后台模拟数据
Page({
  data: {
    isPlayingMusic: false
  },
onLoad: function (option) {
    var postId = option.id;
    var postData = postsData.postList[postId];//这个方法是用来定义每个新闻列表对应的顺序是哪个新闻内容
    this.setData({
      detail: postData //渲染到对应data中就是postData
    });
onMusicTap: function (event) {
    var currentPostId = this.data.currentPostId;
    var postData =postsData.postList[currentPostId];
    var isPlayingMusic = this.data.isPlayingMusic;//先获取播放状态
    if (isPlayingMusic) {
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic: false
      })
    } else {
      wx.playBackgroundAudio({
        dataUrl: postData.music.url,
        title: postData.music.title,
        coverImgUrl: postData.music.coverImg //coverImgUrl存储封面只有真机上才显示。
      })
      this.setData({
        isPlayingMusic: true
      })
    }
}
})

　　

var local_database = [
    {
        headImgSrc: "/images/Catoon50.jpeg",
        postId: 0,
        music:{
          url: "http://music.163.com/song/media/outer/url?id=5268113.mp3",
          title: "无心睡眠-Edison",
          coverImg:"https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=3dd7c7b91ece36d3b6098b625b9a51e2/3801213fb80e7bec32853882242eb9389b506b71.jpg",
        },
    },
    {
        
        headImgSrc: "/images/Catoon10.jpeg",
        postId: 1,
        music:{
          url:"http://music.163.com/song/media/outer/url?id=36496695&userid=131363136.mp3",
          title: "Love Yourself-Justin",
          coverImg: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526306083331&di=0f612495915e54ad6490af758db9f7d6&imgtype=0&src=http%3A%2F%2Fp3.music.126.net%2F3Sw-gRHowAFr46IXa2uDbQ%3D%3D%2F18690598160792939.jpg"
        }
    }, 
    {
        headImgSrc: "/images/h1.jpg",
        postId: 2,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=485051616&userid=131363136.mp3",
          title: "Love Yourself-LVLV",
          coverImg: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526306184333&di=b74486e3b83c3cc4a0bccabfc660c5c5&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F8a5f016573e9839cc4d462db6b63efa8d738f40a.jpg"
        }
    },
] 
module.exports = {
    postList: local_database //渲染到对应data中就是posts_key:[]、postList是相应指定的属性变量

}

　　

2018-05-14学习收获、每天进步一点，加油，不要放弃！