微信小程序组件如何为？

前置 微信小程序官方文档自定义组件章节内容比较杂，以下是我的学习记录。 小程序自定义组件 原生微信小程序支持简洁的组件化编程，通过组件化编程可以： 将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用 将复杂的页面拆分成多个低耦合的模块，有助于代码维护 发布第三方原生小程序自定义组件或组件扩展，壮大社区 快速开始 创建组件 一个组件包含四个文件，分别是 json、wxml、wxss、js。 在 Com.json 中将 component 字段设为 true Comp.json { "component": true } 在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式 Comp.wxml <view class="title"> {{title}} </view> Comp.wxss .title { color: green; } 编写自定义组件的 js 文件 在自定义组件的 js 文件中，需要使用 Component 方法注册组件。 Comp.js Component ({ data: { title: "Hi", }, }); 使用组件 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供自定义组件的标签名和对应的自定义组件文件路径： page.json { "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } page.wxml <component-tag-name></component-tag-name> 组件样式 :host 选择器 组件可以指定它所在节点的默认样式，使用 :host 选择器。 Comp.wxss :host { color: yellow; } 组件样式隔离 默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。通过 styleIsolation 指定样式隔离。 Comp.js Component ({ options: { styleIsolation: "isolated", }, }); styleIsolation 支持以下取值： isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）； apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面； shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。） 如果这个 Component 构造器用于构造页面 ，则默认值为 shared ，且还有以下选项可用： page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件； page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面； page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。 也可以在页面或自定义组件的 json 文件中配置 styleIsolation （这样就不需在 js 文件的 options 中再配置）。例如： Comp.json { "styleIsolation": "isolated" } 在 Component 的 options 中设置 addGlobalClass: true。 这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。 外部样式类 有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。