Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.