微信小程序爬坑记之自定义组件Component

前言

一个项目中对于频繁使用的场景，出于代码的可读性，扩展性以及后期维护的考虑，最好将这部分代码抽离成组件，便于复用，本篇文章将把上篇内容中的导航条定义成组件。点我查看官方文档

组件定义与普通页面是差不多的，也是由 wxml, wxss, js, json 四个文件组成。首先在项目src目录下创建components文件夹，作为放置组件的文件，在该文件夹在创建一个selection-bar文件作为导航组件，如下图 loading...

编写组件页面

wxml

<!-- 导航选择栏 -->
<view class="nav row-around">
  <block wx:for="{{ navList }}" wx:key="{{ item.state }}">
    <view class="item text-center">
      <text class="{{ item.state === state ? 'select' : '' }}" data-state="{{ item.state }}" bind:tap="handleChoose">{{ item.name }}</text>
    </view>
  </block>
</view>

wxss

.nav {
  height: rpx(90);
  border-bottom: rpx(2) solid #ccc;

  .item {
    width: 20%;
    height: rpx(32);
    color: #AEAEAE;
    font-size: rpx(30);
    position: relative;
    z-index: 99;
  }

  .select {
    font-size: rpx(32);
    color: white;
    font-weight: 600;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      margin-top: rpx(55);
      width: 85%;
      border-bottom: rpx(8) solid white;
      border-radius: rpx(4);
    }
  }
}

组件js交互

properties是组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。这里定义的 navList 是页面中渲染的导航列表是一个数组， state表示当前选中的状态。
data是组件内部的数据，和 properties 一同用于组件的模板渲染。
methods中定义组件的方法，包括事件响应函数和任意的自定义方法，这里定义的 handleChoose 方法用于导航的选择，要想在其他页面即引入该组件的页面用该方法，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。比如这里指定的事件名为 state detail对象是state即选中的导航状态。

js

Component({
  properties: {
    navList: {
      type: Array,
      value: [],
    },
    state: {
      type: String,
      value: ''
    }
  },
  data: {},
  methods: {
    handleChoose({currentTarget}) {
      const {state} = currentTarget.dataset;
      this.triggerEvent('state', {state});
    }
  },
  // Lifecycle method.
  created() {
  },
  attached() {
  },
  ready() {
  },
  moved() {
  },
  detached() {
  },
});

在其他页面引入该组件

上述已经把组件的基本功能定义好了，下一步就是在页面引入，只需要在要使用的页面的json文件中的 usingComponents 对象中加上引用组件名称及其路径如下，这样就可以在该页面中使用组件了。

{
  "navigationBarTitleText": "引入组件的页面",
  "usingComponents": {
    "selection-bar": "/components/selection-bar/index"
  }
}

页面中组件的使用

在页面的合适位置使用组件，该组件有自定义的两个属性，navList 和 state，还有一个方法 handleChoose；navList是定义在data的航行数组的名字，state可以给定一个初始状态。

<view class="page">
  <!-- 页面导航 -->
  <selection-bar navList="{{ navList }}" state="{{ state }}" bind:state="handleChoose"></selection-bar>
</view>

Page({
  data: {
    navList: [
      {
        name: '导航一',
        state: 'ONE'
      },
      {
        name: '导航二',
        state: 'TWO'
      }
    ],
    state: 'ONE',
  },

  // 导航一/导航二
  handleChoose: (e) => {
    // 此处通过e.detail可以获取组件传来的函数监听对象即state
    const {state} = e.detail;
    // 当前状态等于导航状态时不做操作
    if (state === page.data.state) {
      return;
    }
    page.setData({
      state
    });
  },
}

总结

组件页面和普通页面没什么区别，主要是父子组件之间的事件的传递，是在子组件中通过this.triggerEvent(‘signEvent’, { }) 来发送，然后在父组件的js文件中来响应事件。