[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)

对微信小程序有兴趣的可以关注我或者加入我的微信小程序开发交流群（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. <!-- 调用modal组件 -->  
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/