最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件。
附上效果图:
与创建微信小程序的页面一样,一个自定义组件也需要json, wxml, wxs, js四个文件。
在项目根目录中创建文件夹,取名为:组件,在该目录下继续创建文件夹successModal。
可以在开发工具中右键创建,选择组件,默认自动会创建四个文件。如图:
在successModal.json文件中进行自定义组件声明,如:
在开发工具中右键新建选择组件,默认自动会创建。
{
“组件”:没错,
“usingComponents”: {}
}
& lt; !——这是自定义组件的内部WXML结构success.wxml——比;
& lt;视图类=' modal-section '天气:如果=皗{modalHidden}}”比;
& lt;视图类=' modal-opaci bindtap=' modal_click_Hidden祝辞& lt;/view>
& lt;视图类=modal-cont的祝辞
& lt;图标类型={{modalIcon}}的大?70年的祝辞& lt;/icon>
& lt;文本类=' modal-titleTxt {{modalIcon}}’在{{modalTitle}} & lt;/text>
& lt;文本类=' success-msg '在{{modalDesc}} & lt;/text>
& lt;/view>
& lt;/view>
/*这里的样式只应用于这个自定义组件*//* successModal.wxss */.modal-opaci {
位置:绝对的;
左:0;
上图:0;
z - index: 100;
高度:100%;
宽度:100%;
背景:黑色;
透明度:0.4;
过滤器:α(不透明度=40);
}
.modal-cont {
位置:固定;
上图:30%;
左:8.5%;
z - index: 999;
border - radius: 20 rpx;
填充:150 rpx rpx;
background - color: # fff;
text-align:中心;
}
{.modal-cont文本
行高:90 rpx;
显示:块;
}
.success {
颜色:# 09 bb07;
}
.modal-titleTxt {
字体大小:50 rpx;
粗细:700;
}
.warn {
颜色:# f76260;
}
在自定义组件的js文件中,需要使用组件()来注册组件,组件的属性值和内部数据将被用于组件wxml的渲染,其中,属性值是可由组件外部传入的。
//successModal.js
组件({/* *
*组件的属性列表
*/属性:{//这里定义了modalHidden属性,属性值可以在组件使用时指定。写法为modal-hidden
modalHidden: {
类型:布尔,
值:true
},
modalIcon: {
类型:字符串,
值:' ',
},
modalTitle: {
类型:字符串,
值:' ',
},
modalDesc: {
类型:字符串,
值:' ',
}
},/* *
*组件的初始数据
*/数据:{
},/* *
*组件的方法列表
*/方法:{//这里是自定义方法
modal_click_Hidden:函数(){
this.setData ({
modalHidden:假的,
})
},
}
})
首先在需要使用的json文件中进行引用申明,然后需要提供每个自定义组件的标签名和对应的自定义组件文件路径。
//index.json
{
" usingComponents ": {
“modal-success”:“. ./. ./组件/successModal/successModal”//在这里写上页面中自定义的标签名和自定义组件的文件路径
},
“navigationBarTitleText”:“首页”
}
其次,在页面的wxml中使用自定义组件:在页面的wxml中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
& lt; !——index.wxml祝辞
& lt;视图类=叭萜鳌北?
& lt;视图类=" demoBtn " bindtap=癰indViewTap”比;
& lt; text>点击& lt;/text>
& lt;/view>
& lt; !——调用模态组件——比;
& lt; modal-success modal-hidden=" {{is_modal_Hidden}}”modal-icon=" {{is_modal_icon}} " modal-title=" {{is_modal_title}} " modal-desc=" {{is_modal_desc}} "/比;
& lt;/view>
