【微信小程序】自定义组件（一）

对于一些我们常用到自定义的样子和页面，可以将其进行封装成组件，方便我们使用时进行调用，节省重复代码。本文主要介绍将自定义弹框进行封装，在需要的页面中进行调用。

国际惯例：先上弹框样式

一个删除弹框，并且按钮上需绑定事件，在调用的页面中可进行触发。本文中我添加我再想想上的事件，另一按钮事件绑定相同，不一一赘述。

先来说组件部分：

1、新建组件文件，在根目录文件下新建components文件并在里面新建一个popup弹框文件，将WXML、JS、WXSS、JSON依次添加。当添加JSON时会报错，popup.json中添加"component": true，无需在app.json的pages:[]中添加页面路径。

2、在popup.wxml中写组件的页面

<view class="spec-panel">
  <view class="spec-box">
    <view class="spec-box-title">
      <text>温馨提示</text>
    </view>
    <view>
      <text class='font-size1'>确认删除浏览记录吗？</text>
    </view>
    <view  class='horizontal'>
      <view class='item padding-top-10' >
        <text class='font-size2'>确认删除</text>
      </view>
      <view class='item style1' > 
        <text class='style2' bindtap="hideDel">我再想想</text>
      </view>
    </view>
  </view>
  <view class="spec-panel-bg" bindtap="hideDel" />
  <slot />
</view>

3、popup.wxss样式

.spec-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
}

.spec-panel .spec-panel-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.spec-panel .spec-box {
  width: 620rpx;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
}

.spec-panel .spec-box .spec-box-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.horizontal{
  display: flex;
  flex-direction: row;
}

.item{
  flex: 1; 
}

.padding-top-10{
  padding: 10px 0 0 0;
}

.style1{
  padding: 10px 0 0 0; 
  text-align: right;
}

.style2{
  background: #FF3766; 
  border: 1px solid #FF3766; 
  padding: 5px 10px; 
  border-radius: 5px; 
  color: #fff;
  font-size: 14px;
}

.font-size1{
  font-size: 0.8rem; 
  color: #000;
}

.font-size2{
  border: 1px solid #FF3766; 
  padding: 5px 10px; 
  border-radius: 5px; 
  color: #FF3766;
  font-size: 14px;
}

4、popup.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
   //隐藏删除弹框
    hideDel () {
      const myEventDetail = {} // detail对象，提供给事件监听函数
      const myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
  }
})

页面调用部分：

1、在需调用页面的JSON文件中使用组件将组件路径啊写上

2、调用页面的wxml部分

<view wx:if="{{isShow}}">
<!-- 当popup.js中的myevent事件触发时，会触发调用页面中的onMyEvent事件-->
<!-- <component-popup bind:myevent="onMyEvent"> -->
  <component-popup bindmyevent="onMyEvent">
  </component-popup>
</view>

3、调用页面的JS

data: {
    isShow:false,
  },
onMyEvent () {
    this.setData({
      isShow: false
    })
  }

码字辛苦，点个赞再走呗