小程序使用之自定义组件

最新推荐文章于 2022-11-17 05:23:14 发布

程序猿tx

最新推荐文章于 2022-11-17 05:23:14 发布

阅读量227

点赞数

分类专栏：小程序佛系程序猿文章标签：小程序 html 自定义组件 css

本文链接：https://blog.csdn.net/tx467220125/article/details/84748762

版权

佛系程序猿同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

小程序

5 篇文章 0 订阅

订阅专栏

文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ

在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简化数据处理，将通用的数据处理封装起来，避免重复代码的使用。

今天要介绍的是小程序的自定义组件，类似的在做android 开发的过程中会用到自定义view，封装成通用的组件可以在不同页面里重复使用；可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。

一个自定义组件由js json wxml wxss 4个文件组成，微信开发者工具里新建选择 Component，会自动创建这个4个文件， json文件里设置：

{
  "component": true
}

这一组文件可以当做自定义组件使用。

一个简单的例子，自定义item当做组件使用。
在组件的wxml文件里码上页面元素

<view>
  <text>{{txt}}</text>
  <view class='content'>
    <view>
      <slot></slot>
      <text class='title'>{{title}}</text>
    </view>
    <text class='subTitle'>{{subTitle}}</text>
  </view>
</view>

组件提供<slot>节点，用于承载组件在引用时提供的子节点，可以当做占位的标志，后面可以将视图直接填充到此节点。

wxss是对应组件的样式

.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px
}
.title{
  color: #424242
}
.subTitle{
  color: #939393;
  font-size: 16px
}

js文件里的Component构造器可以指定组件的属性、数据、方法等。

/**
* 组件的属性列表
*/
properties: {
    title: {
      type: String, //属性类型
      value: "--" //属性初始值
    },
    subTitle: {
      type: String,
      value: "--" 
    },
}

属性列表里的值对应渲染在组件的wxml里。

/**
* 组件的初始数据
*/
data: {
    txt:"颜色"
},

组件的内部数据用于wxml的渲染。

在需要用到组件的页面json文件里添加，注意路径是绝对路径

{
  "usingComponents": {
    "item": "/component/item/item" //绝对路径
  }
}

wxml页面内直接使用<item>标签，该标签下的节点text 用于填充到<solt>内

<view>
  <item title="红色" subTitle="red">
    <text>1、</text>
  </item>
</view>

一个简单的页面渲染

组件也可以接受外部传入的样式，在组件的js文件 Component 构造器里

Component({
  externalClasses: ['title-class']
})

注意这里使用*-class 的形式定义，在组件的wxml里

<text class='title-class'>{{title}}</text>

外部使用的话，可以看到外部的样式传递给组件使用。

//wxml文件
<item title-class="red-class" title="红色" subTitle="red">
    <text>1、</text>
</item>

//wxss
.red-class{
  color: red
}

一个简单的组件的例子完成，实际项目中，通过自定义组件便于在不同的页面中重复使用。

欢迎关注我的个人博客：https://www.manjiexiang.cn/

更多精彩欢迎关注微信号：春风十里不如认识你
一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！