tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module

Custom Components

PDF
Focus Mode
Font Size
Last updated: 2024-11-21 18:34:18

Component

Create a custom component that accepts a Object Parameter of type.

parameter

Object object
definition segment
type
Is it necessary to fill out
describe
properties
Object Map
no
External properties of a component are a map of property names to property settings
data
Object
no
Component's internal data, and properties Template rendering for components together
observers
Object
no
Component data field listener for listening properties and data See the changes in Data listener
methods
Object
no
Component, including event response functions and arbitrary custom methods. For the use of event response function, see Inter-component communication and events
behaviors
String Array
no
Inter-component code reuse mechanisms similar to mixins and traits, see behaviors
created
Function
no
Component lifecycle function - executes when the component instance has just been created, noting that it cannot be called at this time setData
attached
Function
no
Component life cycle function - executed when component instance enters page node tree
ready
Function
no
Component Life Cycle Function - Executed after component layout is complete
detached
Function
no
Component Lifecycle Function - Executes when component instance is removed from page node tree
relations
Object
no
Relationship definitions between components, see Inter-component relations
externalClasses
String Array
no
External style classes accepted by the component, see External style class
options
Object Map
no
Some options (specific option settings are covered when the features are described in the documentation, not listed here)
lifetimes
Object
no
Component lifecycle declaration object, see Component life cycle
pageLifetimes
Object
no
The lifecycle declaration object for the page on which the component resides, see Component life cycle
Generated component instances can be found in component methods, lifecycle functions, and properties observer Through this Access. Components contain common properties and methods.
Attribute name
type
describe
is
String
Component file path
id
String
Node id
dataset
String
Node dataset
data
Object
Component data,Including internal data and attribute values
properties
Object
Component data,Including internal data and attribute values(data Consistent)
Method name
parameter
describe
setData
Object newData
Set up data and perform view-layer rendering
triggerEvent
String name, Object detail, Object options
createSelectorQuery
-
Create a SelectorQuery Object, the selector selects from within this component instance
createIntersectionObserver
-
Create a IntersectionObserver Object, the selector selects from within this component instance
SelecComponent
String selector
Select the component instance node using the selector and return the first component instance object that matches wx://component-export Impact
selectAllComponents
String selector
Select the component instance node using the selector and return an array of matched component instance objects wx://component-export Impact
selectOwnerComponent
String selector
Selects the component instance of the current component node (that is, the reference to the component) and returns its component instance object wx://component-export Impact
getRelationNodes
String relationKey
Gets all the associated nodes corresponding to this relationship, see Inter-component relations
hasBehavior
Object behavior
Checks if the component has a behaviour (the check recursively checks all behaviours that have been introduced directly or indirectly).
Code example:
Component({

behaviors: [],

// Property definition (see below for details)
properties: {
myProperty: { // Attribute name
type: String,
value: ''
},
myProperty2: String // Simplified definition
},

data: {}, // Private data, available for template rendering

lifetimes: {
// Life cycle function, can be a function, or a method name defined in the methods section
attached: function () { },
moved: function () { },
detached: function () { },
},

// Life cycle function, can be a function, or a method name defined in the methods section
attached: function () { }, // The attached declaration here is overwritten by the declaration in the lifetimes field
ready: function() { },

pageLifetimes: {
// Life Cycle Function for the Page on which 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 that of updating page data
})
},
// The internal method recommends starting with an underscore
_myPrivateMethod: function(){
// Here will be data.A[0].B Set to 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {

}
}

})

properties definition

Definition segment
type
Is it necessary to fill out
describe
type
-
yes
Type of attribute
value
-
no
The initial value of the
observer
Function
no
Callback function when attribute value changes
Property values can be changed using the observer To monitor. Currently, this field is not recommended in the new version of the base library; instead, use the Component Constructor observers Field, which is more powerful and better performance.
Note:
The type field in the definition field is mandatory.
Code example:
Component({
properties: {
min: {
type: Number,
value: 0
},
min: {
type: Number,
value: 0,
observer: function(newVal, oldVal) {
// When property values change
}
},
lastLeaf: {
// This property can be Number 、 String 、 Boolean One of three types.
type: Number,
optionalTypes: [String, Object],
value: 0
}
}
})
Property can be of type String Number Boolean Object Array One, can also be null Represents an unrestricted type.
In most cases, it is best to specify an exact type for a property. So, in... WXML When an attribute value is specified literarily in, the value can obtain an exact type, such as:
<custom-comp min="1" max="5" />
At this point, because the corresponding property of the custom component is specified as Number Type, min and Max Is going to be assigned to 1 and 5 Instead of "1" and "5" , namely:
this.data.min === 1 //
truethis.data.Max === 5 // true

Tips:

Use this.data Can get internal data and attribute valuesBut modifying it directly does not apply changes to the interface, and you should use the setData Modify;
Lifecycle functions cannot be passed through component methods this Access to;
Property names should be avoided with data Beginning, that is, do not name dataXyz This form, because in WXML In, data-xyz="" Will be used as nodes dataset Instead of component properties;
In the definition and use of a component, the component's attribute name and data Fields cannot conflict with each other (although they are in different definition segments).

Behavior

Register a behaviorAccept one. Object Parameter of type.

parameter

Object object
Definition segment
type
Is it necessary to fill out
describe
properties
Object Map
No
Properties of the same component
data
Object
No
Properties of the same component
methods
Object
No
Same method as custom components
behaviors
String Array
No
For a mechanism for reusing code between components similar to mixins and traits, see behaviors.
created
Function
No
Component Lifecycle Functions - executed when the component instance has just been created, note that setData cannot be called at this time.
attached
Function
No
Component Lifecycle Functions - executed when the component instance enters the page node tree
ready
Function
No
Component Lifecycle Functions - executed after the component layout is complete
detached
Function
No
Component Lifecycle Functions - executed when the component instance is removed from the page node tree
relations
Object
No
For definitions of inter-component relationships, see Inter-component Relationships
lifetimes
Object
No
Component Lifecycle Declaration Object, see Component Lifecycle
pageLifetimes
Object
No
The lifecycle declaration object for the page on which the component resides, see Component Lifecycle
Code example:
// my-behavior.js
module.exports = Behavior({
behaviors: [],
properties: {
myBehaviorProperty: {
type: String
}
},
data: {
myBehaviorData: {}
},
attached: function(){},
methods: {
myBehaviorMethod: function(){}
}
})



Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback