This page is translated by Cloud Translation API
Switch to Chinese
This page is translated by Cloud Translation API
Switch to Chinese

# Introductory tutorial for component usage

  • Component is the basic unit of the view layer.
  • Component is the encapsulation of a single and reusable functional module.

Each component includes the following parts: start tag and end tag marked by component name, component content, component attribute and component attribute value.

  • The component name is wrapped in angle brackets, called tag, which has a start tag and an end tag. Use / after < of the end tag to indicate the end. An end tag is also called a closing tag. For example, in the following example, <component-name> is the start tag, and </component-name> is the end tag.
  • The content between the start tag and the end tag is called component content. For example, content in the example below
  • Attributes can be written on the start tag, and there can be multiple attributes, which are separated by spaces. For example, property1 and property2 in the following example. Note that attributes cannot be written on closing tags.
  • Each attribute is assigned a value by =. As in the example below, the value of the attribute property1 is set to the string value.

Note: All component and attribute names are lowercase, with hyphens between words connected by a hyphen -.

<component-name property1="value" property2="value">
	content
</component-name>

The following is an example of a basic component. Insert an <button> component under the root <view> component of a vue page. Write the text "button" in the content area of this component, and set an attribute "size" for this component, and the attribute value of "size" is set to "mini".

Note: According to vue single file component specification, the root node of each vue file must be <template>, and there must be only one root <view> component under this <template>.

<template>
	<view>
	</view>
</template>

By understanding the documentation of button component, we can see that the above code will draw a button on the page, the text displayed on the button is "button", and the size of the button is small.

# Attribute type of components

There are many types of attributes of components:

Type Describe Annotation
Boolean Boolean value The attribute is written on the component, no matter what the attribute is equal to, its value is true. Only when the attribute is not written on the component, the attribute value is false. If the attribute value is a variable, the value of the variable will be converted to the Boolean type.
Number Digit 1, 2.5
String String "string"
Array Array [ 1, "string" ]
Object Object { key: value }
EventHandler Event handler function name handlerName is the name of the event handling function defined in methods
Any Arbitrary attribute

The following example shows an example of setting boolean values and numbers to properties of a component. Note that false is used as a js variable. When using it in the properties of a component, the property needs to be prefixed with a : colon. The property value is still wrapped in quotation marks, but the quotation marks are not strings, but js.

<template>
	<view>
	</view>
</template>

# Public attribute list

Each component has its own defined attributes, but all components of Mini App have the following attributes:

Attribute name Type Describe Annotation
id String Unique identifier for components It is generally used to obtain the component context object (such as: VideoContext), and the entire page needs to be unique
ref String Unique identifier of components in vue It is used to register reference information for sub-components
class String Style class of components Style class defined in the corresponding css
style String Inline styles of components Inline style that can be set dynamically
hidden Boolean Whether components are hidden? All components are displayed by default
data-* Any Custom attributes When event is triggered on component, it will be sent to the event handler.
@* EventHandler Events of components For details, please refer to the detailed documentation of each component. For event binding, refer to Event Handler

In addition to the above public properties, there is also a special class of properties starting with v-, called vue directives, such as v-if, v-else, v-for, v-model. For details, see vue command

# Use js variables in components

js variables defined in the data of script can be used in the component, but the usage in the attributes of the component is different from that in the content area.

  • When used in the content area, use two curly braces to wrap, such as the following buttonText
  • When used in attribute values, the attribute name should be prefixed with a colon.

The following examples of button component are equivalent to the previous examples. Only that the static content is changed to dynamic js.

<template>
	<view>
		<button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"buttondisble":false
			}
		}
	}
</script>

# Component events

Each component has an "event". Event is to trigger a js method under specified conditions.

For example, if button component has a click event, that means when the mobile phone user clicks the button component, this event will be triggered.

Events are also attributes of components, but such attributes are prefixed with @.

The attribute value of the event points to a js method defined in the methods of script, and you can also pass parameters to the method.

The following are examples of component events:

  • click is the click event of the button component, which is triggered when the user clicks the button
  • click points to the goto method defined in methods and passes the parameter '/pages/about/about'
<template>
	<view>
	</view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
            }
        }
    }
</script>

# Basic component

Mini App components are divided into basic components and extended components.

The basic components have been built in the Mini App framework. There is no need to import the files of the built-in components into the project or register the built-in components, which can be used directly at any time, such as the <view> component.

All components other than the basic components are called extended components. The extended components can be used only after they are imported into the project.

Mini App provides developers with a series of basic components, similar to the basic tag elements in HTML.

However, the components of Mini App are different from HTML, but are the same as small programs, which can better meet the usage habits of mobile phones.

Although HTML tags are not recommended, in fact, if developers write tags such as div, they will be converted to view tags by the compiler when they are compiled to a non-H5 platform. Similarly, span is converted to text, A is converted to navigator, etc., including the element selector in css. However, for the sake of convenient management and unified policies, it is still recommended to use components such as view when writing new code.

Developers can combine these basic components for quick development. It can be encapsulated as an extended component if reuse is needed.

	<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
		<view class="picker">
		</view>
	</picker>

# List of basic components

Basic components are divided into the following ten categories:

View Container:

Component name Instruction
view View container, similar to div in HTML
scroll-view scrollable view container
swiper Slider view container, such as for carousel banner
match-media Dynamic screen adaptation component, such as some content not displayed on narrow screen
movable-area Dragable area
movable-view A movable view container that can be dragged, swiped or pinch-zoomed on the page. movable-view must be in movable-area component
cover-view A text component that can be covered on the native component
cover-image An image component that can be covered on the native component

Basic Content:

Component name Instruction
icon icon
text characters
rich-text Rich Text Display Component
progress Progress bar

Form:

Label name Instruction
button Button
checkbox Multiple selectors
editor Rich text input box
form form
input Input Box
label label
picker Popup Picker
picker-view Form inline list selector
radio Single selector
slider Slide selector
switch Switch selector
textarea Multi-line text input box

Routing and Page Navigation:

Component name Instruction
navigator page link. Similar to the a tag in HTML

Media:

Component name Instruction
audio Audio
image Image
video Video

Map:

Component name Instruction
map map

Canvas:

Component name Instruction
canvas Canvas

webview(Web-view):

Component name Instruction
web-view web browser component

Page attribute configuration

Component name Instruction
custom-tab-bar Bottom tabbar custom component
navigation-bar Top Navigation
page-meta Page property configuration node

# Meaning of extending components

Although all business requirements can be met by basic components, but basic components alone are inefficient, and there will be many encapsulated components in actual development.

Import this neu-rate component into your Mini App project, refer to it in the required vue page, and you can display this five-pointed star component in the specified place.

	<!-- Refer the neu-rate component on the index.vue page -->
	<template>
		<view>
			<neu-rate></neu-rate> // show a rate
		</view>
	</template>

Advantages of encapsulated extended components:

  • Components can be reused arbitrarily.
  • Reasonable division of components is helpful to improve the application performance.
  • The code is more convenient for organization and management, and has stronger expansibility, which is convenient for collaborative development by many people.
  • Component-based development can greatly improve the efficiency, testability and reusability of application development.

# Component categories

The components supported by Mini App are divided into vue components and small program custom components.

If the extension component conforms to the easycom component specification of Mini App, it can be used directly without registration.

For the components not conforming to the easycom specification, you need to manually import and register these components in the code before implementation.

Let us explain them one by one.

About Neuxnet: Neuxnet Website