组件化开发

页面创建与配置

创建存放组件的components文件夹,在components下新建组件like文件夹,然后新建componentindex.jsindex.jsonindex.wxmlindex.wxss文件。

在页面的配置文件index.json中引入组件:

{
  "usingComponents": {
    "v-like":"components/like/index"
  },
  "navigationBarTitleText": "首页"
} 

之后,在index.wxml中使用组件<v-like />

app.wxss中设置全局的样式,其中page默认是全局元素,对它进行设置类似于对body设置样式。
组件可以继承全局样式中的font-*color属性,其他的不继承。
页面可以继承绝大部分全局样式。

WXSS样式设置

消除文字空白间距

.container image {
  width: 36rpx;
  height: 24rpx;
  font-size: 24rpx;
  /* 文字自身存在空白间距,消除间距 */
  line-height: 24rpx;
  /* 相对定位 */
  position: relative;
  left: 6rpx;
  bottom: 10rpx;
}

flexboxdisplay自身的取值:flexinline-flex,Safari的webkit内核浏览器,必须加上display: -webkit-flex;

组件的事件处理

使用bindtap绑定处理事件,在组件下index.js文件的methods内写事件方法。

<view bind:tap="isLike" class="container">

<view catch:tap="isLike" class="container">

bind事件绑定,不会阻止冒泡事件向上冒泡。catch事件绑定,可以阻止冒泡事件向上冒泡。

组件properties属性

组件的属性列表

<view bind:tap="isLike" class="container">
  <text>{{count}}</text>
</view>

properties: {
  like: {
    // 必填
    type: Boolean,
      // 下面的内容选填
      value: false, //默认值
        observer: function() {

        }
  },
  count: {
    type: Number
  }
}

组件的方法列表

methods: {
  isLike: function(e) {
    let like = this.properties.like;
    let count = this.properties.count;
    count = like ? like - 1 : like + 1;
    this.setData({
      count: count,
      like: !like
    })
  }
}

自定义组件

可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。

使用postman测试调用数据API。