小程序组件化开发之component组件

我们在上篇博文里面介绍了小程序的template模板，这里介绍一下component组件。
我们创建template模板的时候，只创建了wxml和wxss文件，并没有json和js文件，而且数据交换以及事件都是在调用的时候操作。今天介绍的component组件则有自己的业务逻辑，可以看做一个独立的page页面，里面也有js和json文件。简单来说，如果只是展示，使用template就足够了，如果涉及到的业务逻辑交互比较多，那就最好使用component组件了。

创建组件

和template一样，也是在根目录创建一个存放组件的目录，里面创建二级目录，用于区分不同的组件，然后创建对应的页面文件，如下：

组件文件内容

我们还是以弹窗为例来介绍。
popup.wxml文件：

<view class="wx-popup" hidden="{{!isShow}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
      <text class="btn-ok" bindtap='_success' class='confirm'>{{btn_ok}}</text>
    </view>
  </view>
</view>

可以看到里面不需要任何标签。

wxss文件：

wxss文件内容和template的wxss文件内容一样，这里不在赘述

popup.json文件：

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

这里是固定格式，把component 设为true

wxjs文件：

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    isShow:{
      type: Number,
      value:1
    },
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 弹窗取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    confirmText: {
      type: String,
      value: '确定'
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框
    showPopup() {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancelEvent() {
      //触发取消回调==和外界交换的事件是cancel
      this.triggerEvent("cancel");
    },
    _confirmEvent() {
      //触发成功回调==和外界交换的事件是confirm
      this.triggerEvent("confirm");
    }
  }
})

组件创建完成。

父模板使用组件

index.json文件引入组件（不需要单独引入wxml和wxss文件）：

{
  "usingComponents": {
    "popup": "/component/popup/popup"
  }
}

前面的popup是自己给组件起的名字，在wxml里面使用：

index.wxml使用组件：

<popup id='popup' 
    title='标题'
    content='我是内容' 
    cancelText='取消' 
    confirmText='确定'
    bind:cancel="cancel" 
    bind:confirm="confirm">
</popup>

上面id的内容就是json文件定义的组件名字。
title、content等都是组件的属性值，这些值可以在父组件里面修改：

this.popup.setData({'title':'我是标题'});

bind 后面是组件的事件。在调用组件的js文件里面使用此方法,如下：

  cancel(){
    console.log('点击了取消');
    this.popup.setData({'title':'我是标题'});
  },
  confirm() {
    console.log('点击了确定');
  },
  showPopup() {
    this.popup.showPopup();
  },

组件的定义及使用就是这样的，非常简单。