首先先新建Music组件

微信截图_20181121011210.png

由于跟服务器请求的数据只有标题和唱片封面，因此可以在index.js数据中如下定义

properties:{
  img:String,
  content:String
}

data:{
  pauseSrc:'images/playwating.png',
  playSrc:'images/playerplaying.png'
}

wxml页面编写如下

<view>
  <image src="{{img}}" />
  <image src="{{playSrc}}" />
  <img src="images/music@tag.png" />
</view>

img,content为需要在服务器请求下来的数据
最后的样子大概是这样

微信截图_20181121012014.png

由于后面的句子，散文组件的样式都差不多，如果重复定义数据会增加工作量，这时候就需要用到behavior这个东西，用来继承
首先我们要新建一个js文件，我们命名为classic-heh.js

let classicBeh = Behavior({
  propertier:{
        img:String,
        content:String                  //定义公共样式
    }
})

export {classicBeh} //导出行为

因此我们组件中index.js中的文件就可以改写成这样了

import {classicBeh} from '../classicBeh.js
behaviors:[classicBeh] //有s的原因是因为不仅仅只能继承一个behaviors
propertier:{} //此时里面可以清空，因为已经继承了里面的属性