Music组件的初步开发

首先先新建Music组件


微信截图_20181121011210.png

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

properties:{
  img:String,
  content:String
}

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

wxml页面编写如下


  
  
  

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:{} //此时里面可以清空,因为已经继承了里面的属性

你可能感兴趣的:(Music组件的初步开发)