How to customize the development components of Mini Program
This article mainly explains "how to customize the development components of Mini Program". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas slowly and deeply. Let's study and learn how to customize the development components of Mini Program.
In the first way, the following is the basic component of a component, and the stylesheet is not written.
Index.wxml of the component
[html] view plain copy
I am the component.
The value of the passed in component: {{text}}
The value inside the component {{data}}
The method was called
Index.js of the component
[javascript] view plain copy
Component ({
Properties: {
/ / the external properties of the component are defined here, and the property values can be specified when the component is in use.
Text: {
Type:String
Value:''
}
}
Data: {
/ / here are some internal data of the component.
Data: "I am the component"
Show:false
}
Methods: {
/ / here is a custom method
Show: function () {
This.setData ({show:true})
}
}
})
Index.json of the component
[javascript] view plain copy
{
"component": true
}
Now that the component is written, here is the introduction of the written component
The index.wxml of the page
[html] view plain copy
Here are the components
Button
The index.js of the page
[javascript] view plain copy
Page ({
OnReady: function () {
/ / get the subcomponents
This.child = this.selectComponent ("# child")
}
ClickBtn:function () {
This.child.show ()
}
})
The index.json of the page
[javascript] view plain copy
{
"usingComponents": {
"child": ".. / child/index"
}
}
This completes a component.
The second way:
Index.wxml of the component
[html] view plain copy
I am the component.
I passed the value from the parent component: {{text}}
I am the value of the component itself {{data}}
The method of the component was called
Index.js of the component
[javascript] view plain copy
Let data= {
Text:''
Data:' I am the value of the component itself.
Show:false
}
Let childPanel= {
Show:function (text) {
Let _ this=this
This.setData ({
Show:true
Text:text
})
}
}
Function child () {
Let pages=getCurrentPages ()
Let currentPage= pages [pages. Length-1]
This.__page=currentPage
Object.assign (currentPage,childPanel)
CurrentPage.childPanel=this
CurrentPage.setData (data)
Return this
}
Module.exports= {
Child
}
Then introduce the above js file into app.js, as follows:
App.js
[javascript] view plain copy
Import {child} from'. / child/index'
APP ({child
...
})
If a wxss file is written for the component, it should be introduced in app.wxss, as follows:
App.wxss
[css] view plain copy
@ import'. / child/index.wxss'
On the page where you need to introduce the component, it is as follows:
[html] view plain copy
Button
Js file for the current page:
[html] view plain copy
Let app=getApp ()
Page ({
Data: {
The value passed by the data:' parent component to the child component'
}
OnLoad:function () {
New app.child ()
}
ClickBtn:function () {
This.show (this.data.data)
}
})
The above app.js and app.wxss are global references. If you want a local reference, you can also write the global introduction to the local reference.
Thank you for your reading, the above is the content of "how to customize the development components of Mini Program". After the study of this article, I believe you have a deeper understanding of how to customize the development components of Mini Program. The specific use also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
