【微信小程序】-- 自定义组件 -- 创建与引用 &样式（三十二）

一、组件的创建与引用

  前面对学习到的页面导航、页面事件和wxs脚本等相关内容进行了一个总结。接下来就来学习小程序中的自定义组件 – 创建与引用。话不多说，让我们原文再续，书接上回吧。

1、创建组件

  在微信小程序中创建组件可分为以下三步：

• Step 1、项目的根目录中，鼠标右键，创建 components 文件夹。
• Step 2、然后在新建的 components 文件夹上创建组件名文件夹，这里以 test1 为例。
• Step 3、最后在 test1 文件上鼠标右键，点击“新建 Component，输入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss。

  注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。

2、引用组件

  创建完组件之后，接下来就要去进行使用，首先对组件进行引用，组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

• 局部引用：组件只能在当前被引用的页面内使用。
• 全局引用：组件可以在每个小程序页面中使用。

3、局部引用组件

  在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。采用键值对方式进行引用，具体代码如下所示：

contact.json

  引入组件

{
  "usingComponents": {
    "my-test1": "/components/test1/test1"
  }
}

contact.wxml

  使用组件

<view></view>
<my-test1></my-test1>

  可以来看一下运行效果：

  注意：由于组件是局部引用的，所以在别的页面进行调用该组件的时候是不会生效的。

4、全局引用组件

  如果一个一个页面都要这样调用该组件，那就太麻烦了。这里就可以把该组件进行全局引用供全部页面使用。在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。具体代码如下：

app.json

  创建 usingComponents 节点并引用组件。

{
  "pages":[
  ...
  ],
  "window":{
  ...
  },
  "usingComponents":{
    "my-test1": "/components/test1/test1"
  },

  这样在全部页面都可以调用该组件，这里以 message 页面为例，就能发现 message 页面可以调用该组件了，实际运行如下所示：

5、全局引用与局部引用的使用

  根据组件的使用频率和范围，来选择合适的引用方式，如下表所示：

6、组件和页面的区别

  从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与

.json 文件有明显的不同：

二、自定义组件 - 样式

1、组件样式隔离

  默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构，如图所示：

• 组件 1 的样式不会影响组件 2 的样式。
• 组件 2 的样式不会影响小程序页面的样式。
• 小程序页面的样式不会影响组件 1 和 2 的样式。

  这样做好处就是： 防止外界的样式影响组件内部的样式以及组件的样式破坏外界的样式。

2、组件样式隔离的注意点

• app.wxss 中的全局样式对组件无效。

  首先定义一个全局样式，页面和组件进行调用，具体代码如下所示：

app.wxss

.g-csh-red-test{
  color: red;
}

message.wxml

  在页面调用全局样式。

<text class="g-csh-red-test">pages/message/message.wxml</text>
<view></view>
<my-test1></my-test1>

test1.wxml

  在组件调用全局样式。

<text class="g-csh-red-test">components/test/test1.wxml</text>

  可以发现只有页面上全局样式是生效的，来看一下运行效果：

• 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响。

  #a { }      /* 在组件中不能使用 */

  [a] { }    /* 在组件中不能使用 */

  button { }   /* 在组件中不能使用 */

  .a > .b { }   /* 除非 .a 是 view 组件节点，否则不一定会生效 */

  这里对全局样式的字体进行设置，具体代码如下所示：

app.wxss

.g-csh-red-test{
  color: red;
}

  可以看得到组件跟页面字体都变小了，可以来看一下运行效果：

  这样直接修改页面和组件的样式，在开发过程中风险很大，所以建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

3、修改组件的样式隔离选项

  默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法有以下两种：

方法一：

  在组件的 js 文件中新增如下配置：

Component({
  options:{
    styleIsolation: "isolated"
  },
})

方法二：

  在组件的 json 文件中新增如下配置：

{
  "styleIsolation": "isolated"
}

  一般情况方法一使用的比较多一点。

4、styleIsolation 的可选值

  这里以方法一为例，来对 styleIsolation 属性进行设置，具体属性如下所示：

test1.js

  将组件和页面的样式设置为相互影响。

Component({
  options:{
    styleIsolation: "shared"
  },
})

test1.wxss

  对文本进行加粗。

.g-csh-red-test {
  font-weight: bold;
}

  此时可以发现，页面的文本也加粗了且组件上文本也变成红色了，说明组件和页面的样式现在是相互影响的，可以来看一下实际运行效果：

总结

  感谢观看，这里就是自定义组件 – 创建与引用&样式的介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。