小程序--自定义组件

一、创建自定义组件

.js中注册Component函数

.json使用**"component": true**

javascript 复制代码

Component({})

javascript 复制代码

{
  "component": true
}

二、使用自定义组件

全局配置、页面配置均可，全局配置就写在app.json中，页面配置就写在页面对应的json中。

配置之后，在页面中以组件形式引入。

html 复制代码

<page-search />

javascript 复制代码

{
  "usingComponents": {
    "page-search":"/components/my_search/my_search"
  }
}

三、自定义组件样式

小程序的样式是默认隔离（默认情况下页面的样式无法影响自定义组件的样式）的，允许外部文件修改组件样式的方法：

1、设置addGlobalClass

.js 文件中传入 options: { addGlobalClass: true }

注意：尽量不要使用标签、ID、属性选择器（会影响到全局）。

javascript 复制代码

// components/my-nav/my-nav.js
Component({
  // 小程序组件默认样式是隔离，addGlobalClass设置为true可允许外部修改样式
  options: {
    addGlobalClass: true
  }
})

html 复制代码

// 组件内容
<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class">
    自定义标题
  </view>
</view>

html 复制代码

// 组件样式
.navigation-bar {
  background-color: #fff;
  height: 88rpx;
  /* 顶部刘海预留 */
  padding-top: 100rpx;
  display: flex;
  justify-content: center;
}
.navigation-bar-title {
  font-weight: 600;
}

html 复制代码

// 使用组件的页面
<app-nav></app-nav>

.navigation-bar {
  background-color: gold !important;
}
.nav_title {
  color: #fff !important;
}

javascript 复制代码

// 使用组件的js
{
  "navigationStyle": "custom"
}

2、设置externalClasses

.js 文件中传入 externalClasses: [ xxx, yyy]

javascript 复制代码

// components/my-nav/my-nav.js
Component({
  externalClasses: ["custom-class"],
})

html 复制代码

// 使用组件的页面
<app-nav custom-class="nav_title"></app-nav>

.navigation-bar {
  background-color: gold !important;
}
.nav_title {
  color: #fff !important;
}

四、自定义插槽

小程序默认只能使用一个slot，需要多个插槽或需要使用具名插槽的时候，需要传入**multipleSlots: true**。

创建插槽 ：在组件的任一位置使用<slot />占位，slot一定要是闭合标签。

javascript 复制代码

// components/my-nav/my-nav.js
Component({
  options: {
    // 只要使用到具名插槽，都需要将multipleSlots设置为true
    multipleSlots: true
  },
})

html 复制代码

<view class="navigation-bar custom-class">
  <view class="navigation-bar-title title-class">
    <slot name="left"></slot>自定义标题<slot name="right"></slot>
  </view>
</view>

html 复制代码

<app-nav custom-class="nav_title">
  <text slot="left">◀</text>
  <text slot="right">▶</text>
</app-nav>

五、组件生命周期

1、created

组件创建时触发，相当于vue的created，但是由于无法使用this.setData({})，所以，一般不用。

2、attached

组件初始完毕时触发，相当于vue的mounted，最常使用。

html 复制代码

<view class="navigation-bar custom-class" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <slot name="left"></slot>自定义标题<slot name="right"></slot>
  </view>
</view>

javascript 复制代码

// components/my-nav/my-nav.js
Component({
  options: {
    multipleSlots: true
  },
  data: {
    statusBarHeight: 0
  },
  // 生命周期
  lifetimes: {
    created(){},
    attached() {
      const { statusBarHeight } = wx.getSystemInfoSync()
      console.log(wx.getSystemInfoSync())
      console.log(statusBarHeight)
      this.setData({
        statusBarHeight: statusBarHeight
      })
    }
  }
})