Component List
tip
In the list, components marked with are standardized components of the new version. They support property APIs, method APIs, style APIs, and custom CSS variables, and can be used as needed according to the relevant instructions in each component's documentation.
数据容器
 | Data List ListView | Suitable for scenarios where querying multiple data entries from the data source and displaying the return list in a loop, such as querying user list. |
 | data details DataView | Suitable for scenarios where querying one entry from the data source and displaying the returned data, such as querying visitor appointment details. |
 | form container Form | As the parent container for form components such as single-line input and dropdown selection, it implements data submission. |
 | Data table Table | Display multiple rows of data in table form, supporting sorting, searching, pagination, custom display content, and operations. |
布局
 | standard container Container | Can hold multiple components, commonly used to manage and control component layout. |
 | grid layout Grid | Divide the page into a multi-row, multi-column grid, and set column width for mobile terminal and PC separately. |
 | card Card | Provide card container and collapsible panel styles to handle text, buttons, images, etc. |
 | Loop banner container Swiper | For quick page building with a carousel display effect, supporting carousel redirection and playback configuration. |
 | layout component Layout | To build a page layout with top navigation |
 | scroll container ScrollView | When the component element content length exceeds the scroll container, a scrollbar appears to slide the page content. |
 | Popup Modal | Basic pop-up dialog box display effect is used to. |
 | drawer drawer | A floating panel sliding out from the screen edge. |
导航
 | Tab bar TabBar | Used to achieve basic tab interaction effects, customizable tab content, style, and page transitions. |
 | Grid navigation NavLayout | Show navigation items in grid layout style. |
 | Top tab TopTab | Used to provide tabs at the top, supporting switching between multiple tag options. |
 | side tab SideTab | Used to provide side tab layout, support switching multiple tag options. |
 | Layout navigation MenuLayout | Layout navigation |
展示
 | Text Text | Text for display page Title content |
 | Image Image | Use for image display on the webpage. |
 | button Button | For scenarios where users are advised to click to trigger specific events, such as information submission or page transitions. |
 | Markdown markdown | Show in markdown |
 | Tree Tree | Display multi-level data content in a tree structure, such as organizational structure, material information and customer classification |
 | Advanced link unifiedLink | Support clicking hyperlinks on the web. Support redirecting to Mini Program Pages in WeChat Mini Program. |
 | carousel Carousel | For quick page building with a carousel display effect, supporting carousel redirection and playback configuration. |
 | loop display Repeater | In scenarios for loop display components, an array can be displayed on the page, such as looping a news list. |
 | QR code QrCode | Generate QR code from link or text |
 | Icon. Icon | Select preset icons to implement the display effect, and also support user upload of custom icons. |
 | separator Divider | Add a separator to the webpage for layout distinction between components. |
 | Bubble prompt Bubble | Prompt for displaying a bubble. |
| Rich text display RichTextView | Convert and show rich text format data. |
 | video playback Video | Show video resources |
 | audio playback audio | Audio control feature |
 | Nine-grid lucky draw Lottery | Used to enable simple lucky draw functionality. |
 | calendar Calendar | For calendar display, such as attendance data show, schedule display. |
 | Canvas canvas | Provide canvas feature, usually used for drawing images |
 | Tag. Tag | Tag and categorize |
表单
 | single-line input Input | Input for single row content. |
 | code editor CodeEditor | For code editing. |
| Multiline input Textarea | Input for multiline content. |
 | digital input InputNumber | |
 | Rich text editing RichText | Adjustable text style, rich text form component supporting insert image, link, etc. |
 | Single-selection dropdown Select | Display options in a list format. Users can search and select operations. |
| cascading selection Cascader | Multi-level selector, commonly used in region selection, model configuration selection. |
 | dropdown multiple choice SelectMultiple | Provide multiple options in a list format for users to choose one. |
 | single selection Radio | Options are tiled on the page, and users can perform a single select operation. |
 | multiple selection Checkbox | Options are tiled on the page, and users can perform multiple select operations. |
 | Tag selection TagSelect | Show multiple Tags side by side, support single selection and multiple selection |
 | Date and time selection Date | Select date and time, support year, month, day, hour, minute, and second, Year-Month-Day, and other selection modes. |
 | Date range selection DateRange | Select year, year and month, or year, month, day, hour, minute, and second date ranges. |
 | Image upload UploadImage | For uploading images and storing image data. |
 | file upload UploadFile | For uploading local file resources, such as video, audio, PDF, Excel, and Word file types. |
 | Enabling status Switch | Enable/disable |
 | Department selection Department | Select departments at all levels in the organizational structure. |
 | Select region Region | For selecting administrative divisions (province, city, district/county). |
 | score Rating | Intuitive scoring input component |
 | progress bar Progress | A progress bar component that displays the current progress. |
 | Nested form of an object formObj | Nested form of an object |
| Array nested form formArr | Array nested form |
 | time selection Time | Select time, supports time division selection mode, such as 22:30. |
 | Attendee selection Member | Select users from the organizational structure. |
 | map location Location | Use map locating in the form. |
 | phone input InputPhone | Enter a phone number. Forced Verification checks whether the input conforms to the telephone format. |
 | URL input InputUrl | Enter a URL address. Forced Verification checks whether the input conforms to the URL format. |
 | Email input InputEmail | Used for entering an email address, it enforces verification of whether the input conforms to the email format. |
图表
 | 统计卡片 StatisticsCard | 提供报表场景下的指标数据统计并展示功能。 |
 | line chart Line | Display data trend changes over time for report scenario. |
 | histogram Bar | Data size comparison for report scenario. |
 | Pie chart Pie | Indicates the proportion of data in the report scenario for the overall. |
 | more charts Chart | A versatile chart component configurable for multiple charts such as line charts, pie charts, area charts, maps, funnel charts, and dashboards. |
小程序
 | Retrieve user mobile number Phone | Obtain the user's mobile number during mini-program execution. |
 | Mini program sharing Share | Support quick implementation of the mini program sharing feature. |
 | official account subscription OfficialAccount | The mini program can show the official account subscription portal, making it convenient for users to quickly follow or access the official account. |
 | customer service session CustomerService | Open the customer service conversation page in the mini program. |
 | mini program ad Ad | Show WeChat Advertising in mini programs to gain exposure and clicks for recommended ads, thereby helping mini programs profit. |
| Small shop homepage StoreHome | The mini program has a built-in WeChat Store homepage, shows the store homepage, and navigates to trade. |
| Small shop products StoreProduct | The mini program has built-in WeChat Store products, shows store products, and navigates to trade. It supports the WeChat Store Preferred Alliance for product promotion and commission functionality. |
高级
 | JSX component JSX | Component introduction: Native JSX code block with quick support for importing third-party component library. |
 | Nest a web page WebView | Nest a web page component in application to show the rest web pages. |
Layout Templates
 | Blank template layout MenuBaseLayout | Blank template layout |
 | Top navigation layout MenuHorizontalLayout | Commonly used for scenarios with relatively simple features or less page count |
 | Factory navigation layout MenuPlantLayout | Commonly used for showing multiple categories and portals in scenarios |
 | left-side navigation layout MenuVerticalLayout | Commonly used for showing various categories and menus in scenarios |
 | Tab navigation layout MenuTabLayout | Tab navigation layout is suitable for relatively simple content switchover scenarios |
 | Navbar layout MenuNavLayout | Commonly used to achieve top navigation effects for H5/Mini Program Pages, preset with home page and back button. When in use, switch the Navbar style to custom styles in page settings - UI styles, otherwise double navigation and blank spacing will be displayed. |
 | I-beam navigation layout MenuNavTabLayout | I-beam navigation layout is suitable for H5/mini program scenarios with top navigation and bottom Tab switching between different pages or feature modules. |