阶段七-小程序开始实战组件化开发.pdfVIP

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组件的通信

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

页面

数据: