WeChat Mini Programs rely heavily on components, tags, and templates to structure UI and logic efficiently.
Components
Components encapsulate reusable logic and UI elements. A custom component consists of four files: .json, .wxml, .wxss, and .js. To declare a directory as a custom component, set "component": true in the JSON file:
{
"component": true
}
The .wxml defines the structure, .wxss handles styling (similar to CSS), and .js contains component logic. For example:
<view class="container">
<view class="user-profile">
<button wx:if="{{!userInfoLoaded && apiAvailable}}" open-type="getUserInfo" bindgetuserinfo="handleUserInfo">
Fetch Profile
</button>
<block wx:else>
<image bindtap="onAvatarClick" class="avatar" src="{{user.avatarUrl}}" mode="cover" />
<text class="nickname">{{user.nickName}}</text>
</block>
</view>
</view>
Common Tags
Mini Programs use built-in tags analogous to HTML elements:
| Tag | Description |
|---|---|
view |
Block-level container; often styled with Flexbox for layout (display: flex, justify-content, align-items). |
text |
Renders plain or styled text content. |
icon |
Displays icons using built-in icon fonts; custom icons are best implemented via SVG sprites or icon fonts. |
input |
Text input field; vertical alignment is handled internally—no need for line-height or padding. Note: checkboxes and radios are separate components. |
picker |
Provides seelction interfaces (plain, date, time). Uses bindchange to retrieve selected values from a predefined range. |
navigator |
Navigates between pages. Supoprts relative/absolute paths. Default behavior pushes a new page; use redirect to replace the current one. Limited to 5-level deep navigation. |
image |
Behaves like a background-image. Default size is 320×240px; must be overridden via styles. |
button |
Triggers actions or navigations via open-type or event bindings. |
Templates
Templates enable reuse of common UI structures across multiple pages. Define named templates in a .wxml file:
<!-- list item without arrow -->
<template name="menuItemSimple">
<view class="menu-item">
<navigator url="{{item.path}}">
<text>{{item.label}}</text>
</navigator>
</view>
</template>
<!-- list item with arrow indicator -->
<template name="menuItemArrow">
<view class="menu-item has-arrow">
<navigator url="{{item.path}}">
<text>{{item.label}}</text>
</navigator>
</view>
</template>
Accompanying styles in .wxss:
.menu-item {
line-height: 80rpx;
color: #555;
font-size: 35rpx;
padding: 0 0 0 10rpx;
position: relative;
}
.has-arrow::after {
content: '>'; /* or use background image */
position: absolute;
right: 20rpx;
}
To use the template in another page:
<import src="../../templates/menu.wxml" />
<view class="fixed-container">
<scroll-view scroll-y="true" style="height: 100%;">
<template wx:for="{{navigationItems}}" is="menuItemArrow" data="{{item}}" />
</scroll-view>
</view>