小程序自定义组件模态框

之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！
好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！
本文章就带你学会小程序自定义组件，请先坐稳，开车了~~

要做自定义组件是一个模态框具体效果如下

效果图

Step1

我现在的目录结构是我现在的开发中的项目，你们可以在你们的项目中的根目录中新建一个components文件夹，用于存放我们以后开发中的所用组件，今天我们的目的是实现一个模态弹框组件，因此，我们在components组件中新建一个modal文件夹来存放我们的弹窗组件，在modal下右击新建Component并命名为modal后，会生成对应的json wxml wxss js4个文件，也就是一个自定义组件的组成部分，此时你的项目结构应该如下图所示：

目录结构

Step2

组件初始化工作准备完成，接下来就是组件的相关配置，首先我们需要声明自定义组件，也就是将modal.json 中 component字段设为true

{
 "component":true,    // 自定义组件声明
 "usingComponents": {}  // 可选项，用于引用别的组件
}

其次，我们需要在 modal.wxml文件中编写弹窗组件模版，在 modal.wxss 文件中加入模态弹组件样式，它们的写法与页面的写法类似，我就不赘述，直接贴代码啦~
modal.wxml 文件如下：

<view class='modal_box' hidden='{{isShow}}' >
  <view class='cont_box'>
    <view class='modal_head'>{{titles}}</view>
    <view class='modal_content'><rich-text nodes="{{content}}"></rich-text></view>
    <view class='modal_footer'>
      <text catchtap='_cancelEvent'>{{cancelText }}</text>
      <text catchtap='_confirmEvent'>{{confirmText }}</text>
    </view>
  </view>
</view>

modal.wxss 文件如下：

.modal_box {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal_box .cont_box {
  top: 30%;
  left: 70rpx;
  position: absolute;
  z-index: 9999;
  width: 610rpx;
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: white;
}
.modal_head {
  font-size: 32rpx;
  color: #d32d25;
  height: 80rpx;
  font-weight:bold;
  line-height: 80rpx;
}
.modal_box .modal_content {
  font-size: 30rpx;
  height: 140rpx;
  color: #666;
  padding: 0 50rpx;
  line-height:44rpx;
}
.modal_footer {
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0%;
  box-sizing: border-box;
  border-top: 2rpx solid #ddd;
}
.modal_footer text {
  flex: 1;
  color: #d32d25;
}
.modal_footer text:nth-child(2) {
  color: white;
  background-color: #d32d25;
}
.red{
  color: #D32D25;
}

step3

组件的结构和样式都有了，还缺少什么呢，没错，还缺js，眼睛比较犀利的同学，可能已经发现了我们在modal.wxml文件中的会有一些比如{{ isShow }}、{{ title }}这样的模版变量，还定义了_cancelEvent和_confirmEvent两个方法，其具体实现就是在modal.js中。

modal.js是自定义组件的构造器，是使用小程序中Component构造器生成的，调用Component构造器时可以用来指定自定义组件的属性、数据、方法等，具体的细节可以参考一下官方的文档

下面我通过代码注释解释一下构造器中的一些属性的使用：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    // 弹窗标题
    titles: {
      type: String,
      value: '提示'
    },
    // 弹窗内容
    content: {
      type: String,
      value: '很遗憾你没有传上数据过来'
    },
    // 弹窗确认按钮文字
    confirmText: {
      type: String,
      value: '确定',
    },
    // 弹窗取消按钮文字
    cancelText: {
      type: String,
      value: '取消'
    }
  },
  lifetimes: { //组件生命周期
    attached() {
      let datas = this.data.content;
      this.setData({   //组件的生命周期里可以对传过来的数据进行处理
        content: "<div style='color:red;'>22122212</div>"
      })
    }
  },

  data: {
    //这里是一些组件内部数据
    // 弹窗显示控制
    isShow: false
  },
  methods: { // 这里是一个自定义方法
    //展示弹框 || 隐藏弹框
    showDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    _cancelEvent() {
      //触发取消回调
      this.showDialog();
      this.triggerEvent("cancelEvent")
    },
    _confirmEvent() {  //触发成功回调
      this.showDialog();
      this.triggerEvent("confirmEvent");
    }
  }
})

step4

截至目前为止，你应该完成了一个自定义弹窗组件的大部分，可是你保存后并没有发现任何变化，因为我们还需要在 index.wxml 文件中引入它！

首先需要在 index.json 中引入组件：

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

然后我们在 index.wxml 中引入它，并增加我们自定义的一些值，如下

<!-- index.wxml-->
<modal 
      id="modal"
      content="我是xxx<span class='red'>这是红色字体</span>"
      bind:cancelEvent="_cancelEvent"
      bind:confirmEvent="_confirmEvent"
      >
</modal>

注意：这里的content的内容传字符串也可以传html的语法,因为我是用微信 rich-text 富文本组件来解释，不能用<img />这些标签，具体用法可以看小程序 rich-text 富文本组件
嗯哪，还差最后一步， index.js 配置，没错，这个也很简单，我就复制粘贴了

//index.js
//获取应用实例
const app = getApp()
Page({
/**
* 生命周期函数--监听页面初次渲染完成
*/

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

总结

现在，你已经基本掌握了小程序中的自定义组件开发技巧，怎么样，是不是很棒，应该给自己点个赞，打个call。总体来说，小程序推出自定义组件后，感觉方便了很多，还没有 get 的小伙伴们，赶紧学习学习，以后多用组件化开发，就不会那么难受了，加油哦~

小程序自定义组件 模态框

要做自定义组件是一个模态框具体效果如下 效果图