最近一直在学习微信小程序，小程序自带的组件有限，自己开发一些组件应用与项目，下面是一个自定义模态框的案例

1.第一步，这个应该比较简单了，创建一个组件，新建文件夹命名为components，在components文件夹中创建文件（文件类型为component）

（1）新建文件夹命名为components

（2）在components文件夹中创建文件（文件类型为component）

(3)命名为modal,会生成以下目录

2.准备工作已经做好，下面直接上代码

modal.wxml文件：

<view hidden='{{!isShow}}'>  <view class="modal">    <view class='modal-content'>      <view class='modal-top'>        <view class='header'>{{modalTitle}}</view>      </view>      <view class='modal-body'>        <text> {{modalMsg}}</text>      </view>      <view class='modal-footer'>        <text class='cancle' catchtap='_cancelEvent'>取消</text>        <text class='sure' catchtap='_confirmEvent'>确定</text>      </view>    </view>  </view></view>

由于个人写代码的习惯，习惯初始化一些公共样式：app.wxss

page{  font-size: 28rpx;}view,text,image,button,input,label,radio,picker,picker-view,slider,form,checkbox,swiper,button{  box-sizing: border-box;  font-family: "微软雅黑",Helvetica,Arial,sans-serif;}

modal.wxss文件

/* components/modal.wxss */.modal{  width:100%;  height: 100%;  background: rgba(0,0,0,0.5);  position: fixed;  top: 0;  left:0;}.modal-content{  width: 80%;  margin-left: 10%;  margin-top:200rpx;  min-height: 300rpx;  background: #fff;  position: relative;}.modal-top{  padding: 20rpx;  background: #f2f2f2;}.modal-body{   padding:20rpx;}.modal-footer{  padding: 20rpx;  border-top: 1px solid #f2f2f2;   position: absolute;   bottom: 0;  left:0;  width: 100%;  display: flex;  justify-content: flex-end;}.cancle{  width: 100rpx;height: 50rpx;  line-height: 50rpx;  border: 1px solid #f2f2f2;  text-align: center;  margin-right: 20rpx;  border-radius: 6rpx;}.sure{  width: 100rpx;height: 50rpx;  line-height: 50rpx;  text-align: center;  border-radius: 6rpx;  background: #f2f2f2;}

// components/modal.jsComponent({  /**   * 组件的属性列表   */  properties: {    modalHidden:{      type:Boolean,      value:true    },    modalMsg: {      type: String,      value: ' ',    },    modalTitle: {      type: String,      value: ' ',    }  },  /**   * 组件的初始数据   */  data: {  },  /**   * 组件的方法列表   */  methods: {    //隐藏弹框    hideModal() {      this.setData({        isShow: !this.data.isShow      })    },    //展示弹框    showModal() {      this.setData({        isShow: !this.data.isShow      })    },    _cancelEvent() {      //触发取消回调      this.triggerEvent("cancelEvent")    },    _confirmEvent() {      //触发成功回调      this.triggerEvent("confirmEvent");    }  }})

3.组件已经建立好，下面就是调用了

 （1）在调用页面index.json文件中加入以下代码,声明调用哪个组件，即提供每个自定义组件的标签名和对应的自定义组件文件路径：

{  "usingComponents": {    "modal": "/components/modal"  }}

(2)index.wxml文件

<!-- 引用组件的页面模版 --><button bindtap="showDialog">点击显示</button><modal id='modal'     modalTitle='这里是标题'     modalMsg='我是内容'     bind:cancelEvent="_cancelEvent"      bind:confirmEvent="_confirmEvent"></modal>

(3)index.js

const app = getApp()Page({  data: {  },  onReady: function () {    //获得modal组件    this.modal= this.selectComponent("#modal");  },  showDialog() {    this.modal.showModal();  },  _cancelEvent() {    console.log('你点击了取消');    this.modal.hideModal();  },  //确认事件  _confirmEvent() {    console.log('你点击了确定');    this.modal.hideModal();  }})

一个简单的自定义组件已经做好了

初学小程序，如有错误请指出