Ideas:
1. Implement layout, data binding, and event binding in the component wxml file;
2. Define the event in the component js file, and export all the contents of the file as an object;
3. Import the component in the referenced file (there are two ways, one is to import by include, the other is to import by import, details: https:/ /mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html );
4. Data transfer. Define the data to be passed in the js corresponding to the reference file, and the data name is the same as that in the component wxml file;
5. Function mapping. Import the component js object in the js corresponding to the reference file, and map the corresponding event. The mapping name must be the same as the function name.
Example: The common component is a masked pop-up window, and each page of the prompt content is also different. Take one of them as an example.
Effect picture:
Code (the code in the style part will not be posted =.=)
1.components
wxml: (If you want to import components by import, the wxml file needs to use template as the root element)
js: defines a yesIKonw event to control the closing of the masking layer
2. Reference pages
wxml: import public components through include
js: Define the data values to be passed (flag, alertInfo), and map the function yesIKnow, so that the display and hiding of the mask component can be controlled on the reference page.
PS：
1. The style wxss file of the common component needs to be introduced in the wxss file of the reference page
@import "../components/promptBox/index.wxss";
2. Mask style:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
/* stylelint-disable */ //这个是禁止styleint检测的语句
z-index: 1;
}
Author of this article: Nan Yun
Original address: Reference and control of public components of WeChat Mini Programs - Tutorial - Mini Program Community - WeChat Mini Program - WeChat Mini Program Development Community - Mini Program Development Forum - WeChat Mini Program Alliance