小程序学习：自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

本文要创建一个效果如下图的组件，由一个心形图片和右上角的数字构成。

1、创建自定义组件

（1）首先在根目录下新建文件夹components，components下新建like文件夹，like下新建index页面；
（2）在 index.json 文件中进行自定义组件声明:

{
  "component": true
}

（3）在 index.wxml 文件中编写组件模板，在 index.wxss 文件中加入组件样式，它们的写法与页面的写法类似;

编写组件样式时，需要注意以下几点：

• 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
• 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
• 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
• 继承样式，如 font 、 color ，会从组件外继承到组件内。
• 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

#a {
} /* 在组件中不能使用 */
[a] {
} /* 在组件中不能使用 */
button {
} /* 在组件中不能使用 */
.a > .b {
} /* 除非 .a 是 view 组件节点，否则不一定会生效 */

（4）在index.js 文件中，需要使用 Component 来注册组件，并提供组件的属性定义、内部数据和自定义方法:

Component({
  behaviors: [],
  
  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,//类型（必填）
      value: ''//属性初始值（选填），默认布尔值初始为false，数字初始为0
      observer: function(newVal, oldVal, changedPath){
			//属性值变化时的回调函数（选填），也可以写成在methods段中定义的方法名字符串，如'_propertyChange'
			//newVal是新设置的数据，oldVal是旧数据
		}
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() { },
    moved() { },
    detached() { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod() {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})

下面具体实现。

• index.wxml:

<view class="container" bind:tap="onLike">
  <image src="{
  {like?yes_url:no_url}}" />
   <text>{
  {count}}</text> 
</view>

组件中最好不要留有无意义的间距，例如文字的行间距，设置line-height为文字大小可消除行间距。

• index.wxss:

.container{
  display: flex;
  flex-direction: row;
  /* 必须指定宽度，否则会出现移动 */
  /* width:120rpx;  */
  padding:10rpx;
}

.container text{
  font-size:24rpx;
  font-family: "PingFangSC-Thin";//苹果手机的默认字体是“苹方”，而安卓是“思源”。
  color: #bbbbbb;
  line-height:24rpx;//用于消除文字的上下间距
  position:relative;//相对定位
  bottom:10rpx;
  left:6rpx; 
}

.container image{
  width: