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

The knowledge of this article "WeChat Mini Programs how to make components" is not quite understood by most people, so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how WeChat Mini Programs makes components" article.

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.

The above is about the content of this article on "how to make components by WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.