mp html
v2.5.0
Um poderoso componente de texto rico em applet
uni-apptable , video , svg , etc.)latex , etc.)≈25KB , 9KB gzipped )Veja a função Introdução para saber mais
Método npm
Instale pacotes de componentes no diretório do projeto
npm install mp-html Verifique使用npm 模块na ferramenta de desenvolvedor (se não houver opção, não for necessário) e clique em工具- 构建npm
Adicione o arquivo json que precisa usar a página
{
"usingComponents" : {
"mp-html" : " mp-html "
}
} Adicione o arquivo wxml que precisa usar a página
< mp-html content =" {{html}} " /> Adicione o arquivo js que precisa usar a página
Page ( {
onLoad ( ) {
this . setData ( {
html : '<div>Hello World!</div>'
} )
}
} )Método do código -fonte
Copie o pacote de código ( dist/platform ) da plataforma correspondente no código-fonte para o diretório components e renomeie-o para mp-html
Adicione o arquivo json que precisa usar a página
{
"usingComponents" : {
"mp-html" : " /components/mp-html/index "
}
}Os próximos passos são os mesmos que acima
Confira o início rápido para saber mais
Método do código -fonte
Copie o conteúdo no dist/uni-app no código-fonte para o diretório raiz do projeto e pode ser introduzido diretamente através do mercado de plug-in.
Adicione o arquivo vue que precisa usar a página
< template >
< view >
< mp-html :content = " html " />
</ view >
</ template >
< script >
import mpHtml from ' @/components/mp-html/mp-html '
export default {
// HBuilderX 2.5.5+ 可以通过 easycom 自动引入
components : {
mpHtml
},
data () {
return {
html : ' <div>Hello World!</div> '
}
}
}
</ script > Método npm
Instale pacotes de componentes no diretório do projeto
npm install mp-html Adicione o arquivo vue que precisa usar a página
< template >
< view >
< mp-html :content = " html " />
</ view >
</ template >
< script >
import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
export default {
// 不可省略
components : {
mpHtml
},
data () {
return {
html : ' <div>Hello World!</div> '
}
}
}
</ script > Ao introduzir projetos em execução usando cli através npm , você precisa configurar transpileDependencies em vue.config.js . Para detalhes, consulte #330
Se usado no nvue , copie o conteúdo no diretório dist/uni-app/static para o diretório static do projeto; caso contrário, ele não será executado
Confira o início rápido para saber mais
| propriedade | tipo | valor padrão | ilustrar |
|---|---|---|---|
| estilo de contêiner | Corda | Estilo de contêiner (2.1.0+) | |
| contente | Corda | String html para renderização | |
| cópia-link | Booleano | verdadeiro | Se deve permitir a cópia automática de links externos quando clicados |
| domínio | Corda | Nome de domínio principal (para costura de links) | |
| Erro-IMG | Corda | Link de espaço reservado quando ocorre um erro de imagem | |
| carga preguiçosa | Booleano | falso | Se deve habilitar o carregamento preguiçoso de fotos |
| Carregando-IMG | Corda | Links de espaço reservado durante o carregamento da imagem | |
| pausa-video | Booleano | verdadeiro | Se deve pausar automaticamente outros vídeos ao reproduzir um vídeo |
| visualização-img | Booleano | verdadeiro | Se deve permitir que a imagem seja visualizada automaticamente quando clicada |
| Table de rolagem | Booleano | falso | Se deve adicionar uma camada de rolagem a cada tabela para que ela possa rolar apenas horizontalmente |
| selecionável | Booleano | falso | Se deve habilitar o texto por muito tempo para copiar |
| Configuração | Booleano | verdadeiro | Se deve definir o conteúdo da tag de título para o título da página |
| show-IMG-Menu | Booleano | verdadeiro | Se deve permitir que a imagem seja pressionada por um longo tempo para exibir o menu |
| estilo de tag | Objeto | Defina o estilo padrão da tag | |
| Uso-âncor | Booleano | falso | Se deve usar links de âncora |
Veja as propriedades para aprender mais
| nome | Trigger Timing |
|---|---|
| carregar | Quando a árvore dom é carregada |
| preparar | Quando a imagem é carregada |
| erro | Quando ocorre um erro de renderização |
| imgtap | Quando a imagem é clicada |
| linktap | Quando o link é clicado |
Veja os eventos para aprender mais
Alguns métodos api são fornecidos em instâncias de componentes para chamada
| nome | efeito |
|---|---|
| em | Limite o intervalo de saltos de âncora para uma visualização de rolagem |
| Navigateto | Pular âncora |
| getText | Obtenha conteúdo de texto |
| GetRect | Obtenha a localização e o tamanho do conteúdo de texto rico |
| setContent | Definir conteúdo rico de texto |
| imglist | Obtenha uma variedade de todas as imagens |
| Pausemedia | Pausar reprodução de áudio e vídeo (2.2.2+) |
| setplaybackrate | Defina a taxa de reprodução de áudio e vídeo (2.4.0+) |
Confira a API para saber mais
Além das funções básicas, esse componente também fornece extensões ricas e pode ser selecionado conforme necessário.
| nome | efeito |
|---|---|
| Áudio | Music Player |
| editável | Edição de texto rico |
| Emoji | Analise emoji |
| Destaque | Código de destaque do bloco |
| Markdown | Renderizar markdown |
| Procurar | Pesquisa de palavras -chave |
| estilo | Combine estilos em tags de estilo |
| TXV-Video | Usando o Tencent Video |
| img-cache | Cache de imagem por @pentatea |
| látex | Render fórmula de látex por @zeng-j |
| cartão | Exibição de cartão por @Whoooami |
Confira o plugin para saber mais
| Exemplo oficial | Happy Mall | Que vida | Verificação do método alimentar | Weimu | Leia a literatura clássica |
|---|---|---|---|---|---|
 |  |  |  |  |  |
| Revisão da Ciência | Jornada tecnológica do programador | Blog Diandiano | Notas excelentes | 365 perguntas | Livros compartilhados na mesma cidade |
|---|---|---|---|---|---|
 |  |  |  |  |  |
| Compartilhamento de fonte de tecnologia | Seu código é incrível | Verdadeiro | Mottoni | Demonstração de modelo | Ai Wali |
|---|---|---|---|---|---|
 |  |  |  |  |  |
Os rankings acima não estão em ordem específica e casos de uso mais visíveis são coletados (adicione -o)
Licença gratuitamente (incluindo uso comercial), copiando ou modificando esta licença do componente MIT
É necessário passar por testes suficientes antes de ser usado em um ambiente de produção. Você não é responsável por quaisquer perdas causadas por bug de plug-in (você pode modificar o código-fonte sozinho)
Entre em contato conosco e seja bem -vindo para ingressar no QQ Communication Group:
Grupo 1 (completo): 699734691
Grupo 2 (completo): 778239129
Grupo 3: 960265313 
apoiar
v2.5.0 (20240422)
U play Event adiciona src e outros detalhes da informaçãoU preview-img Atributo suporta a configuração para all para ativar os detalhes da visualização da imagem base64U plug-in editable adiciona modo simples (clique em texto para editá-lo diretamente)U latex Plug-in suporta detalhes de fórmula no nível do blocoF corrigiu o problema da perda de fundo em alguns casos da tabela.F corrigiu alguns problemas que svg não pode ser exibido em detalhesF corrigiu o problema de que o estilo não pode ser reconhecido no pacote uni-app h5 e app termina.F corrigiu o problema da exibição incorreta no plug-in latex em alguns casos.F corrigiu o problema de que a tabela de plug -in editable não pode ser excluídaF corrigiu o problema do plug-in editable plug-in pacote uni-app vue3 h5 clicando erro de imagemF corrigiu o problema em que o plugin editable plugin uni-app clica na tabela sem uma barra de menuv2.4.3 (20240121)
A por @whoooamiF corrigiu o problema de que foreignobject não pode ser exibido em detalhes svgF corrigiu o problema de exibição incorreta no caso de células mescladas na parte da tabela do detalhadoF corrigiu o problema de definir object-fit em tags img para inválidosF corrigiu o problema de que a fórmula do plug-in latex envolverá os detalhes da linhaF corrigiu o problema de que clicar em audio não pode ser editado quando editable pacote uni-app e o plug-in audio for compartilhado. Detalhes de @whoooamiF corrigiu o problema que o applet alipay definiu as imagens de largura e altura que podem exibir anormalmente.F corrigiu o problema de que uni-app WeChat Applet relatará um erro na replace of undefined em alguns casos.F resolveu o problema de que uni-app Kuaishou Mini Program não exibe detalhado O guia de atualização pode ser visto no método de atualização de 1.x
Confira o log de atualização para saber mais
