Small program component development

1. Small program component thinking

2. The process of customizing components

1. First, you need to declare a custom component in the json file (set the component field to true to set this group of files as a custom component):
2. Write our own template in wxml
3. Write related styles of our components in wxss
4. In the js file, you can define data or related logic inside the component 

• Custom components can also refer to custom components , and the reference method is similar to how pages refer to custom components (using the usingComponents field).
• The root directory name of the project where the custom components and pages are located cannot be prefixed with "wx-" , otherwise an error will be reported.
• If a component is declared in usingComponents of app.json , then all pages and components can directly use the component

3. Component style implementation details

4. Components use process communication

4.1 Passing data properties to components

 4.2 Pass style externalClasses to components

 4.3 Components send out custom events

via this.triggerEvent ("eventName", payload)

The parameters of the custom event are passed in event.detail

 the case

 4.4 The page directly calls the component this.selectComponent

5. Component slot definition usage 

1.  The use of a single slot (the applet slot does not support the default value, which is realized by displaying and hiding the style)
2. Use of multiple slots [named slots]

6. Mixing of Behaviros components 

  Behavior(Object object) | WeChat Open Documentation

behaviors | WeChat Open Documentation

 7. Component life cycle  Component life cycle | WeChat open document

 

• created The life cycle is triggered when the component instance is just created  . At this point, the component data  this.data is  Component the data defined in the constructor  data . Cannot call at this time  setData .  Normally, this lifecycle should only be used to  this add some custom property fields to components.
• attached The life cycle is triggered after the component is fully initialized and entered the page node tree  . At this point  this.data has been initialized to the current value of the component. This life cycle is very useful, and most of the initialization work can be done at this time.
• detached The lifecycle is triggered after the component leaves the page node tree  . When exiting a page, if the component is still in the page node tree, detached it will be triggered.

Lifecycle methods can also be written in behaviors without overwriting each other with lifecycles of the same name in other behaviors. However, it should be noted that if a component directly or indirectly refers to the same behavior multiple times, the life cycle function in this behavior will only be executed once in an execution time.

 The life cycle of the page where the component is located

There are also some special life cycles, which are not strongly associated with components, but sometimes components need to be informed so that they can be handled internally. Such a life cycle is called "the life cycle of the page where the component is located" and  pageLifetimes is defined in the definition section. Among the available lifecycles are:

Seven. Component constructor