微信小程序自定义组件

在写小程序的时候，有时候页面的内容过多，逻辑比较复杂，如果全部都写在一个页面的话，会比较繁杂，代码可读性比较差，也不易于后期代码维护，这时候可以把里面某部分功能抽出来，单独封装为一个组件，然后在要应用到它的地方引用。这也就是通常说的自定义组件，自定义组件类似于页面，它也有wxml、wxss和js文件。

详情可前往自定义组件 | 微信开放文档 (qq.com)深入学习

关于使用自定义组件grid后的收获：

1.在页面使用自定义组件时，要在页面的json文件中标明，例如：

{
  "usingComponents": {
    "j-in-index-list":"/components/in-index-list/in-index-list",
    "j-grid":"/components/grid/grid",
    "j-Image":"/components/Image/Image"
  }
}

2.自定义组件绑定的数据列表，要存放在页面的js文件中的data中，例如：

data: {
    gridItemfirst: [ 
      {src:"https://z3.ax1x.com/2021/06/06/2apLFJ.png",
      content:"使用帮助",
      navigateData:{
        path:"../index/index"
        },
        id:0},
      {src:"https://z3.ax1x.com/2021/06/06/2apzy6.png",
      content:"使用指引",
      navigateData:{
        path:"../index/index"
        },
        id:1},
      {src:"https://z3.ax1x.com/2021/06/06/2apvS1.png",
      content:"个性化设置",
      navigateData:{
        path:"../index/index"
        },
        id:2}
        ],
      }

3.在编写自定义组件的属性时，要写在组件的标签内，例如：

<j-grid gridItem="{{gridItemfirst}}" class="top" custom="true" 
width="636rpx" height="170rpx" rowNum="3" colNum="1" 
backgroundColor="white" >
</j-grid>

4.宫图里不仅仅可以是图片，还可以是通过slot插入的组件，下面是griditem和slot插槽的配合使用：

• 绑定gridItem

  • 在js中绑定子项数据，数据类型为数组类型，数据包括对象，每一个对象仅有id，用于绑定slot插槽

• 向grid下插入子项

  • 插入子项中包含slot属性，例如：slot=“0”, 0对应gridItem中的id，可以为其他类型，由用户自定义

  • data:{//以此类推
      gridItem:[
      {
      	id:0
      },
      {
        id:1
      },
      {
       	id:2,
      },]

    <grid gridItem="{{gridItem}}">
      <view slot="0"> 这是插入的0项</view>
      <view slot="1"> 这是插入的1项</view>
      <view slot="2"> 这是插入的2项</view>
    </grid>