组件

创建自定义组件

首先在项目下新建一个components的文件夹，然后在components里面新建一个hdNav的文件夹并鼠标右击这个hdNav文件夹点击新建component便完成了一个自定义组件前提工作。

基本配置

  1. 在自定义组件的js文件里面配置

    1
    2
    3
    4
    5
    6
    7
    8
    // components/hdNav/com-hdNav.js
    Component({
      options: {}, // 自定义组件的
      properties: {}, // 自定义组件的属性列表
      data: {}, // 自定义组件的初始数据
      methods: {}, // 自定义组件的方法列表
      observers: {}, // 数据监听器 用于监视data与properties
    })

  2. 在自定义组件的json文件里面配置

    1
    2
    3
    4
    5
    // components/hdNav/com-hdNav.json
    {
      "component": true,
      "usingComponents": {}
    }

引用和使用组件

  1. 引用com-hdNav组件

    有两种方法引用组件

    1. 全局配置里面引用

      1
      2
      3
      4
      5
      6
      // app.json
      {
          "usingComponents": {
              "com-hdNav": "/components/hdNav/com-hdNav"
          },
      }

    2. 局部页面里面引用

      1
      2
      3
      4
      5
      6
      // pages/home/home.json
      {
          "usingComponents": {
              "com-hdNav": "/components/hdNav/com-hdNav"
          },
      }

      局部引用其他页面需要使用就需要在相应的json里面进行配置。

  2. 使用com-hdNav组件

    1
    2
    <!-- pages/home/home.wxml -->
    <com-hdNav/>

    com-hdNav组件的样式需要在com-hdNav.wxss里面定义，其他地方定义的样式是无法令com-hdNav起作用的。

自定义组件与页面之间传递参数

  1. 定义com-hdNav的属性 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // components/hdNav/com-hdNav.js
    Component({
      properties: {
          myProperty: {
              type: String,
              value: ''
          }
          // myProperty: String
      },
    })

    调用自定义组件的页面需要向自定义组件传参可以通过定义的属性进行传值。

    1
    2
    <!-- pages/home/home.wxml -->
    <com-hdNav myProperty="传入参数"/>

  2. 使用传入的参数

    1
    2
    3
    4
    <!-- components/hdNav/com-hdNav.wxml --!>
    <view>{{myProperty}}<view>

    <!-- 等价于 <view>传入参数</view> --!>

    在自定义组件的js文件里面获取属性值（即 myProperty的值）可以通过this.properties.myProperty或this.data.myProperty获取值。

  3. com-hdNav组件数据向外传参

    1. 给com-hdNav绑定事件

      1
      2
      <!-- pages/home/home.wxml -->
      <com-hdNav bind:getData="getData"/>

    2. 为com-hdNav设置方法函数

      1
      2
      3
      4
      5
      6
      7
      8
      // components/hdNav/com-hdNav.js
      Component({
          methods: {
              getData: function() {
                  this.triggerEvent('getData', this.data)
              }
          }
      })

      触发bind:getData事件，只需要在自定义组件的事件方法里面调用this.getData()即可。

自定义组件设置节点与使用节点

  1. 自定义组件使用节点

    1. 单个节点设置

      1
      2
      3
      4
      <!-- components/hdNav/com-hdNav.wxml --!>
      <view>
      	<slot />
      <view>

      使用slot标签设置节点，调用自定义组件的页面从而插入自定义wxml代码。

    2. 多个节点设置

      1
      2
      3
      4
      5
      6
      7
      // components/hdNav/com-hdNav.js
      Component({
          options: {
              // 启用多个slot支持
              multipleSlots: true
          }
      })
      1
      2
      3
      4
      5
      <!-- components/hdNav/com-hdNav.wxml --!>
      <view>
      	<slot name="slot1"></slot>
      	<slot name="slot1"></slot>
      <view>

      在调用自定义组件的页面里面可以通过指定<view slot="slot1"></view>即为代替自定义组件的<slot name="slot1"></slot>处的代码。

注意事项

  • wxss样式选择器尽量使用class
  • 测试远程接口可以在本地设置开启不校验合法域名，解决网页数据接口无法访问的问题
  • 自定义组件的属性值，在wxml里面获取到可以和逻辑文件里面data参数一样的使用方式
  • 小程序获取dom对象需要通过wx.createSelectorQuery()
  • 直接赋值相当于拿取到变量的地址，保持源数据不变需要拷贝