小程序-自定义组件

组件化开发已经是一个趋势了，其隔离，复用等的特性必定使得其运用越来越广，小程序也提供了自定义组件的功能，为了加深记忆，写一篇博文便于记忆

先看看最终效果

我这里自定义了一个弹窗：
接下来直接上步骤吧

1.新建component目录，以及commonDialog组件文件，上图最直观了

2.看看各个文件的内容

commonDialog.json文件
{
  "component": true,//表示这是一个组件
  "usingComponents": {}//如果当前组件有引用到其它组件，这里写组件的路径
}


commonDialog.wxml文件，这个文件就是组件的布局文件
 <view class='container'>
  <view class='content'>
    <text class='title'>{{dialogTitle}}</text>
    <text class='text'>{{dialogText}}</text>
    <view class='button_layout'>
      <button class='button_sure' type='primary' catchtap='_confirmEvent'>{{sureText}}</button>
      <button class='button_cancle' type='warn'>{{cancleText}}</button>
    </view>
  </view>
</view>

 commonDialog.js文件
 Component({
  /**
   * 组件的属性列表
   */
  properties: {
    dialogTitle:{
      type: String,
      value:'标题'
    },

    dialogText: {
      type: String,
      value: '标题'
    },

    sureText: {
      type: String,
      value: '标题'
    },

    cancleText: {
      type: String,
      value: '标题'
    }

  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
     _cancelEvent() {
      //触发取消回调
      this.triggerEvent("cancelEvent")
    },
  }
})

其中commonDialog.js ，commonDialog.wxml的属性对应关系如图

最后看commonDialog.wxss文件

.container{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.content{
  width: 100%;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title{
  font-size: 50rpx;
  color: black;
}

.text{
  font-size: 40rpx;
  color: gray;
   margin-top: 20rpx;
}

.button_layout{
  width: 80vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 50rpx;
}

.button_sure{
  padding-left: 100rpx;
  padding-right: 100rpx;
 
}

.button_cancle{
  padding-left: 100rpx;
  padding-right: 100rpx;
}

好了，到此一个简单的组件制作完毕，还没有添加点击事件之类的，这个后面在补充

3.组件的使用

1.在需要使用组件的页面page.json文件里，配置组件的路径

2.直接在需要使用组件的 page.wxml中使用即可

3.那么点击事件怎么从组建传递到page呢

组建wxml如下图

组建的js文件内容如下

page页面的wxml如下图

page的js文件内容如下

好了，至此一个简单的组件就完成了