小程序（自定义组件，第三方库使用）

自定义组件的步骤

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

一些需要注意的细节

• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents 字段,值为定义组件的路径）。
• 自定义组件和页面所在项目根目录名 不能以“wx-”为前缀，否则会报错。
• 如果在app.json的usingComponents声明某个组件，那么所有页面和组件可以直接使用该组件。

样式细节

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

• 组件内的class样式，只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。
• 组件内不能使用id选择器、属性选择器、标签选择器。他会对整个项目产生影响。

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

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

如何让class可以相互影响

• 在Component对象中，可以传入一个options属性，其中options属性中有一个styleIsolation（隔离）属性。
• styleIsolation有三个取值：
  • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认取值）。
  • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。
  • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置 。

    Component({
      // 决定页面和组件的class样式是否影响
      options: {
        styleIsolation: "isolated"
      }
    })

但是最好还是让他们都相互隔离。

组件通信

向组件传递数据 - properties

使用properties属性, 支持的类型：String、Number、Boolean、Object、Array、null（不限制类型）。可以通过value设置默认值。

    Component({
      properties: {
        title: {
          type: String,
          value: "默认标题"
        },
        content: {
          type: String,
          value: "默认内容"
        }
      }
    })

向组件传递样式 - externalClasses

使用externalClasses属性：

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

Component({
  externalClasses: ["pageClass"]
})

// page.wxml
    <my-cpn pageClass="pageClass"/>
    
// page.wxss
    .pageClass {
        color: red;
    }

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

事件名大小写敏感。

    Component({
      methods: {
        onTap() {
          this.triggerEvent("onTap", "参数")
        }
      }
    })

// page.wxml
    <event-cpn bindonTap="onTap"/>
// page.js
  onTap(event) {
    console.log("onTap:", event); // event.detail 中拿到传递的事件参数。
  },

获取组件实例

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。调用时需要传入一个匹配选择器 selector。其实selector是使用当前组件定义的selector。

    <!-- 使用自定义组件时 -->
    <my-component id="the-id" />
    
    // 父组件调用
    const child = this.selectComponent('#the-id')

或者自定义组件js文件导出的想要被外界获取的变量。

    // 自定义组件 my-component 内部
    Component({
      export() {
        return { myField: 'myValue' }
      }
    })

插槽

小程序中插槽不支持默认值。

但是我们可以通过:empty伪类实现。我们额外定义一个元素充当默认插槽内容。

    <view class="content">
      <slot></slot>
    </view>
    <view class="default">默认内容</view>

    // wxss
    .content:empty + .default {
      display: block;
    }

    .default {
      display: none;
    }

如果想在组件中定义多个插槽，我们需要在组件中指定multipleSlots: true。

   Component({
      options: {
        multipleSlots: true
      }
    })

behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。

组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。

每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior。

通过Behavior()函数定义。内部传入组件选中的api。（data, methods, lifetimes等等）

    const counter = Behavior({
      data: {
        counter: 0
      },
      lifetimes: {
        created() {
          console.log("counter behavior created");
        }
      },
      methods: {
        increment() {
          this.setData({
            counter: this.data.counter + 1
          })
        }
      }
    })

    module.exports = {
      counter
    }

在组件中使用

    import { counter } from "../../behaviors/counter"
    Component({
      behaviors: [counter],
    })

组件所在页面的声明周期

Component函数传入的配置对象

使用第三方库

和写其他项目一样直接通过npm , yarn等工具安装对应的库。但是还需要在工具菜单栏中点击构建npm,然后会生成一个miniprogram_npm文件夹。因为我们在项目中引入的库都是通过这个文件夹查找的。并不会在node_modules文件夹下查找。只有在nodejs环境下才是在node-modules文件下查找。

拿vant组件库为例

往期年度总结

往期文章

专栏文章