小程序自定义组件开发

2023-04-20
上海
本文字数：1629 字
阅读完需：约 5 分钟

自定义组件

创建自定义组件

类似于页面，一个自定义组件由 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) {
    }  }
})

复制代码

自定义引入组件两种方式

局部引入
全局引入

在 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>

复制代码

:::danger 注意：

不要使用 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>

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/03389ad8ae9cf3f7f1b523cf8】。文章转载请联系作者。

程序员海军

关注

🏆微信公众号：【前端自学社区】 2020-04-02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆 InfoQ 首批签约作者 🏆荣获2021/2022年度社区共建奖 😊个人微信： daxin261

发布

暂无评论

创作场景

小程序自定义组件开发

自定义组件

创建自定义组件

Component 构造器

自定义引入组件两种方式

自定义组件样式

使用自定义组件样式流程

自定义组件 - 插槽

定义插槽

使用插槽

程序员海军

评论