自定义组件的主要目的是帮助我们复用代码和简化代码的复杂度,接下来让我们看看如何创建自定义组件吧。
创建组件:
组件Conponent由js、json、wxml、wxss四个页面组成, 为了让目录结构更加清晰,建议把不同的组件存放到单独的目录中。
组件的引用
- 局部引用
局部引用指在当前页面的.json配置文件中引用的方式
在wxml页面使用
<my-test1></my-test1>
- 全局引用
在app.json全局配置文件中引用组件的方式
与pages、window节点平级,新建usingComponents节点
"usingComponents": {
"my-test2":"/components/test/test"
}
在每个wxml页面中都可以使用
<my-test2></my-test2>
组件的样式
组件的样式具有隔离的特点,组件的样式不影响页面的样式,页面的样式也不影响组件的样式,只有class选择器具有这种隔离的效果,建议在组件中,尽量都使用class选择器。
如果确实有修改组件样式的需求,可以在组件的.js文件中,增加option节点,在option节点中增加styleIslation节点,styleIslation节点有三个值,分别为isolated,表示启用隔离;apply-shared,表示页面wxss可以影响组件样式,组件样式无法影响页面样式;shared,表示页面样式和组件样式可以相互影响。