自定义组件

自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

为什么使用自定义组件

 

创建组件的流程

 1>项目根目录下创建一个components文件（默认命名文件），在文件夹下创建一个组件文件夹，在组件文件夹下，创建对应的四个组件文件

 

 

 

 注意：每个组件都有四个文件components.wxml  ，  component.wxss  ， component.json  ，  component.js

 components.wxml：组件的模板文件

 component.wxss ：组件的样式文件

 component.json

{
  "component": true,  //告诉小程序，这是一个组件，如果当做组件使用，这个属性设置为true
  "usingComponents": {}  //使用其他的组件
}

 component.js

// pages/components/heads/heads.js
Component({    //定义组件，记录了这个组件的所有逻辑任务
  /*** 组件的属性列表*/
  properties: {},
/*** 组件的初始数据*/
  data: {},
/*** 组件的方法列表*/
  methods: {}
})

使用组件

在新建的文件夹中使用自定义的组件

{
  "usingComponents": {
    "heads":"../components/heads/heads"    //使用键值对的形式，“自定义组件的名字”：“自定义组件的地址”
  }
}

在新建文件夹的.wxml文件中以标签的形式使用该组件

<!--pages/page1/page1.wxml-->
<text>pages/page1/page1.wxml</text>
<heads>
</heads>

 

 

 

案例

自定义组件名称nav

<!--pages/components/nav/nav.wxml-->
<view class="nav">
<view 
    wx:for="{{arr}}" 
    wx:key="id"
    class="{{a==index?'active':''}}"
    bindtap="click"
    data-index="{{index}}"
    >
    {{item.title}}</view>
</view>

// pages/components/nav/nav.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    arr:[{
      "id":0,
      "title":"推荐",
    },{
      "id":1,
      "title":"排行",
    },{
      "id":2,
      "title":"分类",
    },{
      "id":3,
      "title":"歌手",
    },{
      "id":4,
      "title":"MV",
    }],
      a:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
      click:function(e){
         var index=e.target.dataset.index;
         this.setData({
           a:index
         })
         console.log(index)
        // console.log(e)
      }
  }
})

在使用组件的.json文件中引入该文件并在.wxml文件中使用组件

{
  "usingComponents": {
    "nav":"../components/nav/nav"
  }
}

 

 

注意：

• data-index自定义组件属性
• 列表循环注意item和index关键字
• 组件中的事件函数放在methods中