Tabela de descrição dos componentes do Mini Programa WeChat

基础组件

O framework fornece aos desenvolvedores uma série de componentes básicos, através dos quais os desenvolvedores podem realizar desenvolvimento rápido combinando esses componentes básicos.

O que é um componente: 

<tagname property="value">
  Content goes here ...
</tagename>

属性类型

Tipo Descrição Anotações
Boolean Booleano O valor deste atributo será sempre `true`, independentemente do que estiver atribuído a ele. O valor será `false` apenas se o atributo não estiver presente no componente. Se o valor do atributo for uma variável, o valor da variável será convertido para o tipo `Boolean`.
Number Números 1, 2.5
String string “string”
Array Array [ 1, “string” ]
Object Objeto { key: value }
EventHandler Nome da função de manipulação de eventos "handlerName" é o nome da função de tratamento de eventos definida na página
Any Atributo arbitrário
共同属性类型
atributo Tipo Descrição Anotações
id String Identificador único do componente Mantenha a página inteira única.
class String Classes de estilo dos componentes Classes de estilo definidas no WXSS correspondente
style String Estilo inline do componente Estilos inline configuráveis dinamicamente
hidden String O componente é exibido? Todos os componentes são exibidos por padrão.
data-* Any Atributos personalizados Quando um evento é acionado em um componente, ele é enviado para a função de tratamento de eventos.
bind* / catch* EventHandler Eventos do componente

基本组件列表

Os componentes básicos são divididos nas seguintes categorias:

Contêiner de Visualização Conteúdo Básico Formulário Navegação Multimédia Mapa Tela (Canvas)

视图容器(View Container)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
view Contêiner de Visualização hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false Especifique se deve bloquear o estado de clique dos nós ancestrais deste nó. 1.5.0
hover-start-time Number 50 Quanto tempo leva para aparecer o estado de clique ao segurar, em milissegundos?
hover-stay-time Number 400 Tempo de retenção do estado de clique após soltar o dedo, em milissegundos
scroll-view Contêiner de visualização rolável scroll-x Boolean false Permitir rolagem horizontal
scroll-y Boolean false Permitir rolagem vertical
upper-threshold Number 50 A que distância do topo/esquerda (em px) o evento scrolltoupper é acionado?
lower-threshold Number 50 A que distância do fundo/direita (em px) o evento scrolltolower é acionado?
scroll-top Number Definir a posição da barra de rolagem vertical
scroll-left Number Definir a posição da barra de rolagem horizontal
scroll-into-view String O valor deve ser o id de um subelemento (o id não pode começar com um número). Defina em qual direção pode rolar e, em seguida, role nessa direção até o elemento.
scroll-with-animation Boolean false Ao definir a posição da barra de rolagem, utilize uma transição animada.
enable-back-to-top Boolean false No iOS, ao tocar na barra de status no topo, e no Android, ao tocar duas vezes na barra de título, a barra de rolagem retorna ao topo, suportando apenas a rolagem vertical.
bindscrolltoupper EventHandle Rolando para o topo/esquerda, o evento scrolltoupper será acionado.
bindscrolltolower EventHandle Rolando até o fundo/direita, o evento scrolltolower será acionado.
bindscroll EventHandle Disparado ao rolar, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
swiper Contêiner de Visualização Deslizante indicator-dots Boolean false Exibir pontos indicadores do painel
indicator-color Color rgba(0, 0, 0, .3) Cor do ponto de indicação 1.1.0
indicator-active-color Color #000000 Cor da marcação selecionada no momento 1.1.0
autoplay Boolean false Alternar automaticamente
current Number 0 índice da página atual
interval Number 5000 Intervalo de tempo de comutação automática
duration Number 500 Duração da animação de deslizamento
circular Boolean false Adotar deslizamento de articulação
vertical Boolean false A direção do deslizamento é vertical?
bindchange EventHandle O evento de mudança é acionado quando o "current" é alterado, e event.detail = {current: current, source: source}

基础内容(Basic Content)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
icon 图标 type String icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 tamanho do ícone, unidade px
color Color cor do ícone, mesma cor do CSS
text Texto selectable Boolean false O texto é selecionável? 1.1.0
space String false 显示连续空格
有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小 		1.4.0
decode Boolean false Decodificar 1.4.0
progress Barra de progresso percent Float Nulo Porcentagem de 0 a 100
show-info Boolean false Exibir a porcentagem à direita da barra de progresso
stroke-width Number 6 Largura da barra de progresso, em px
color Color #09BB07 Cor da barra de progresso (por favor, use activeColor)
activeColor Color Cor da barra de progresso selecionada
backgroundColor Color Cor da barra de progresso não selecionada
active Boolean false Barra de progresso animada da esquerda para a direita
active-mode String backwards backwards: Animação começa do início; forwards: Animação continua de onde parou na última vez 1.7.0

表单(Form)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Momento de efetivação Versão mínima
button Botão size String default Tamanho do botão
type String default Estilo de tipo de botão
plain Boolean false O botão é oco, com fundo transparente.
disabled Boolean false Desativar
loading Boolean false O ícone de carregamento aparece antes do nome?
form-type String 用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
open-type String Capacidades de Abertura do WeChat 1.1.0
hover-class String button-hover 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false Especifique se deve bloquear o estado de clique dos nós ancestrais deste nó. 1.5.0
hover-start-time Number 20 Quanto tempo leva para aparecer o estado de clique ao segurar, em milissegundos?
hover-stay-time Number 70 Tempo de retenção do estado de clique após soltar o dedo, em milissegundos
bindgetuserinfo Handler Quando o usuário clicar neste botão, as informações do usuário obtidas serão retornadas, e os valores obtidos do parâmetro de retorno `detail` serão os mesmos que os obtidos pelo `wx.getUserInfo`. open-type="getUserInfo' 1.3.0
lang String en Especificar o idioma de retorno das informações do usuário, zh_CN chinês simplificado, zh_TW chinês tradicional, en inglês. open-type="getUserInfo" 1.3.0
session-from String Fonte da conversa open-type="contact" 1.4.0
send-message-title String Título atual Título do Cartão de Mensagem na Conversa open-type="contact" 1.5.0
send-message-path String Caminho de compartilhamento atual Caminho de redirecionamento para o miniapp ao clicar na carta de mensagem dentro da conversa open-type="contact" 1.5.0
send-message-img String Captura de tela Imagem do cartão de mensagem dentro da conversa open-type="contact" 1.5.0
show-message-card Boolean false Exibir cartão de mensagem dentro da conversa open-type="contact" 1.5.0
bindcontact Handler Retorno de mensagem do serviço de atendimento ao cliente open-type="contact" 1.5.0
bindgetphonenumber Handler Obter o número de telefone do usuário (callback) open-type="getphonenumber" 1.2.0
form Formulário report-submit Boolean Retornar o formId para enviar mensagens de modelo?
bindsubmit EventHandle Disparar o evento de submissão com os dados do formulário, event.detail = {value : {'name': 'value'} , formId: ''}
bindreset EventHandle O evento reset é acionado quando o formulário é redefinido.
input Caixa de entrada value String Conteúdo inicial da caixa de entrada
type String "text" tipo de entrada
password Boolean false É do tipo de senha?
placeholder String Placeholder quando a caixa de entrada está vazia
placeholder-style String Estilo do placeholder designado
placeholder-class String "input-placeholder" Classe de estilo para placeholder designado
disabled Boolean false Desativar
maxlength Number 140 Comprimento máximo de entrada, quando definido como -1, não há limite para o comprimento máximo.
cursor-spacing Number 0 Especifique a distância entre o cursor e o teclado, em pixels. O valor mínimo entre a distância do input até a parte inferior e a distância especificada por cursor-spacing será usada como a distância entre o cursor e o teclado.
auto-focus Boolean false (Em breve será descontinuado, por favor, use o focus diretamente) Foco automático, levantar o teclado
focus Boolean false Obter foco
confirm-type String "done" Definir o texto do botão no canto inferior direito do teclado 1.1.0
confirm-hold Boolean false Manter o teclado aberto ao clicar no botão no canto inferior direito? 1.1.0
cursor Number Posição do cursor ao definir o foco 1.5.0
bindinput EventHandle Ao digitar no teclado, o evento `input` é acionado, onde `event.detail = {value, cursor}`. A função de tratamento pode retornar diretamente uma string, que substituirá o conteúdo da caixa de entrada.
bindfocus EventHandle Disparado ao focar na caixa de entrada, event.detail = {value: value}
bindblur EventHandle Acionado quando a caixa de entrada perde o foco, event.detail = {value: value}
bindconfirm EventHandle Acionado ao clicar no botão de conclusão, event.detail = {value: value}
checkbox Seletor de múltipla escolha value String <checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled Boolean false Desativar
checked Boolean false Atualmente está selecionado, pode ser usado para definir como selecionado por padrão.
color Color cor da checkbox, igual à cor do CSS
radio Seletor de Seleção Única value String <radio/> 标识。当该<radio/> 选中时，<radio-group/> 的 change 事件会携带<radio/>的value
disabled Boolean false Desativar
checked Boolean false Atualmente está selecionado, pode ser usado para definir como selecionado por padrão.
color Color cor do rádio, igual à cor do CSS
picker
(mode = selector) 		(Comum) Seletor de Lista range Array / Object Array [] Quando o modo for "selector" ou "multiSelector", o "range" é válido.
range-key String Quando `range` é um Array de Objetos, use `range-key` para especificar o valor da chave no Objeto como o conteúdo do seletor de exibição.
value Number 0 O valor de "value" indica qual o número da seleção no "range" (o índice começa em 0).
bindchange EventHandle O evento de mudança é acionado quando o valor é alterado, e event.detail = {value: value}
disabled Boolean false Desativar
picker
(mode = multiSelector) 		(Multi-coluna) Seletor de Listas range Array Bidimensional / Array Bidimensional de Objetos [] mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]
range-key String Quando `range` é uma matriz bidimensional de objetos, use `range-key` para especificar o valor da chave no objeto como o conteúdo do seletor de exibição.
value Array 0 O valor de cada item indica qual o número da opção correspondente no intervalo (o índice começa em 0).
bindchange EventHandle O evento de mudança é acionado quando o valor é alterado, e event.detail = {value: value}
bindcolumnchange EventHandle O evento "columnchange" é acionado quando o valor de uma coluna é alterado, e event.detail = {column: column, value: value}. O valor de "column" indica qual coluna foi alterada (o índice começa em 0), e o valor de "value" indica o índice do valor alterado.
disabled Boolean false Desativar
picker
(mode = time) 		Seletor de Lista de Horários value String 表示选中的时间，格式为"hh:mm"
start String 表示有效时间范围的开始，字符串格式为"hh:mm"
end String 表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange EventHandle O evento de mudança é acionado quando o valor é alterado, e event.detail = {value: value}
disabled Boolean false Desativar
picker
(mode = date) 		Seletor de lista (data) value String 0 表示选中的日期，格式为"YYYY-MM-DD"
start String 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end String 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields String day Valor eficaz ano, mês, dia, indicando a granularidade do seletor
bindchange EventHandle O evento de mudança é acionado quando o valor é alterado, e event.detail = {value: value}
disabled Boolean false Desativar
picker
(mode = region) 		Seletor de lista (data) value Array [] Indica o estado, município e bairro selecionados, com o primeiro valor de cada coluna selecionado por padrã
custom-item String Pode adicionar um item personalizado ao topo de cada coluna. 1.5.0
bindchange EventHandle O evento de mudança é acionado quando o valor é alterado, e event.detail = {value: value}
disabled Boolean false Desativar
picker-view Seletor de lista incorporado value NumberArray Os números na matriz indicam sequencialmente a opção selecionada em cada picker-view-colume dentro do picker-view (o índice começa em 0). Se o número for maior que o comprimento das opções disponíveis no picker-view-column, a última opção será selecionada.
indicator-style String Estilo do quadro de seleção no meio do seletor
indicator-class String Definir o nome da classe da caixa de seleção do meio do seletor 1.1.0
mask-style String Definir o estilo da camada de fundo 1.5.0
mask-class String Definir o nome da classe da camada de máscara 1.5.0
bindchange EventHandle Quando o valor muda ao rolar a seleção, o evento de mudança é acionado, event.detail = {value: value}; value é um array, indicando qual item está selecionado atualmente em cada picker-view-column dentro do picker-view (o índice começa em 0).
slider Seletor de rolagem min Number 0 Mínimo
max Number 100 Máximo
step Number 0 O passo deve ser maior que 0 e divisível por (max - min).
disabled Boolean false Desativar
value Number 0 Valor atual
color Color #e9e9e9 Cor do fundo da barra lateral (por favor, use backgroundColor)
selected-color Color #1aad19 Cor selecionada (por favor, use activeColor)
activeColor Color #1aad19 Cor selecionada
backgroundColor Color #e9e9e9 Cor da barra de fundo
show-value Boolean false Exibir o valor atual
bindchange EventHandle Evento acionado após uma ação de arrastar, event.detail = {value: value}
bindchanging EventHandle Evento acionado durante o arrasto, event.detail = {value: value} 1.7.0
switch Seletor de interruptor checked Boolean false Selecionado
type String switch Estilo, valores válidos: switch, checkbox
bindchange EventHandle disparado quando `checked` é alterado, o evento `change` é acionado, `event.detail` = { value: checked }
color Color cor do switch, a mesma cor do CSS
label Etiqueta for String vincular o id do controle

导航(Navigation)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
navigator Link do aplicativo url String Links de redirecionamento dentro do aplicativo
open-type String navigate Método de redirecionamento
delta Number Válido quando open-type for 'navigateBack', indicando o número de níveis a retroceder.
hover-class String navigator-hover 指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation Boolean false Especifique se deve bloquear o estado de clique dos nós ancestrais deste nó. 1.5.0
hover-start-time Number 50 Quanto tempo leva para aparecer o estado de clique ao segurar, em milissegundos?
hover-stay-time Number 600 Tempo de retenção do estado de clique após soltar o dedo, em milissegundos
其中open-type 的有效值如下：
Valor Explicação Versão mínima
navigate Funcionalidade correspondente a wx.navigateTo
redirect Funcionalidade correspondente a wx.redirectTo
switchTab Funcionalidade correspondente a wx.switchTab
reLaunch Funcionalidade correspondente a wx.reLaunch 1.1.0
navigateBack Funcionalidade correspondente a wx.navigateBack 1.1.0

多媒体(Media)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
audio Áudio id String identificador único do componente de áudio
src String Endereço do recurso para reproduzir o áudio
loop Boolean false Repetir em loop?
controls Boolean false Exibir controles padrão
poster String Endereço do recurso de imagem da capa de áudio nos controles padrão, se o valor do atributo `controls` for `false`, a configuração de `poster` é inválida.
name String Áudio desconhecido Nome de áudio no controle padrão, se o valor do atributo `controls` for `false`, a configuração do `name` é inválida.
author String Autor desconhecido Nome do autor no controle padrão, se o valor da propriedade `controls` for `false`, a configuração de `author` é inválida.
binderror EventHandle Quando ocorre um erro, o evento de erro é acionado, detail = {errMsg: MediaError.code}
bindplay EventHandle Disparar o evento de reprodução ao iniciar/continuar a reprodução
bindpause EventHandle Quando a reprodução é pausada, o evento `pause` é acionado.
bindtimeupdate EventHandle O evento `timeupdate` é acionado quando o progresso da reprodução muda, com `detail = {currentTime, duration}`.
bindended EventHandle Quando chegar ao fim, o evento `ended` é acionado.
image Imagem src String Endereço do recurso de imagem
mode String 'scaleToFill' Modo de corte e redimensionamento de imagens
lazy-load Boolean false Carregamento preguiçoso de imagens. Somente válido para imagens dentro de `page` e `scroll-view`. 1.5.0
binderror HandleEvent Quando ocorre um erro, o nome do evento publicado no AppService, o objeto do evento event.detail = {errMsg: 'algo deu errado'}
bindload HandleEvent Nome do evento publicado no AppService quando a imagem é carregada, o objeto do evento `event.detail` = {height: 'altura da imagem em px', width: 'largura da imagem em px'}
video Vídeo src String Endereço de recurso para reproduzir o vídeo
initial-time Number Definir a posição inicial de reprodução do vídeo 1.6.0
duration Number Duração do vídeo especificada 1.1.0
controls Boolean true Exibir controles de reprodução padrão (botão de reproduzir/pausar, progresso da reprodução, tempo)?
danmu-list Object Array Lista de barras de comentários
danmu-btn Boolean false Se o botão de barras de comentários deve ser exibido, só é válido na inicialização e não pode ser alterado dinamicamente.
enable-danmu Boolean false Exibir barras de comentários, válido apenas na inicialização, não pode ser alterado dinamicamente.
autoplay Boolean false Reproduzir automaticamente
loop Boolean false Repetir em loop? 1.4.0
muted Boolean false Reproduzir em silêncio 1.4.0
page-gesture Boolean false No modo não em tela cheia, deseja ativar os gestos para ajustar o brilho e o volume? 1.6.0
direction Number Definir a orientação do vídeo em tela cheia; se não for especificada, será determinada automaticamente com base na proporção de largura e altura. Os valores válidos são 0 (normal, vertical), 90 (tela girada 90 graus no sentido anti-horário), -90 (tela girada 90 graus no sentido horário). 1.7.0
bindplay EventHandle Disparar o evento de reprodução ao iniciar/continuar a reprodução
bindpause EventHandle Quando a reprodução é pausada, o evento `pause` é acionado.
bindended EventHandle Quando chegar ao fim, o evento `ended` é acionado.
bindtimeupdate EventHandle Disparado quando o progresso da reprodução muda, event.detail = {currentTime, duration}. A frequência de disparo é de 250ms.
bindfullscreenchange EventHandle Quando o vídeo entra ou sai da tela cheia, é acionado, `event.detail = {fullScreen, direction}`, onde `direction` pode ser `vertical` ou `horizontal`. 1.4.0
objectFit String contain Quando o tamanho do vídeo não corresponde ao tamanho do contêiner de vídeo, as formas de exibição do vídeo são: contain: contém, fill: preenche, cover: cobre.
poster String Endereço de recurso de imagem da capa do vídeo, se o valor do atributo controls for false, a configuração de poster será ineficaz.

地图(Map)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
map Mapa longitude Number Longitude central
latitude Number Latitude central
scale Number 16 Nível de zoom, com valores entre 5 e 18
markers Array Marcar ponto
covers Array Será removido em breve, por favor, use marcadores.
polyline Array Rota
circles Array Círculo
controls Array Controles
include-points Array Ampliar a visão para incluir todos os pontos de coordenadas fornecidos.
show-location Boolean Exibir o ponto de localização atual com direção
bindmarkertap EventHandle Disparar ao clicar no ponto de marcação
bindcallouttap EventHandle Ao clicar no balão correspondente ao ponto de referência, é acionado. 1.2.0
bindcontroltap EventHandle Acionado ao clicar no controle
bindregionchange EventHandle Acionado quando a visão muda
bindtap EventHandle Acionado ao clicar no mapa
bindupdated EventHandle Disparado quando a atualização do renderização do mapa estiver concluída. 1.6.0

画布(Canvas)：

Nome do Componente Comentário Propriedades do Componente
Nome do Atributo Tipo Valor padrão Explicação Versão mínima
canvas Tela src String Endereço de recurso para reproduzir o vídeo
initial-time Number Definir a posição inicial de reprodução do vídeo 1.6.0
duration Number Duração do vídeo especificada 1.1.0
controls Boolean true Exibir controles de reprodução padrão (botão de reproduzir/pausar, progresso da reprodução, tempo)?
danmu-list Object Array Lista de barras de comentários
danmu-btn Boolean false Se o botão de barras de comentários deve ser exibido, só é válido na inicialização e não pode ser alterado dinamicamente.
enable-danmu Boolean false Exibir barras de comentários, válido apenas na inicialização, não pode ser alterado dinamicamente.
autoplay Boolean false Reproduzir automaticamente
loop Boolean false Repetir em loop? 1.4.0
muted Boolean false Reproduzir em silêncio 1.4.0
page-gesture Boolean false No modo não em tela cheia, deseja ativar os gestos para ajustar o brilho e o volume? 1.6.0
direction Number Definir a orientação do vídeo em tela cheia; se não for especificada, será determinada automaticamente com base na proporção de largura e altura. Os valores válidos são 0 (normal, vertical), 90 (tela girada 90 graus no sentido anti-horário), -90 (tela girada 90 graus no sentido horário). 1.7.0
show-progress Boolean true Se não for definido, só será exibido quando a largura for maior que 240. 1.9.0
show-fullscreen-btn Boolean true Exibir botão de tela cheia 1.9.0
show-play-btn Boolean true Exibir o botão de reprodução na barra de controle inferior do vídeo 1.9.0
show-center-play-btn Boolean true Exibir o botão de reprodução no meio do vídeo 1.9.0
enable-progress-gesture Boolean true Deseja ativar os gestos para controlar o progresso? 1.9.0
bindplay EventHandle Disparar o evento de reprodução ao iniciar/continuar a reprodução
bindpause EventHandle Quando a reprodução é pausada, o evento `pause` é acionado.
bindended EventHandle Quando chegar ao fim, o evento `ended` é acionado.
bindtimeupdate EventHandle Disparado quando o progresso da reprodução muda, event.detail = {currentTime, duration}. A frequência de disparo é de 250ms.
bindfullscreenchange EventHandle Quando o vídeo entra ou sai da tela cheia, é acionado, `event.detail = {fullScreen, direction}`, onde `direction` pode ser `vertical` ou `horizontal`. 1.4.0
objectFit String contain Quando o tamanho do vídeo não corresponde ao tamanho do contêiner de vídeo, as formas de exibição do vídeo são: contain: contém, fill: preenche, cover: cobre.
poster String Endereço de recurso de imagem da capa do vídeo, se o valor do atributo controls for false, a configuração de poster será ineficaz.

Você usou recentemente:

Coleção Menu QQ