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

In this article, the editor introduces in detail "how to customize the components of Mini Program". The contents are detailed, the steps are clear, and the details are handled properly. I hope this "how to customize components of Mini Program" article can help you solve your doubts. Let's follow the editor's way of thinking to learn new knowledge.

Mini Program provides a lot of api and basic components, but Mini Program also provides its own code reuse mechanism to reduce code complexity and improve reuse rate:

Mini Program reuse: page template (template), component template (component, in the form of tags when used).

The two templates are written in the same way as the previous page, with four files wxml,js,wxss and json

Second, we always write events and attribute values when using basic components.

Custom components also need to have their own properties and events

Properties are divided into internal and external properties, which together set the style of the component. The internal properties can be understood as the pre-installed software of the mobile phone. External attributes can be understood as the phone's app store, which can be managed manually. Of course, we will also provide an interface for users to modify internal properties.

Third, life cycle:

Components also have lifecycle functions, just like pages.

The page has: onload onready onshow onhide onunload

The components are: created attached ready detached move

Create a new component component:

Fourth, custom components, which is an official example.

Component (proprietary form of {/ / custom components, such as page ({}) of page pages, App ({}) of app files

Behaviors: []

Properties: {

MyProperty: {/ / attribute name

Type: String, / / type (required). Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type)

Value:'', / / initial value of the attribute (optional). If it is not specified, one will be selected based on the type

Observer: the function executed when the function (newVal, oldVal) {} / / attribute is changed (optional). It can also be written as a string of method names defined in the methods section, such as:'_ propertyChange'

}

MyProperty2: String / / simplified definition

}

Data: {}, / / Private data, which can be used for template rendering

/ / Lifecycle function, which can be a function or a method name defined in the methods section

Attached: function () {}

Moved: function () {}

Detached: function () {}

Methods: {

OnMyButtonTap: function () {

This.setData ({

/ / the method of updating properties and data is similar to that of updating page data.

})

}

_ myPrivateMethod: function () {

/ / Internal methods are recommended to start with an underscore

This.replaceDataOnPath (['A', 0,'B'], 'myPrivateData') / / here set data.A [0] .B to' myPrivateData'

This.applyDataUpdates ()

}

_ propertyChange: function (newVal, oldVal) {

}

}

})

Configured in the json file of the page that uses the component

{useComponents: {"Custom component name": "absolute path to the component"}} such as {useComponents: {"p": ".. / page/page"}}

Requirements: other basic components are placed in custom components.

Method: use tags in the wxml file of a custom component

Custom component: put this label in the location you want to place.

Reference page: / / it is not valid to write in the tag if you want to set the style.

Whether a component is a custom component or a basic component, it has its own properties and events.

Note: if the name attribute is written in the slot tag in the component wxml file, then you must write options: {multipleSlots:true} in the component js file, otherwise it will not work.

After reading this, the article "how to customize Mini Program components" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, 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.