对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流群（173683895）相互交流学习。 禁止闲扯和广告。
自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件  ---   3.调用,使用组件. 第一步:创建组件创建一个modal文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在josn里面添加 "component":true (作用是声明这一组文件为自定义组件)

第二步. 编写组件代码在modal.wxml :[html] view plain copy

1. <view hidden='{{modalHidden}}'>  
2.   <view class='mask_layer' bindtap='modal_click_Hidden' />  
3.   <view class='modal_box'>  
4.     <view class="title">提示view>  
5.     <view class='content'>  
6.       <text class='modalMsg'>{{modalMsg}}text>  
7.     view>  
8.     <view class='btn'>  
9.       <view bindtap='modal_click_Hidden' class='cancel'>取消view>  
10.       <view bindtap='Sure' class='Sure'>确定view>  
11.     view>  
12.   view>  
13. view>  

在modal.wxss:[css] view plain copy

1. .mask_layer {  
2.   width: 100%;  
3.   height: 100%;  
4.   position: fixed;  
5.   z-index: 1000;  
6.   background: #000;  
7.   opacity: 0.5;  
8.   overflow: hidden;  
9. }  
10. .modal_box {  
11.   width: 76%;  
12.   overflow: hidden;  
13.   position: fixed;  
14.   top: 50%;  
15.   left: 0;  
16.   z-index: 1001;  
17.   background: #fafafa;  
18.   margin: -150px 12% 0 12%;  
19.   border-radius: 3px;  
20. }  
21.   
22. .title {  
23.   padding: 15px;  
24.   text-align: center;  
25.   background-color: gazure;  
26. }  
27.   
28. .content {  
29.   overflow-y: scroll; /*超出父盒子高度可滚动*/  
30. }  
31.   
32. .btn {  
33.   width: 100%;  
34.   margin-top: 65rpx;  
35.   display: flex;  
36.   flex-direction: row;  
37.   align-items: center;  
38.   justify-content: space-between;  
39.   box-sizing: border-box;  
40.   background-color: white;  
41. }  
42.   
43. .cancel {  
44.   width: 100%;  
45.   padding: 10px;  
46.   text-align: center;  
47.   color: red;  
48. }  
49.   
50. .Sure {  
51.   width: 100%;  
52.   padding: 10px;  
53.   background-color: gainsboro;  
54.   text-align: center;  
55. }  
56.   
57. .modalMsg {  
58.   text-align: center;  
59.   margin-top: 45rpx;  
60.   display: block;  
61. }  

在modal.js[javascript] view plain copy

1. Component({  
2.   properties: {  
3.     modalHidden: {  
4.       type: Boolean,  
5.       value: true  
6.     }, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden  
7.     modalMsg: {  
8.       type: String,  
9.       value: ' ',  
10.     }  
11.   },  
12.   data: {  
13.     // 这里是一些组件内部数据  
14.     text: "text",  
15.   },  
16.   methods: {  
17.     // 这里放置自定义方法  
18.     modal_click_Hidden: function () {  
19.       this.setData({  
20.         modalHidden: true,  
21.       })  
22.     },  
23.     // 确定  
24.     Sure: function () {  
25.       console.log(this.data.text)  
26.     }  
27.   }  
28. })  

第三步, 使用组件这里我是在 pages/index/index 页面调用 pages/modal/modal 自定义组件首先在index.json中进行引用说明, 这里是设置自定义组件的标签名和引用路径
[javascript] view plain copy

1. {  
2.   "usingComponents": {  
3.     "modal": "../modal/modal"  
4.   }  
5. }  

然后在index.wxml调用组件[html] view plain copy

1.   
2. <modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>  

在index.js绑定数据,[javascript] view plain copy

1. Page({  
2.   data: {  
3.     is_modal_Hidden:false,  
4.     is_modal_Msg:'我是一个自定义组件'  
5.   }  
6. })  

效果图:


如果需要查看更加详细的文档,可以在官方文档查看, 地址为:  https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/