微信小程序基础-07-组件化开发

一、小程序组件化思想

• 小程序在刚刚推出时是不支持组件化的 , 也是为人诟病的一个点。
• 但是从 v1.6.3 开始 , 小程序开始支持自定义组件开发 , 也让我们更加方便的在程序中使用组件化。
  
• 组件化思想的应用：
• 有了组件化的思想，我们在之后的开发中就要充分的利用它。
• 尽可能的将页面拆分成一个个小的、可复用的组件。
• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

二、创建一个自定义组件

• 类似于页面， 自定义组件由 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 中指定的样式也会影响页面和其他设置了。
  
• 其他一些相关样式细节，参考官网：
• https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

六、组件和页面通信

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

七、向组件传递数据-properties

• 给组件传递数据：
• 大部分情况下，组件只负责布局和样式，内容是由使用组件的对象决定的。
• 所以，我们经常需要从外部传递数据给我们的组件，让我们的组件来进行展示。如何传递呢？
• 使用 properties 属性：
• 支持的类型：
• String 、 Number 、 Boolean
• Object 、 Array 、 null （不限制类型）
  
  

八、向组件传递样式-externalClasses

• 给组件传递样式：

• 有时候，我们不希望将样式在组件内固定不变，而是外部可以决定样式。

• 这个时候，我们可以使用 externalClasses 属性：

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

九、组件向外传递事件 —— 自定义事件

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

十、自定义组件练习

十一、页面直接调用组件方法

• this.selectComponent
  

十二、什么是插槽

• slot 翻译为插槽：

• 在生活中很多地方都有插槽，电脑的 USB 插槽，插板当中的电源插槽。

• 插槽的目的是让我们原来的设备具备更多的扩展性。

• 比如电脑的 USB 我们可以插入 U 盘、硬盘、手机、音响、键盘、鼠标等等。

• 组件的插槽：

• 组件的插槽也是为了让我们封装的组件更加具有扩展性。

• 让使用者可以决定组件内部的一些内容到底展示什么。

• 例子：移动网站中的导航栏。

• 移动开发中，几乎每个页面都有导航栏。

• 导航栏我们必然会封装成一个插件，比如 nav bar 组件。

• 一旦有了这个组件，我们就可以在多个页面中复用了。

• 但是，每个页面的导航是一样的吗？类似下图。

十三、单个插槽的使用

• 除了内容和样式可能由外界决定之外，也可能外界想决定显示的方式
• 比如我们有一个组件定义了头部和尾部，但是中间的内容可能是一段文字，也可能是一张图片，或者是一个进度条。
• 在不确定外界想插入什么其他组件的前提下，我们可以在组件内预留插槽：
  
  

十四、多个插槽的使用

• 有时候为了让组件更加灵活 , 我们需要定义多个插槽：
  
  
  

十五、Component构造器

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