The main purpose of custom components is to help us reuse code and simplify code complexity. Let's see how to create custom components.
Create components:
The component Component consists of four pages: js, json, wxml, and wxss. In order to make the directory structure clearer, it is recommended to store different components in separate directories.
Component reference
- partial reference
Local references refer to the way they are referenced in the .json configuration file of the current page
Use in wxml page
<my-test1></my-test1>- global reference
How to reference components in the app.json global configuration file
At the same level as the pages and window nodes, create a new usingComponents node
"usingComponents": {
"my-test2":"/components/test/test"
}In every wxml page can use
<my-test2></my-test2>component style
The style of the component has the characteristics of isolation. The style of the component does not affect the style of the page, and the style of the page does not affect the style of the component. Only the class selector has this isolation effect. It is recommended to use the class selector as much as possible in the component.
If you really need to modify the component style, you can add an option node in the .js file of the component, and add a styleIslation node in the option node. The styleIslation node has three values, which are isolated, which means isolation is enabled; apply-shared, which means the page wxss can affect component styles, but component styles cannot affect page styles; shared means that page styles and component styles can affect each other.