The official website may be relatively general for newcomers to custom components, and the page may be messy when written.
So here I write it down in detail, just read it once
WeChat applet custom component
1: Create a custom component directory (the custom component directory I created here is myComponent)
2: The custom component is similar to the page and also has four files: .js, .json, .wxml, and .wxss. Of course, for the convenience of
using the four file names used here are named myComponent
3: Component declaration in myComponent.json
{
"component": true
}
This is to set this file as a custom component
. First, show the screenshot of the project . After 
two years of native app development, I always feel that the custom control is very convenient to use. You can use it as long as you call it casually. use, convenient. However, when developing WeChat mini-programs for a period of time, I suddenly found that customization was annoying. Sometimes because of the different Android and iOS systems, it was very annoying, and the compatibility problem was a little troublesome. After struggling for two days (of course because it is too distressing to use), I finally decided to write a custom dialog.
See the screenshot, haha, don't bother you anymore, upload the code here
1: Custom control directory: myDialogComponent, in this directory create four files myDialogComponent.js, myDialogComponent.json, myDialogComponent.wxss, myDialogComponent.wxml.
2: First, you need to make a reference declaration in the myDialogComponent.json file (set the component field to true be available and set this group of files as custom components)
3: Wxss control style writing, I won't go into details here, it is similar to css style writing, just write the code here, just copy it down
myDialogComponent.wxss file
/*mask*/
.drawer_screen
{
width:
100%
;
height:
100%
;
position:
fixed
;
top:
0
;
left:
0
;
z-index:
1000
;
background:
#000
;
opacity:
0.5
;
overflow:
hidden
;
}
/*content*/
.drawer_box
{
width:
76%
;
overflow:
hidden
;
position:
fixed
;
top:
50%
;
left:
0
;
z-index:
1001
;
background:
#fafafa;
margin:
-150px
12%
0
12%;
border-radius:
3px;
}
.drawer_title {
padding:
15px;
text-align:
center;
background-color:
gazure;
}
.drawer_content {
height:
130px;
overflow-y:
scroll;
/*超出父盒子高度可滚动*/
}
.title {
height:
30px;
line-height:
30px;
width:
160
rpx;
text-align:
center;
display:
inline-block;
font:
300
28
rpx/
30px
"microsoft yahei";
}
.text {
color:
black;
}
.sureQuery {
width:
100%;
display:
flex;
flex-direction:
row;
align-items:
center;
justify-content:
space-between;
box-sizing:
border-box;
background-color:
white;
}
.btn {
width:
100%;
padding:
10px;
text-align:
center;
color:
red;
}
.btn:active{
width:
100%;
padding:
10px;
text-align:
center;
color:
red;
background-color:
gray;
}
.btnSure {
width:
100%;
padding:
10px;
background-color:
gainsboro;
text-align:
center;
}
.titleMsg {
font:
200
35
rpx/
30px;
text-align:
center;
margin-top:
45px;
display:
block;
}
.input_base {
padding-top:
3px;
padding-bottom:
3px;
max-block-size:
10;
display:
block;
background-color:
white
;
margin-top:
45px
;
border:
2
rpx
solid
#ccc
;
padding-left:
20
rpx
;
margin-right:
10%
;
border-radius:
3px
;
margin-left:
10%
;
}
4: Next is the myDialogComponent.wxml file
myDialogComponent.wxml file:
<
view
hidden
=
'{{dialogHidden}}'>
<
view
class
=
'drawer_screen'
bindtap
=
'cancleBtn'
/
>
<
view
class=
'drawer_box'>
<
view
class=
"drawer_title">提示
</
view
>
<
view
class=
'drawer_content'>
<
text
class=
'titleMsg'>{{titleMsg}}
</
text
>
<
input
class=
"input_base"
hidden=
'{{inputHidden}}'
bindinput=
"bindKeyInput"
value=
"{{inputValue}}"
maxlength=
'10'
auto-focus=
'autofocus'
placeholder=
'{{inputPlaceHalder}}'
/
>
</
view
>
<
view
class=
'sureQuery'>
<
view
bindtap=
'cancleBtn'
class=
'btn'
hidden=
'{{cancleBtn}}'>取消
</
view
>
<
view
bindtap=
'determineBtn'
class=
'btnSure'>确定
</
view
>
</
view
>
</
view
>
</
view
>
5：myDialogComponent.js文件
Component({
properties: {
inputPlaceHalder: {
type: String,
value:
' ',
},
inputHidden: {
type: Boolean,
value:
true
},
dialogHidden: {
type: Boolean,
value:
true
},
// 这里定义了innerText属性，属性值可以在组件使用时指定
titleText: {
type: String,
value:
'提示',
},
titleMsg: {
type: String,
value:
' ',
},
inputMsg: {
type: String,
value:
'请输入你他妈想干嘛',
},
//确定
determineBtn: {
type: String,
value:
'default value',
},
//取消
cancleBtn: {
type: Boolean,
value:
true,
},
},
data: {
// 这里是一些组件内部数据
inputValue:
"",
onCancleClick:
false,
},
methods: {
// 输入值
bindKeyInput:
function (e) {
this.setData({
inputValue: e.detail.value
})
},
// 这里是一个自定义方法,取消
cancleBtn:
function () {
// Properties pro = new Properties();
console.log(
"click the cancel button"
)
this
.setData({
dialogHidden:
true
,
})
},
// Sure
determineBtn:
function
() {
var
determineDetail =
this
.data.inputValue
// detail object, provided to the event listener function
this
.triggerEvent(
'determineevent'
, determineDetail)
this
.setData({
inputValue:
""
})
}
}
})
You're done, I finally finished writing the custom control, and it's time to call it next
First 1: Make a reference statement in the json of the page page used. The page page directory I use is (myDialogTestPage). Of course, the page page also has four files (js, json, wxss, wxml)
myDialogTestPage.json file
{
"usingComponents"
: {
"my-component-dialog"
:
"../../myDialogComponent/myDialogComponent" (this is the root directory structure of the custom control, it may not necessarily be this structure when you use it, pay attention, don't step on the pit)
}
}
2: use: reference in wxml
myDialogTestPage.wxml文件
<
button
bindtap=
'showCompomentDialog'>自定义组件
</
button
>
<
my-component-dialog
bind:determineevent=
"onMyEvent"
bind:cancleevent=
"cancleBtn"
dialog-hidden=
"{{isHidden}}"
title-msg=
"{{titleMsg}}"
input-hidden=
"{{inputHidden}}"
cancle-btn=
"{{cancleBtn}}"
input-place-halder=
"{{inputPlaceHolder}}"
/
>
3：myDialogTestPage.js文件
Page({
/**
* 页面的初始数据
*/
data: {
// isAdministrators:true
isHidden:
true,
titleMsg:
" ",
inputHidden:
false,
cancleBtn:
false,
inputPlaceHolder:
""
},
onMyEvent:
function (e) {
var that =
this;
console.log(
"e.detail :", e.detail)
that.setData({
isHidden:
true,
// inputHidden: false
})
},
showCompomentDialog:
function () {
var that =
this;
that.setData({
isHidden:
false,
titleMsg:
"这样真的好吗",
// inputPlaceHolder: "请输入想要发送的内容",
inputHidden:
true,
// cancleBtn: true,
})
}
})
在showCompomentDialog：function (){
}
onMyEvent方法就是点击确定按钮（这里我只是打印出来内容，比如输入框里面的内容）
中的值进行更改你们可以试一试，（//注释掉的不要随便删除哦，去掉注释可以显示不同样式，好用的话小伙伴们）