tencent cloud

Feedback

behaviors

Last updated: 2024-03-04 23:14:52

    Defining and Utilizing Behaviors

    Within the development of Tencent Cloud's Mini Program platform, behaviors serve as a feature for code sharing amongst components, akin to "mixins" or "traits" in certain programming languages. Each behavior can encompass a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data, and methods are merged into the component, and lifecycle functions are invoked at the appropriate time. Each component can reference multiple behaviors, and behaviors can also reference other behaviors.
    A behavior necessitates definition via the Behavior() constructor.
    Code Example:
    // my-behavior.js
    module.exports = Behavior({
    behaviors: [],
    properties: {
    myBehaviorProperty: {
    type: String
    }
    },
    data: {
    myBehaviorData: {}
    },
    attached() {},
    methods: {
    myBehaviorMethod() {}
    }
    })
    When referencing components, simply enumerate them within the behaviors definition section.
    Code Example:
    // my-component.js
    const myBehavior = require('my-behavior')
    Component({
    behaviors: [myBehavior],
    properties: {
    myProperty: {
    type: String
    }
    },
    data: {
    myData: {}
    },
    attached() {},
    methods: {
    myMethod() {}
    }
    })
    In the aforementioned example, the my-component definition incorporates my-behavior, which contains the myBehaviorProperty property, myBehaviorData data field, myBehaviorMethod method, and an attached lifecycle function. This results in my-component ultimately including two properties, myBehaviorProperty and myProperty, two data fields, myBehaviorData and myData, and two methods, myBehaviorMethod and myMethod. When the component triggers the attached lifecycle, it sequentially triggers the attached lifecycle function in my-behavior and the attached lifecycle function in my-component.

    Rules for Field Overriding and Combination

    Components and their referenced behavior can contain fields with identical names. The handling methods for these fields are as follows:
    If there are properties or methods with the same name, the component's own properties or methods will override those in the behavior. If multiple behaviors are referenced, the properties or methods in the later behavior in the definition section will override the earlier ones.
    If there are data fields with the same name and the data is of object type, an object merge will occur. If the data is of a non-object type, then mutual overriding will take place.
    Lifecycle functions do not override each other, but are instead invoked one by one at the corresponding trigger time. If the same behavior is referenced multiple times by a component, its defined lifecycle function will only be executed once.

    Built-in Behaviors

    Custom components can acquire some behaviors of built-in components by referencing the built-in behavior.
    Component({
    behaviors: ['wx://form-field']
    })
    In the above example, wx://form-field represents a built-in behavior, endowing this custom component with behavior akin to that of a form control.
    Built-in behavior often adds certain attributes to a component. Unless otherwise specified, the component can override these attributes to alter its type or add a observer.

    wx://form-field

    This endows the custom component with behavior similar to that of a form control. Form components can recognize these custom components and return the component's field name and corresponding field value in the submit event. This will add the following two attributes to it.
    Attribute
    Types
    Description
    name
    string
    Field Name in the Form
    value
    Any
    Field Value in the Form

    wx://component-export

    Enable custom components to support the export definition segment. This definition segment can be used to specify the return value when the component is called by selectComponent.
    When this definition segment is not used, selectComponent will return the this plugin of the custom component (the custom component will return null). When this definition segment is used, it will be replaced by the return value of the function in this definition segment.
    The following shows how to send a text message:
    // Inside the custom component my-component
    Component({
    behaviors: ['wx://component-export'],
    export() {
    return {myField: 'myValue'}
    }
    })
    <!-- When using the custom component -->
    <my-component id="the-id" />
    this.selectComponent('#the-id') // Equals { myField: 'myValue' }
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support