小程序使用之自定义组件

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

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

{
  "component": true
}

image.gif

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

注‘Android技术交流群878873098，欢迎大家加入交流，畅谈！本群有免费学习资料视频’并且免费分享源码解析视频

一个简单的例子，自定义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>

image.gif

组件提供<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
}

image.gif

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

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

image.gif

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

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

image.gif

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

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

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

image.gif

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

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

image.gif

注‘Android技术交流群878873098，欢迎大家加入交流，畅谈！本群有免费学习资料视频’并且免费分享源码解析视频

一个简单的页面渲染

image

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

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

image.gif

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

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

image.gif

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

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

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

image

注‘Android技术交流群878873098，欢迎大家加入交流，畅谈！本群有免费学习资料视频’并且免费分享源码解析视频

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