小程序学习07

不存在十全十美的文章 如同不存在彻头彻尾的绝望

 

 

目录

小程序组件化思想

创建一个自定义组件

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

组件的样式细节

样式的相互影响

组件和页面通信

向组件传递数据 - properties 

向组件传递样式 - externalClasses

组件向外传递事件 – 自定义事件

页面直接调用组件方法

Component构造器

---

小程序组件化思想

• 尽可能的将页面拆分成一个个小的、可复用的组件。
• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

 

创建一个自定义组件

 类似于页面，自定义组件由 json wxml wxss js 4个文件组成。

• 先在根目录下创建一个文件夹 components, 里面存放自定义的公共组件.
• 常见一个自定义组件 my-cpn: 包含对应的四个文件.

自定义组件的步骤：

1. 首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：
2. 在wxml中编写属于我们组件自己的模板
3. 在wxss中编写属于我们组件自己的相关样式
4. 在js文件中, 可以定义数据或组件内部的相关逻辑

 

   

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

•  因为 WXML 节点标签名只能是 小写字母、中划线和下划线 的组合，所以自定义组件的标签名也只能包含这些 字符。
• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
• 自定义组件和页面所在项目根目录名 不能以“wx-”为前缀，否则会报错。
• 如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件。

 

 

 组件的样式细节

 组件内的样式 对 外部样式的影响

• 结论一：组件内的class样式，只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。
• 结论二：组件内不能使用id选择器、属性选择器、标签选择器

 外部样式 对 组件内样式 的影响

• 结论一：外部使用class的样式，只对外部wxml的class生效，对组件内是不生效的
• 结论二：外部使用了id选择器、属性选择器不会对组件内产生影响
• 结论三：外部使用了标签选择器，会对组件内产生影响

整体结论:

• 组件内的class样式和组件外的class样式, 默认是有一个隔离效果的；
• 为了防止样式的错乱，官方不推荐使用id、属性、标签选择器；

样式的相互影响

如何让class可以相互影响

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

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 了

组件和页面通信

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

向组件传递数据 - properties 

• 大部分情况下，组件只负责布局和样式，内容是由使用组件的对象决定的。
• 所以，我们经常需要从外部传递数据给我们的组件，让我们的组件来进行展示。如何传递呢？
• 使用properties属性：

支持的类型：

• String、Number、Boolean
• Object、Array、null（不限制类型）

 

 

向组件传递样式 - externalClasses

给组件传递样式： 

•  有时候，我们不希望将样式在组件内固定不变，而是外部可以决定样式。
•  这个时候，我们可以使用externalClasses属性：

1. .在Component对象中，定义externalClasses属性
2. 在组件内的wxml中使用externalClasses属性中的class
3. 在页面中传入对应的class，并且给这个class设置样式

 

 

 组件向外传递事件 – 自定义事件

有时候是自定义组件内部发生了事件，需要告知使用者，这个时候可以使用自定义事件

 

 

 

 页面直接调用组件方法

• this.selectComponent

Component构造器

• Component构造器用户创建我们的自定义组件对象, 调用Component时, 可以传入属性、数据、方法等