Article directory
Basic use of small program component development
Small program componentization idea
Component slot definitions use
When the applet was just launched, it did not support componentization, which was also criticized :
But since v1.6.3, applet began to support the development of custom components, which also makes it more convenient for us to use componentization in the program.
The application of componentization thinking :
With the idea of componentization, we will make full use of it in subsequent development.
Split the page into small, reusable components as much as possible.
This makes our code easier to organize and manage, and more scalable.
Therefore, components are a very important chapter in the development of small programs at present, and we must study them carefully ( but the idea of componentization of small programs is basically the same as the idea of componentization of Vue ) .
The process of customizing components
Similar to pages, custom components consist of 4 files json wxml wxss js .
According to my personal habits, we will first create a folder components in the root directory, and store the public components we customize later in this file;
A common custom component will contain the corresponding four files;
Steps to customize components :
1. First, you need to declare a custom component in the json file (set the component field to true, and this set of files can be set as a custom component)
2. Write our own component's own template in wxml
<!--components/section-info/section-info.wxml-->
<view class="section">
<view class="title">我是标题</view>
<view class="content">我是内容: 哈哈哈哈</view>
</view>
3. Write the relevant styles that belong to our component in wxss
/* components/section-info/section-info.wxss */
.title {
color: skyblue;
font-size: 40rpx;
font-weight: 700;
}
.content {
color: #333;
font-size: 30rpx;
}
4. In the js file, you can define data or related logic inside the component ( not used for now )
After defining the component, we can use the custom component
usingComponentsWe need to configure the properties of the page's json file under the page where we want to use the custom component
usingComponentsThe property corresponds to an object, the key represents the name of the component to be used, and the value represents the path of the component to be used
- For example, if I want to use custom components on the index page, I need to configure it in the json file of the index page
After the configuration is complete, you can use the custom component in the wxml file of the configuration page
<section-info />
<section-info />
<section-info />
<section-info />
Notes :
Custom components can also reference other custom components, and the reference method is similar to the way pages reference custom components (using
usingComponentsfields).The root directory name of the project where custom components and pages are located cannot be prefixed with "wx-", otherwise an error will be reported.
If a component declared in usingComponents of app.json is a global component, then all pages and components can use this component directly without registering it separately on the page.
Component style implementation details
Topic 1: Does the style inside the component affect the style outside the component?
Conclusion 1: The class style in the component only takes effect on the nodes in the component wxml, and does not take effect on the Page page that references the component.
- We still use the components written above to test
Conclusion 2: The id selector, attribute selector, and tag selector cannot be used in the component (can be used in the page ), try to use the class selector
Topic 2: Influence of external styles on styles in components
Conclusion 1: The style of the class used externally is only valid for the class of the external wxml, and does not take effect within the component.
Conclusion 2: The id selector and attribute selector used externally will not affect the component
Conclusion 3: The tag selector is used externally, which will affect the component ( so the tag selector is not recommended )
Topic 3: How to make classes affect each other
In the Component object, you can pass in an options property, which has a styleIsolation property in the options property.
styleIsolation has three values:
isolated means to enable style isolation, inside and outside the custom component, the styles specified by class will not affect each other (default value) ;
apply-shared means that the page wxss style will affect the custom component, but the style specified in the custom component wxss will not affect the page;
shared means that the page wxss style will affect the custom component, and the style specified in the custom component wxss will also affect the page and other settings, ( both affect each other )
// components/section-info/section-info.js
Component({
options: {
styleIsolation: "shared"
}
})