美文网首页
小程序自定义组件简介

小程序自定义组件简介

作者: 比较笨的大笨钟 | 来源:发表于2019-03-06 15:48 被阅读0次

         首先说下自定义组件使用的好处,如果页面内的某一模块被很多页面重复使用,就可以将这一模块抽离出来封装成自定义组件,方便多个页面进行引用。这样将复杂的页面拆分成多个低耦合的模块,有助于代码维护。

        小程序的自定义组件跟普通的page一样,也是由wxml、wxss、json,js组成。新建一个名为components的文件夹,新建的自定义组件统一放在这个文件夹下。

json:

如果要使用自定义组件,要将json文件中component设置为true,如果要在组件中引用其他的自定义组件,可在usingComponents中定义。

{

  "component": true,

  "usingComponents": {

  }

}

wxml:

        组件模板的写法与page相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。

1 如果业务需要对自定义组件A进行扩展,可在模板A中插入节点。默认情况下,一个组件的wxml中只能有一个slot。需要使用多slot时,可以在组件js中声明启用options: {multipleSlots: true },以不同的 name 来区分。

<view >

  <view>李雪琴你好,我是吴亦凡,别管我在哪,你看这灯多亮</view>

<slot name="shiliujie"></slot>

</view>

在组件A的JS中设置multipleSlots为true。

Component({

  options: {

    multipleSlots: true // 开启slot

  }

})

在page页面中引用A组件,定义<slot>

<!-- 引用组件的页面模版 -->

<view>

  <my-component>

      <text slot="shiliujie">李雪琴你好,我是石榴姐,你吃饭没呢</text>

  </my-component>

</view>

2 page可以向其包含的子组件传递数据。自定义的<my-component>组件的属性 propA 和 propB 接收页面传递来的数据。可以在page下的js中通过 setData 来改变绑定的数据。

小程序开发文档提示:这样的数据绑定只能传递 JSON 兼容数据。基础库版本2.0.9开始,还可以在数据中包含函数(但这些函数不能在wxml中直接调用,只能传递给子组件)。

<!-- 引用组件的页面模版 -->

<view>

  <my-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">

      <text slot="shiliujie">李雪琴你好,我是石榴姐,你吃饭没呢</text>

  </my-component>

</view>

Js:

    这里定义了组件的事件。

Component({

  /**

   * 组件的生命周期(优先级最高)

   */

  lifetimes: {

    created(){

      //在组件实例刚刚被创建时执行,此时还不能调用setData,只用于给组件this添加一些自定义属性字段。

    },

    attached() {

       // 在组件实例进入页面节点树时执行。在组件完全初始化完毕、进入页面节点树后被触发。此时this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

    },

    ready(){

      //在组件在视图层布局完成后执行

    },

    moved(){

      //在组件实例被移动到节点树另一个位置时执行

    },

    detached() {

      // 在组件实例被从页面节点树移除时执行。退出一个页面时,如果组件还在页面节点树中,则detached被触发。

    },

    error(){

      //每当组件方法抛出错误时执行(参数:Object Error)

    }

  },

   /**

   * 组件所在页面的生命周期(与组件没有很强的关联,但有时组件需要获知,以便组件内部处理)

   */

  pageLifetimes: {

    show() {

      // 组件所在的页面被展示时执行

    },

    hide() {

      // 组件所在的页面被隐藏时执行

    },

    resize(size) {

      // 组件所在的页面尺寸变化时执行(参数:Object Size)

    }

  },

   /**

   * 组件相关选项设置(例如slot节点的开启在这里设置)

   */

  options: {

  },

  /**

   * 组件的属性列表

   */

  properties: {

    myProperty: { // 属性名

      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)

      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个

      observer(newVal, oldVal, changedPath) {

        // 属性被改变时执行的函数(可选),通常 newVal 就是新设置的数据, oldVal 是旧数

        // 新版本基础库不推荐使用这个字段,而是使用 Component 构造器的 observer 字段代替(这样会有更强的功能和更好的性能)

      }

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

  },

  /**

   * 组件的方法列表

   */

  methods: {

//组件中的变量要传递到page可以通过事件触发this.triggerEvent()来执行

  },

  /**

   * 数据监听器,监听和响应任何属性和数据字段的变化

   */

  observers: {

    'numberA, numberB': function (numberA, numberB) {

      // 在 numberA 或者 numberB 被设置时,执行这个函数

      this.setData({

        sum: numberA + numberB

      })

    }

  },

  /**

   * 组件间关系定义

   */

  relations: {

    './custom-li': {

      type: 'child', // 目标组件的相对关系,可选的值为 parent、child、ancestor 、descendant

      linked(target) {

        // 关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件attached生命周期之后

      },

      linkChanged(target) {

        // 关系生命周期函数,当关系在页面节点树中发生改变时触发,触发时机在组件moved生命周期之后

      },

      unlinked(target) {

        // 关系生命周期函数,当关系脱离页面节点树时触发,触发时机在组件detached生命周期之后

      }

      //target:如果这一项被设置,则它表示关联的目标节点所应具有的behavior,所有拥有这一behavior的组件节点都会被关联

    }

  }

})

使用组件:

    在page中使用已定义的组件,首先要在json文件中声明。

"usingComponents": {

    "people-select": "/components/people-select"

  }

在wxml中进行组件的引用。

<view>

<people-select showModel="{{showModel}}" bindpeopleselect="onShow"></ people-select>

</view>

以上内容都是看小程序文档总结的,如果有不懂的地方,写一个小demo差不多就能理解了。

附开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

相关文章

网友评论

      本文标题:小程序自定义组件简介

      本文链接:https://www.haomeiwen.com/subject/tbxxpqtx.html