一文带你了解开发小程序自定义组件

原创

程序员海军

发布于 2023-11-12 21:19:00

3350

发布于 2023-11-12 21:19:00

文章被收录于专栏：前端笔记ing前端笔记ing

自定义组件

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。需要配置 .json 开启自定义组件

{
  "component": true
}

通过在 components 下创建组件

然后在页面中使用时，通过配置，页面.json 的 usingComponents 来注册组件，注册是以 key-value 方式。 key 为组件名， value 为组件路径

最后直接在页面中使用即可

<detail-form></detail-form>

Component 构造器

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

自定义引入组件两种方式

局部引入

在页面的.json 下注册即可

全局引入

在app.json 中注册

自定义组件样式

它可以在 Component 中的 externalClasses 属性来配置样式作用域。

样式作用域分类;

（1）当值为isolated，则为开启样式隔离
（2）若为apply-shared，父影响子，即页面的样式可以影响到组件，但是组件不能影响组件外的样式。
（3）若为shared父子影响，为双向影响

使用自定义组件样式流程

通过在子组件中 Component 中定义 externalClasses 样式作用域范围，以及自定义样式的 class 类名

Component({
    options:{
      multipleSlots:true,
      styleIsolation:"apply-shared"  //开启自定义样式 作用域范围
    },
    externalClasses:["cell-class"], //可以定义多个，
})

然后在子组件页面中使用定义的class 类名

<view class="cell-class main-container">
    测试自定义组件
</view>

在页面中使用组件，传入自定义的class 就可以影响到组件的样式了

key 必须和组件中定义的类型名保持一致，然后传入自定义类名 value，就可以影响到组件的样式了

<!--  页面 -->


<detail-form cell-class="body-container"></detail-form>

注意：

不要使用 id 选择器

自定义组件 - 插槽

它跟Vue / React 一样有插槽的功能，但是小程序插槽比较拉胯，没有插槽作用域，插槽不可以传递值。

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，需要在 js 中声明

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

定义插槽

<!--  wxml -->
<slot></slot>   <!--  默认插槽 -->
<slot name="button"></slot>  <!--  具名插槽 -->

<slot name="personInfo"></slot>

使用插槽

<detail-form cell-class="body-container" model:content="{{str}}" >
  <view>
    默认插槽
  </view>
  <view slot="button">
    <button>测试插槽</button>
  </view>

  <view slot="personInfo">
    <button>个人信息插槽</button>
  </view>
</detail-form>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

小程序