Mini Program Development Custom Components

Dongguan applet develops custom components, creates custom components, and accepts a parameter of type Object. The generated component instance can be accessed through this in the component's methods, lifecycle functions, and property observers. Components contain some common properties and methods. Changes in property values ​​can be monitored using observers. Currently, this field is not recommended in the new version of the base library. Instead, use the observers field of the Component constructor, which is more powerful and has better performance.

Component(Object object)

Create a custom component that accepts an Object type parameter.

parameter

Object object

The generated component instance can be accessed through this in the component's methods, lifecycle functions, and property observers. Components contain some common properties and methods.

Code example:

Preview the effect in the developer tools

 Component({
  behaviors: [],
  // Property definitions (see below for details)
  properties:
    myProperty: { // property name type: String,
      value: ''
    },
    myProperty2: String // simplified definition method },
  data: {}, // Private data, can be used for template rendering lifetimes: {
    // Lifecycle function, which can be a function or a method name defined in the methods section attached: function () { },
    moved: function () { },
    detached: function () { },
  },
  // Lifecycle function, which can be a function or a method name defined in the methods section attached: function () { }, // The declaration of attached here will be overwritten by the declaration in the lifetimes field ready: function() { },
  pageLifetimes: {
    // Life cycle function of the page where the component is located show: function () { },
    hide: function () { },
    resize: function () { },
  },
  methods: {
    onMyButtonTap: function(){
      this.setData({
        // The method of updating properties and data is similar to the method of updating page data })
    },
    // Internal methods are recommended to start with an underscore _myPrivateMethod: function(){
      // Here data.A[0].B is set to 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {
    }
  }})

Note: In the properties definition section, the property name is written in camelCase (propertyName); in wxml, hyphens are used when specifying property values ​​(component-tag-name property-name="attr value"), and camelCase is used when applied to data binding (attr="").

Properties Definition

Changes in property values ​​can be monitored using observers. Currently, this field is not recommended in the new version of the base library. Instead, use the observers field of the Component constructor, which is more powerful and has better performance.

Code example:

 Component({
  properties:
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // Executed when the property value changes }
    },
    lastLeaf: {
      // This property can be one of the three types: Number, String, Boolean type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

The type of the property can be one of String, Number, Boolean, Object, Array, or null to indicate no type restriction.

In most cases, it is best to specify an exact type for a property. Thus, when specifying an attribute value as a literal in WXML, the value can have an exact type, such as:

 <custom-comp min="1" max="5" />

At this time, since the corresponding attribute of the custom component is specified as a Number type, min and max will be assigned 1 and 5 instead of "1" and "5", that is:

 this.data.min === 1 // true this.data.max === 5 // true

Bugs & Tips:

• Use this.data to get internal data and property values; but modifying it directly will not apply the changes to the interface, and setData should be used to modify it.
• Lifecycle functions cannot be accessed through this in component methods.
• Attribute names should avoid starting with data, that is, do not name them in the form of dataXyz, because in WXML, data-xyz="" will be processed as a node dataset rather than a component attribute.
• When a component is defined and used, the component's attribute names and data fields cannot conflict with each other (even though they are located in different definition sections).
• Starting from the basic library 2.0.9, the attributes and data fields of object types can contain subfields of function types, that is, functions can be passed through the attribute fields of object types. Base libraries below this version do not support this feature.
• Bug: Custom components in slots do not trigger the page lifecycle declared in pageLifetimes. This problem is fixed in 2.5.2.
• bug: For properties of type Object or Array, if a subfield of the property value is changed through the component's own this.setData, the property observer will still be triggered, and the newVal received by the observer is the value of the changed subfield, oldVal is empty, and changedPath contains information about the field name of the subfield; it is currently recommended to use the observers definition segment instead.