1. Component creation

① In the root directory of the project, right-click and create the Components -> test folder

② In the new Components -> Test folder, right click “New Component”

③ Enter the name of the component and press Enter. The file name extension is.js,.json,.wxml and.wxss

Note: To ensure a clear directory structure, it is recommended to store different components in separate directories. For example:

2. Reference components

Component references are divided into “local reference” and “global reference”, as the name implies: ⚫ local reference: a component can only be used within the page it is currently referenced ⚫ Global reference: a component can be used within each applet page

3. Locally reference components

The way components are referenced in a page’s.json configuration file is called a “local reference.” Example code is as follows:

4. Global component references

The way components are referenced in the app.json global configuration file is called “global reference.” Example code is as follows:

5. Comparison of global and local components

Select a reference mode based on the frequency and range of components. ⚫ If a component is frequently used on multiple pages, global reference is recommended. ⚫ If a component is only used on specific pages, local reference is recommended

6. Differences between components and pages

On the surface, components and pages are made up of.js,.json,.wxml, and.wxss files. However, component and page.js files are significantly different from.json files: the.json file of the ⚫ component needs to declare “Component” : The true attribute ⚫ Component’s.js file calls the Component() function ⚫ The Component’s event handler needs to be defined in the methods node

Custom components — styles

  1. Component style isolation

    By default, custom component styles apply only to the current component and do not affect those outside the component

    The UI structure is shown in the figure below:

    ⚫ The style of component A does not affect the style of component C

    The style of ⚫ component A does not affect the style of the applet page

    The styling of the ⚫ applet page does not affect the styling of components A and C

    Benefits:

    ① Prevent external styles from influencing internal styles of components

    ② Prevent component styles from destroying external styles

  1. Global styles in ⚫ app. WXSS are not applicable to components ⚫ Only class selectors have style isolation effect, id selectors, attribute selectors, label selectors are not affected by style isolation suggestion: It is recommended to use class selectors instead of ID, attribute, and tag selectors in components and pages referencing components
  1. Modify the component’s style isolation options

    By default, the style isolation feature of a custom component prevents styles from interfering with each other inside and outside the component. But sometimes we wish we could on the outside

    To control the styles within the component, you can change the styleIsolation options for the component using styleIsolation as follows:

  1. Optional value for styleIsolation

Custom components — Data is, methods and properties

  1. The data of data

    In an applet component, private data for component template rendering needs to be defined in the data node as shown in the following example:

  1. Method the methods

    In the applet component, event handlers and custom methods need to be defined in the Methods node, as shown in the following code:

  1. The properties attribute

    In an applet component, properties is the external property of the component that receives data passed to the component from the outside world, as shown in the following code:

  1. Data and properties

    In applets’ components, the properties property is used in the same way as the data data. They are both readable and writable, except that:

    ⚫ Data prefers to store component private data

    ⚫ Properties prefers to store data passed in from outside the component

  1. Use setData to modify the value of properties

    Since data data is essentially no different from the Properties property, the value of the properties property can also be used for page rendering,

    Or reassign a property in properties using setData as follows:

9. Custom components — Data listeners

  1. What is a data listener

    Data listeners are used to listen for and respond to changes in any properties and data fields to perform specific operations. It works similarly to vUE

    Watch listener. In applets, the basic syntax format of a data listener is as follows:

  1. Basic usage of data listeners

    The UI structure of the component is as follows:



    The.js file for the component looks like this:

  1. Listen for changes in object properties

    A data listener supports listening for changes to one or more attributes in an object, with the following syntax for example:

Custom components — Pure data fields

  1. Pure data field concepts: Pure data fields refer to data fields that are not used for interface rendering. Application scenarios: For example, in some cases, the fields in some data are not displayed on the interface, nor are they passed to other components, but are only used within the current component. Data fields with this feature are suitable to be set as pure data fields. Benefits: Pure data fields help improve page update performance.
  1. Use rules

    In the Options node of the Component constructor, specify pureDataPattern as a regular expression that matches the field name

    The fields of the expression will become pure data fields, as shown in the following code:

Custom components — Component lifecycle

  1. The entire lifecycle functions of a component

    The full life cycles available to applets are shown in the following table:

  1. Component main life cycle functions In small program components, the most important three life cycle functions are created, Attached, and detached. Their respective characteristics are as follows: (1) The created lifecycle function is triggered when the component instance is newly created ⚫ setData ⚫ cannot be called at this time. Normally, this lifecycle function should only be used to add custom property fields to this of the component. (2) After the component has been fully initialized and entered the page node tree, The attached life cycle function is triggered ⚫ at which point this.data has been initialized ⚫ This life cycle is useful because most of the initialization can be done at this point (such as making a request to get the initial data) ③ after the component leaves the page node tree, The detached life cycle function is triggered ⚫ when you quit a page, the detached life cycle function ⚫ for each custom component in the page is triggered. This is a good time to do some cleanup work
  1. Lifetimes node

    In applets, lifecycle functions can be defined directly in the first level argument of the Component constructor, which can be in the LifeTimes field

    Declaration (this is recommended and has the highest priority). Example code is as follows:

12. The life cycle of the page where the component resides

  1. What is the lifecycle of the page on which the component resides

    Sometimes, the behavior of a custom component depends on changes in page state, and the lifecycle of the page on which the component resides is needed.

    For example, whenever the page’s show lifecycle function is triggered, we want to be able to regenerate a random RGB color value.

    In a custom component, the lifecycle functions of the page where the component resides are as follows:

  1. PageLifetimes node

    The lifecycle function of the page on which the component is located needs to be defined in the pageLifetimes node, as shown in the following code:

  1. Generates random RGB color values



13. Custom components — slots

  1. What is a slot

    In the WXML structure of a custom component, you can provide a node (slot) to host the WXML structure provided by the consumer of the component.

  1. A single slot

    In applets, only one placeholder per custom component is allowed by default. This limit is called a single slot

  1. Enabling Multiple slots

    To enable multiple slots in a customized component of a small program, perform the following operations in the component’s.js file.

    Example code is as follows:

  1. Define multiple slots

    You can use multiple tags in the component’s.wxml, with different names to distinguish between different slots. Example code is as follows:

Communication between parent and child components

1. Three modes of communication between parent and child components

① The property binding ⚫ is used to set the specified property data from the parent component to the child component. Only jSON-compatible data can be set. ② The event binding ⚫ is used to transfer data from the child component to the parent component. The parent component can also get the child component instance object ⚫ via this.selectComponent() so that it can directly access any data and methods of the child component

2. Attribute binding

Property binding is used to allow parents to pass values to children and can only pass data of normal types, not methods to children. Sample code for the parent component

As follows:



3. Event binding

Event bindings are used to pass values from child to parent, and can pass any type of data. The steps are as follows:

In the parent component’s JS, define a function that will be passed to the child component in the form of a custom event

② In the parent component’s WXML, pass the function reference defined in Step 1 to the child component in the form of a custom event

TriggerEvent (‘ custom event name ‘, {/* parameter object */})

④ In the js of the parent component, the data transmitted by the child component is obtained by e. fix

4. Obtain the component instance

You can call this.selectComponent(” ID or class selector “) in the parent component to get an instance object of the child and access the child group directly

Arbitrary data and methods of the. Call with a selector, such as this.selectComponent(“.my-component”)

Customize components – Behaviors

1, define,

Behaviors are features of small programs that enable code sharing between components, similar to mixins in vue.js.

2. Behaviors

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data, and methods are merged into the component. Each component can reference multiple behaviors, and behaviors can reference other behaviors

Create behavior

Call the Behavior(Object Object) method to create a shared Behavior instance Object for all components to use:

4. Import and use behavior

In the component, use the require() method to import the desired behavior, mount it to access the data or methods in the behavior, sample code

As follows:

5. All available nodes in behavior

6. Rules for covering and combining fields with the same name

The component and its referenced behaviors can contain fields with the same name. In this case, you can refer to the following three processing rules: For detailed coverage and combination rules, you can refer to the official document of wechat applet: source document

Previous section: Getting started with wechat Applet II (Page navigation, Events, Life Cycle, WXS Scripts)

Reference video: Zero basis to play wechat small program