Each component includes the following parts: start tag and end tag marked by component name, component content, component attribute and component attribute value.
/
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.content
in the example belowproperty1
and property2
in the following example. Note that attributes cannot be written on closing tags.=
. 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.
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>
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
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.
buttonText
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>
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:
<template>
<view>
</view>
</template>
<script>
export default {
methods: {
goto(url) {
}
}
}
</script>
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>
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 |
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:
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.