1.

微信小程序开发交流qq群173683895

承接微信小程序开发。扫码加微信。正文：2.

自定义组件我把它分为简单的三个步骤,1.创建组件---2.编写组件---3.调用,使用组件.

3.

第一步:创建组件

4.

创建一个modal文件夹,里面包含josn.wxml.wcss.js四个文件,然后在josn里面添加"component":true(作用是声明这一组文件为自定义组件)

5.

第二步.编写组件代码

6.

在modal.wxml:

viewhidden'{{modalHidden}}'viewclass'mask_layer'bindtap'modal_click_Hidden'/viewclass'modal_box'viewclass"title"提示/viewviewclass'content'textclass'modalMsg'{{modalMsg}}/text/viewviewclass'btn'viewbindtap'modal_click_Hidden'class'cancel'取消/viewviewbindtap'Sure'class'Sure'确定/view/view/view/view7.

在modal.wxss:

.mask_layer{width:100%;height:100%;position:fixed;z-index:1000;left:0;top:0;background:#000;opacity:0.5;overflow:hidden;}.modal_box{width:76%;overflow:hidden;position:fixed;top:50%;left:0;z-index:1001;background:#fafafa;margin:-150px12%012%;border-radius:3px;}.title{padding:15px;text-align:center;background-color:gazure;}.content{overflow-y:scroll;/*超出父盒子高度可滚动*/}.btn{width:100%;margin-top:65rpx;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background-color:white;}.cancel{width:100%;padding:10px;text-align:center;color:red;}.Sure{width:100%;padding:10px;background-color:gainsboro;text-align:center;}.modalMsg{text-align:center;margin-top:45rpx;display:block;}8.

在modal.js

Component({properties:{modalHidden:{type:Boolean,value:true},//这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hiddenmodalMsg:{type:String,value:'',}},data:{//这里是一些组件内部数据text:"text",},methods:{//这里放置自定义方法modal_click_Hidden:function(){this.setData({modalHidden:true,})},//确定Sure:function(){console.log(this.data.text)}}})9.

第三步,使用组件

10.

这里我是在pages/index/index页面调用pages/modal/modal自定义组件

11.

首先在index.json中进行引用说明,这里是设置自定义组件的标签名和引用路径

{"usingComponents":{"modal":"../modal/modal"}}12.

然后在index.wxml调用组件

!--调用modal组件--modalmodal-hidden"{{is_modal_Hidden}}"modal-msg"{{is_modal_Msg}}"/13.

在index.js绑定数据,

Page({data:{is_modal_Hidden:false,is_modal_Msg:'我是一个自定义组件'}})14.

效果图:

15.

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