之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！
好在微信小程序的库从 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 的小伙伴们，赶紧学习学习，以后多用组件化开发，就不会那么难受了，加油哦~
网友评论