微信小程序自定义组件

╰半橙微兮° 2023-10-03 22:37 11阅读 0赞

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

详情可前往[自定义组件 | 微信开放文档 (qq.com)][_ _ _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>

[_ _ _qq.com]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/