06_小程序组件化开发.pdf

小程序的组件化开发

王红元coderwhy

目录

1小程序组件化思想

content

2自定义组件的过程

3组件样式实现细节

4组件使用过程通信

5组件插槽定义使用

6Component构造器

coderwhy小程序组件化开发

◼小程序在刚刚推出时是不支持组件化的,也是为人诟病的一个点：

但是从v1.6.3开始,小程序开始支持自定义组件开发,也让我们更加方便的在程序中使用组件化.

◼组件化思想的应用：

有了组件化的思想，我们在之后的开发中就要充分的利用它。

尽可能的将页面拆分成一个个小的、可复用的组件。

这样让我们的代码更加方便组织和管理，并且扩展性也更强。

◼所以，组件是目前小程序开发中，非常重要的一个篇章，要认真学习（不过学习Vue的过程中我们已经强调过很多次了）。

coderwhy创建一个组件

◼类似于页面，自定义组件由jsonwxmlwxssjs4个文件组成。

按照我的个人习惯,我们会先在根目录下创建一个文件夹；

components,里面存放我们之后自定义的公共组件；

常见一个自定义组件my-cpn:包含对应的四个文件；

◼自定义组件的步骤：

1.首先需要在json文件中进行自定义组件声明（将component字段设

为true可这一组文件设为自定义组件）：

2.在wxml中编写属于我们组件自己的模板

3.在wxss中编写属于我们组件自己的相关样式

4.在js文件中,可以定义数据或组件内部的相关逻辑(后续我们再使用)

coderwhy使用自定义组件和细节注意事项

◼一些需要注意的细节：

自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents字段）。

自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件。

coderwhy组件的样式细节

◼课题一：组件内的样式对外部样式的影响

结论一：组件内的class样式，只对组件wxml内的节点生效,对于引用组件的Page页面不生效。

结论二：组件内不能使用id选择器、属性选择器、标签选择器

◼课题二：外部样式对组件内样式的影响

结论一：外部使用class的样式，只对外部wxml的class生效，对组件内是不生效的

结论二：外部使用了id选择器、属性选择器不会对组件内产生影响

结论三：外部使用了标签选择器，会对组件内产生影响

◼课题三：如何让class可以相互影响

在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。

styleIsolation有三个取值：

✓-isolated表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响（默认取值）；

✓-apply-shared表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定的样式不会影响页面；

✓-shared表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了

coderwhy组件的通信

◼很多情况下，组件内展示的内容（数据、样式、标签），并不是在组件内写死的，而且可以由使用者来决定。