微信小程序点击喜欢+1 自定义组件

效果:

1  新建

先新建一个盛放所有组件的目录components

再在components下新建第一个组件的目录like, 这样的两级目录我们先新建好

编写组件的第一步,如同我们编写的page页面一样,我们首先给个这组件新建几个文件,我们利用小程序开发工具新建功能快速新建组件所需要的全部文件

右击\新建\Component

 

2   使用

必须在页面里引用组件

在页面的.json文件里,加入一个配置usingComponents, 指定使用哪些组件,

usingComponents接收的是一个对象,{}里面的是键值对"key":"value",

key是给组件起的名字(一般为xxx-cmp)   

value是组件的路径(注:需要使用绝对路径,不然会报错)

{
    "usingComponents": {
        "v-like": "/components/like/index"
    }
}

使用我们引用的组件

在wxml里面就像用<view><imgae>一样,

<v-like></v-like>

即可在页面显示组件的内容了

 

3 组件编写

components中的wxml:

<!-- components/like/index.wxml -->
<view class="container" bind:tap="onLike">
    <!-- 如果要在双引号里面再表示字符串的时候要用单引号,否则会报错 -->
    <!-- <image src="{{like?'images/like.png':'images/like@dis.png'}}" /> -->   
    <image src="{{like?yesSrc:noSrc}}" />
    <text>{{count}}</text>
</view>

components中的wxss:

/* components/like/index.wxss */
.container{
    /* inline-flex消除块状并自适应 */
    display: inline-flex;
    flex-direction: row;
    /* 设置完偏移量后数字会显示不完整,是因为组件高度不够高,这时需要设置一下padding */
    padding: 10rpx;
}
.container image{
    width: 32rpx;
    height: 28rpx;
}
.container text{ 
    font-family: "PingFfangSC-Thin"; 
    font-size: 24rpx;
    /* 设置完偏移量和padding可能数字还是不是理想效果,不需要再次增大bottom,是因为文字都会间距,消除间距 */
    line-height: 24rpx;
    color: #bbbbbb;
    /* 设置一个偏移量relative   bottom往上偏移,  left往右偏移 */
    position: relative;
    bottom: 10rpx;
    left: 6rpx;
}

注意:在自定义组件中只有font  color样式可以被继承,

components/like/index.josn

{
  "component": true,
  "usingComponents": {}
}

components/like/index.js

// components/like/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    like: {// 属性名
      type: Boolean, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      //value: false, // 属性初始值（可选），如果未指定则会根据类型选择一个
      // observer: function(newVal, oldVal, changedPath) {
      //    // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
      //    // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      // }
    },
    count:{
      type: Number,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // like: true,
    // count: 9,
    yesSrc: 'images/like.png',
    noSrc: 'images/like@dis.png',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLike: function (event) {
      //this.properties.like就可以拿到properties下的任何值了,ES6后把var换成了let来定义变量,
      //区别:let允许你声明一个作用域被限制在块级中的变量,语句或者表达式,
      //     var它声明的的变量只能是全局或者整个函数块的
      let like = this.properties.like
      let count = this.properties.count
      //count值的变化取决说like,如果like为真(当前状态是喜欢),点击一下为不喜欢,就要-1,否则+1
      count = like?count-1:count+1
      //数据绑定更新
      this.setData({
        count:count,
        like:!like
      })
    }
  }
})

更多属性介绍:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/