微信小程序进阶-自定义组件

引言

随着小程序越来越像APP，自带的组件和第三方的一些组件不能满足当前的业务需求，这时就需要我们自己去配置可以重复利用的组件。

自定义组件

组件的创建

1. 在项目的根目录创建components文件夹（主要是为了项目结构清晰）；
2. 在上面的文件夹里再创建一个文件夹，文件夹的名字就是组件的名字；
3. 选中组件的文件夹，右键选择Component并点击；
4. 在组件文件夹里会自动生成4个文件，和页面的文件一样，具体看下面的frame组件。

组件文件结构

json文件

1.配置为组件
"component": true
2.引用其他组件
"usingComponents": {}

xml文件

配置组件的布局，具体看下面：

<view class="parent">
  <!-- 整体框架的背景 -->
  <view class="header_bg">
    <image class="top-image" mode="widthFix" src="../images/wd_bg.png" />
  </view>
  <!-- wrap -->
  <view class="content-wrap">
    <!-- 配置状态栏 -->
    <view class="top-bar {{position == 0 ? '' : 'top-bar-title-middle'}}" style="margin-top: {{marginTop}}px;">
      <image wx:if="{{visiable}}" class="top-bar-image" src="../images/top_return.png" mode="aspectFit" bindtap="onClick"/>
      <view class="title {{position == 0 ? 'top-bar-title-left' : ''}}">{{title}}</view>
      <!-- 右边的无效的view，为了标题居中 -->
      <view wx:if="{{visiable}}" class="top-bar-image top-bar-image-right" />
    </view>
      
    <!-- content -->
    <slot></slot>
  </view>
</view>

wxss文件

配置组件的样式，具体看下面：

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.title {
  /* width: 100%; */
  height: 70rpx;
  font-size: var(--fs42);
  font-weight: 500;
  /* color: var(--defaultColor); */
  color: #fff;
  /* margin-top: 80rpx; */
  /* position: relative; */
  text-align: center;
  line-height: 70rpx;
}
.header_bg {
  width: 100vw;
  height: 583rpx;
  /* height: 100%; */
  position: absolute;
}
.top-image {
  width: 100%;
  height: 100%;
}
.content-wrap {
  position: relative;
  width: 100%;
}

.top-bar {
  position: relative;
  display: flex;
  flex: column;
  /* justify-items: center; */
  /* 垂直居中 */
  align-items: center; 
  width: 100%;
  /* height: 70rpx; */
  height: 32px;
  /* background-color: brown; */
}
.top-bar-title-left {
  margin-left: 30rpx;
}
.top-bar-title-middle {
  justify-content: center;
}

.top-bar-image {
  width: 34rpx;
  height: 34rpx;
  margin-left: 20rpx;
}

.top-bar-image-right {
  margin-right: 20rpx;
  /* background-color: chartreuse; */
}

js文件

组件的逻辑处理，具体看下面：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 标题栏标题的内容，不显示可以不设置值。
     */
    title: {
      type: String,
      value: ''
    },
    /** 返回按钮是否可见 */
    visiable: {
      type: Boolean,
      value: true
    },
    /**
     * 标题的位置，0：靠左；其他值居中
     */
    position: {
      type: Number,
      value: 0
    },
    distributed: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    marginTop: getApp().globalData.marginTop
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick() {
      console.log('frame#onClick start!!!');
      if (this.data.distributed) {
        this.triggerEvent('onBackListener');
      } else {
        wx.navigateBack({
          delta: 0,
        })
      }      
    }
  }
})

组件的使用

组件的引用

在需要使用组件的地方，在json文件里增加：
"frame": "../components/frame/frame"

配置组件

<frame title="XX" visiable="{{true}}" position="0" bind:onBackListener="onClickListener">
	<!-- 写入其它界面配置 -->
</frame>

转载请注明原著地址