官方从 1.6.3 开始对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！，现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！
接下来，就开始我们的学习吧！
一.具体实现
要做自定义组件，我们先定一个小目标，比如说我们在小程序中实现一下 通过wx.showModel调用中的所展示弹窗组件，基本效果图如下。
步骤一
我们初始化一个小程序，删掉里面的示例代码(或者新建一个文件)，并新建一个components文件夹，用于存放我们以后开发中的所用组件，今天我们的目的是实现一个 弹框 组件，因此，我们在components组件中新建一个Dialog文件夹来存放我们的弹窗组件，在Dialog下右击新建Component并命名为dialog后，会生成对应的json wxml wxss js4个文件，也就是一个自定义组件的组成部分，此时你的项目结构应该如下图所示：
步骤二
组件初始化工作准备完成，接下来就是组件的相关配置，首先我们需要声明自定义组件，也就是将dialog.json中component字段设为true：
{"component": true, // 自定义组件什么"usingComponents": {}// 可选项，用于引用其他组件}
其次，我们需要在dialog.wxml文件中编写弹窗组件模版，在dialog.wxss文件中加入弹窗组件样式
dialog.wxss 文件如下：
/* components/Dialog/dialog.wxss */.wx_dialog_container{z-index: 100;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;position: fixed;bottom: 0;top: 0;left: 0;background:rgba(0, 0, 0, 0.4);}.wx-dialog{width: 300px;height: auto;background: #fff;border-radius: 2px;}.wx-dialog-title{display: flex;justify-content: center;align-items: center;padding: 30rpx 20px;}.wx-dialog-content{display: flex;justify-content: center;align-items: center;font-size: 34rpx;color: #96959A;padding: 0 20px;margin-bottom: 20px;}.wx-dialog-footer{display: flex;justify-content: space-around;border-top: 1rpx solid #EEEBEE;}.wx-dialog-btn{flex: 1;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 32rpx;}.wx-dialog-btn:last-child{border-left: 1rpx solid #EEEBEE;color: #71C46A;}
它们的写法与页面的写法类似，我就不赘述，直接贴代码啦~
dialog.wxml文件如下：
<!--components/Dialog/dialog.wxml--><view class='wx_dialog_container' hidden="{{!isShow}}"><view class='wx-mask'></view><view class='wx-dialog'><view class='wx-dialog-title'>{{ title }}</view><view class='wx-dialog-content'>{{ content }}</view><view class='wx-dialog-footer'><view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view><view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view></view></view> </view>
步骤三
组件的结构和样式都有了，还缺少什么呢，没错，还缺js， 眼睛比较犀利的同学，可能已经发现了我们在dialog.wxml文件中的会有一些比如{{ isShow }}、{{ title }}这样的模版变量，还定义了_cancelEvent和_confirmEvent两个方法，其具体实现就是在dialog.js中。
dialog.js是自定义组件的构造器，是使用小程序中Component构造器生成的，调用Component构造器时可以用来指定自定义组件的属性、数据、方法等，具体的细节可以参考一下官方的文档。
下面我通过代码注释解释一下构造器中的一些属性的使用：
// components/Dialog/dialog.jsComponent({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持 },/*** 组件的属性列表* 用于组件自定义设置*/properties: { // 弹窗标题title: { // 属性名type: String,// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: '标题'// 属性初始值（可选），如果未指定则会根据类型选择一个}, // 弹窗内容 content: {type: String,value: '弹窗内容'}, // 弹窗取消按钮文字 cancelText: {type: String,value: '取消'}, // 弹窗确认按钮文字 confirmText: {type: String,value: '确定'}}, /*** 私有数据,组件的初始数据* 可用于模版渲染*/data: { // 弹窗显示控制isShow: false}, /*** 组件的方法列表* 更新属性和数据的方法与更新页面数据的方法类似*/methods: {/** 公有方法*///隐藏弹框 hideDialog() {this.setData({isShow: !this.data.isShow})}, //展示弹框 showDialog() {this.setData({isShow: !this.data.isShow})},/** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件*/_cancelEvent() {//触发取消回调this.triggerEvent("cancelEvent")},_confirmEvent() {//触发成功回调this.triggerEvent("confirmEvent");}}})
步骤四
截至目前为止，你应该完成了一个自定义弹窗组件的大部分，可是你保存后并没有发现任何变化，因为我们还需要在index.wxml文件中引入它！
首先需要在index.json中引入组件
{"usingComponents": {"dialog": "/components/Dialog/dialog"}}
然后我们在index.wxml中引入它，并增加我们自定义的一些值，如下
<view class="container"><dialog id='dialog' title='我是标题' content='恭喜你，学会了小程序组件' cancelText='知道了' confirm='谢谢你'bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></dialog><button type="primary" bindtap="showDialog"> ClickMe! </button></view>
嗯哪，还差最后一步，index.js配置，没错，这个也很简单，我就复制粘贴了
//index.js//获取应用实例const app = getApp()Page({ /*** 生命周期函数--监听页面初次渲染完成*/onReady: function () { //获得dialog组件this.dialog = this.selectComponent("#dialog");},showDialog() {this.dialog.showDialog();}, //取消事件 _cancelEvent() {console.log('你点击了取消');this.dialog.hideDialog();}, //确认事件 _confirmEvent() {console.log('你点击了确定');this.dialog.hideDialog();}})
步骤五
到此！大功告成！
让我们测试一下试试看：
点击按钮之后呢，会出现如下效果：
点击取消或者确定按钮的话，我们在事件中设置了弹窗会关闭，并会打印出相应的信息，具体点击完应该怎么做，就看你们自己发挥了，我只能帮你到这里了~
总结
现在，你已经基本掌握了小程序中的自定义组件开发技巧，组件在开发中还是很常见的，小程序一样可以模仿三大框架进行对应的组件开发，方便能够快速开发，以及减少开发的中复用的麻烦。
转载：http://www.wxapp-/article-3415-1.html
