foreword
When I was doing small program development before, the more headache for development was custom components. At that time, the official documentation on this aspect was only a few sentences, and it was only a brushstroke, so it was really very, very painful to write! !
Fortunately, the library of WeChat applet started from 1.6.3, and the official has made relatively big changes to the custom component. First of all, the obvious feeling is that there are more documents than before, and there are trees! ( Mini Program documentation ), now the Mini Program supports concise component programming, which can abstract the functional modules in the page into custom components for reuse in different pages, improve the readability of your own code, and reduce your own maintenance code. the cost of!
This article is to teach you how to implement custom components in small programs, sit tight~
Implementation
To make a custom component, we first set a small goal. For example, we implement the pop-up window component in WEUI in the applet. The basic rendering is as follows.
WEUI popup
Step1
We initialize a small program (the basic version library of this example is 1.7), delete the sample code in it, and create a new components folder to store the components we will use in future development. Today our purpose is to implement a pop-up frame component, Therefore, we components create a new Dialog folder in the component to store our pop-up window component Dialog . After right-clicking Component and naming dialog it, the corresponding json wxml wxss js 4 files will be generated, that is, a component of a custom component. At this time, your The project structure should look like the following image:
Project structure
Step2
The component initialization work is ready, and the next step is the related configuration of the component. First, we need to declare the custom component, that is, set the dialog.json middle component field to true :
Secondly, we need dialog.wxml to write the popup window component template in the dialog.wxss file, and add the popup window component style to the file. Their writing method is similar to the writing method of the page. I will not go into details, just paste the code~
dialog.wxml The files are as follows:
dialog.wxss The files are as follows:
step3
The structure and style of the component are all there, what is missing, yes, it is still missing, js students with sharp eyes may have found that we dialog.wxml will have some template variables such as {{ isShow }} , in the file, and also define and two A method, its specific implementation is in .{{ title }}_cancelEvent_confirmEventdialog.js
dialog.jsComponent It is the constructor of the custom component, which is generated by the constructor in the applet. When calling the Component constructor, it can be used to specify the properties, data, methods, etc. of the custom component. For details, please refer to the official documentation.
Below I explain the use of some properties in the constructor through code comments:
step4
By now, you should be done with most of a custom popup component, but you won't notice any changes after saving, because we still need index.wxml to import it in the file!
First you need index.json to introduce components in:
Then we index.wxml introduce it in and add some of our custom values, as follows
Well, there is still the last step, index.js configuration, yes, this is also very simple, I will copy and paste
There you go! You're done!
step5
Let's test it out and try it out:
initialization
After clicking the button, the following effect will appear:
popup window appears
If you click the Cancel or OK button, we set the pop-up window to close in the event and print out the corresponding information. What should be done after the click is up to you, I can only help you here~