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

第一步：创建组件创建一个情态的文件夹，里面包含josn.wxml.wcss.js四个文件，然后在乔森里面添加组件：街(作用是声明这一组文件为自定义组件)

第二步。编写组件代码

在modal.wxml :

[html]视图普通副本视图隐藏=' { { modalHidden } } '视图类=' mask _ layer '绑定tap=' Modal _ click _ Hidden '/视图类=' modal _ box '视图类=' title '提示/view view class=' content ' text class=' modalMsg ' { modalMsg } }/text/view view class=' BTN ' view bind tap=' modal _ click _ Hidden ' class=' cancel '取消/view view bindtap="确定"类="确定"确定/查看/查看/查看/查看在modal.wxss:

[css]查看普通副本。mask _ layer {宽度： 100%；高度： 100%;位置：固定；z指数： 1000；背景技术： # 000;opacity: 0.5飞越：隐藏；} .modal _ box { width : 76%；飞越：隐藏；位置：固定；前：名50%；左： 0；z指数： 1001；背景# fafafa余量：-150像素12% 0 12%；边界半径： 3px} .标题{ padding: 15px文本对齐：中心；背景-color : gazure；} .内容{溢出-y:滚动；/*超出父盒子高度可滚动*/} .BTN {宽度： 100%；边距-top : 65 rpx；display : flex flex-方向：行；align-items:居中；正义-内容：空格；盒子尺寸：边框盒子；背景-颜色：白色；} .取消{宽度： 100%；padding: 10px文本对齐：中心；颜色：红色；} .确定{宽度： 100%；padding: 10px背景-color : gainsboro；文本对齐：中心；} .modalMsg { text-align : center；页边距-top : 45 rpx；显示器：块；}在modal.js

[javascript]查看普通副本组件({ properties : { modalhidden : { type :布尔值，value: true }，//这里定义了modalHidden属性，属性值可以在组件使用时指定。写法为模态隐藏的modalMsg: { type: String，value: ' '，} }，data: { //这里是一些组件内部数据text: 'text '，}，methods: { //这里放置自定义方法modal_click_Hidden:函数(){这个。setdata({ modalhidden : true，}) }，//确定Sure:函数(){ console.log(this.data.text) })第三步，使用组件

这里我是在页面/索引/索引页面调用页面/模式/模态自定义组件首先在index.json中进行引用说明，这里是设置自定义组件的标签名和引用路径

[javascript]查看普通副本{ '使用组件' : { '模态' : './modal/modal' } }

然后在index.wxml调用组件

[html]查看普通副本！-调用情态的组件-modal-modal-Hidden=' { { is _ modal _ Hidden } } ' modal-Msg=' { { is _ modal _ Msg } } '/在index.js绑定数据，

[javascript]查看纯文本页面({ data : { is _ modal _ hidden : false，is_modal_Msg: '我是一个自定义组件' } })效果图：

如果需要查看更加详细的文档，可以在官方文档查看，地址