Componentization of WeChat Mini Program Development Road

Componentization of WeChat Mini Program Development Road

Similar to pages, custom components have their own  wxml templates and  wxss styles.

Official link

Componentization, in turn, understand, write repeated pages and methods, and it will be annoying to write the second time. Extracting out is componentization, which can be understood as a common method

For general data, the first thing you think of or should contact is template, but template has a shortcoming, that is, it is only page effect, and there will be no corresponding js operation.

WeChat applet componentization, why have custom components? Each page has corresponding js (JavaScript), json (configuration config), wxml (html), wxss (css). What's not so good? Why do you need it? Custom components, of course, are sufficient for a specific page, but if it is a common page that needs the same effect, or similar effect, you should repeat the operation step by step. It is reasonable to exist. Yes, a custom component can be understood as a custom label, a fragment of a page.

Of course, this is just the most basic thinking. Since it is a component, it is a one-to-many relationship for pages. Multiple pages are woven into components, how do they link up? The pages page can pass values ​​to the component component, and the natural component will also correspond to the callback method customized by pages. As long as you can think of and want to achieve, there will be corresponding offers.

Implementation method, create a new component in the directory, it will automatically generate the corresponding js, json, wxml, wxss, basically similar to pages

Take a look at the contents of each component file


options, multipleslots:true Enable multiple slot support in the build.

properties, which can define some properties of receiving pages.

data, the data of the component

method, the method of component extraction

Specific usage

1. you need to configure the components in the json of the pages page

Talk about options

You can in the wxml of the component

Specify the corresponding pages page content through the name attribute of the slot


Talk about properties

Pass a num attribute in the custom label

In the component can be passed through properties

Get the num value can be obtained through

Data usage is the same as page.

The most important thing is the method event

Relative to components, page is a one-to-many process

Since it is extracted, the components can only do some common things, and some private implementations must be introspected through the page.

This involves callbacks. For example, add a bindtap method to the component.

But the customevent method of this component page is bound.

Corresponding pages

In methods, call the method implemented by page itself through treggerEvent.

ok, this is an introduction to componentization

My blog is about to be moved and synchronized to Tencent Cloud + community, and everyone is invited to join:

Reference: Componentization of WeChat Mini Program Development Road-Cloud + Community-Tencent Cloud