wemark
1.0.0
O miniprograma possui suporte nativo para renderização de HTML e pode basicamente substituir o wemark. Esta biblioteca está em mau estado e atualmente não está em manutenção. Use-a com cuidado.
Usado para renderizar texto Markdown em miniprogramas.
Antes do nascimento dos miniprogramas, a renderização do Markdown geralmente exigia a análise em HTML e, em seguida, a renderização do HTML analisado. No entanto, os miniprogramas não fornecem funções de renderização de HTML. Portanto, antes do nascimento do wemark, quase todas as bibliotecas de renderização do Markdown não funcionavam corretamente em miniprogramas.
wemark pode renderizar conteúdo Markdown em um pequeno programa e oferece suporte à maioria dos recursos Markdown, incluindo imagens e tabelas.
rich-text nativowemark para o diretório raiz do miniprogramawemark no arquivo de configuração da página {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>O código detalhado pode ser encontrado no diretório
demo, que é um pequeno projeto completo de "snippet de código". Você pode executarnpm run copyno diretório raiz do wemark e adicioná-lo ao "snippet de código" das ferramentas de desenvolvedor do WeChat para obter experiência. .
Descrição do parâmetro:
md , obrigatório, string Markdown que precisa ser renderizada;link , se for analisado o link. Se analisado, ele será exibido usando o componente navigator do miniprograma, que pode saltar dentro do miniprograma. O padrão é false ;highlight , seja para destacar o código, o padrão é false ;type , método de renderização, wemark usará a estrutura de dados e o modelo de wemark para renderização, rich-text usará o componente rich-text integrado ao miniprograma para renderização (saltos de link e vídeos não são suportados).Nota: O destaque do código aumentará o número de tags e a quantidade de dados analisados, o que pode causar problemas de desempenho de renderização. Use-o conforme apropriado com base nas necessidades reais.
mpvue suporta a introdução de componentes personalizados do WeChat. Você pode adicionar configuração no arquivo .js da página, referenciar wemark e, em seguida, usar wemark diretamente na parte template do arquivo .vue :
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Nota: Para permitir que o mpvue empacote
wemarkno diretóriodistdurante o empacotamento, é recomendado colocarwemarkno diretóriostaticdo código-fonte.
O diretório mpvue deste projeto contém um projeto de demonstração completo do miniaplicativo mpvue. Você pode executar npm run copy no diretório raiz wemark e, em seguida, abri-lo e usá-lo nas ferramentas de desenvolvedor do WeChat.
Faça as seguintes modificações no projeto taro existente:
wemark no diretório src , ou seja, src/wemarkwemark a ser copiado durante a compilação, modifique config/index.js e adicione wemark ao item de configuração copy . copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js durante a compilação e continue a modificar config/index.js . weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark na página, como src/pages/index/index.js : config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}global.d.ts (somente projetos TypeScript) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} O diretório taro deste projeto contém um projeto completo de demonstração do miniaplicativo taro. Você pode executar npm run copy no diretório raiz wemark e, em seguida, abri-lo e usá-lo nas ferramentas de desenvolvedor do WeChat.
Agradecimentos especiais a @Songkeys por acompanhar o uso do taro durante todo o processo. Consulte o item 36 para obter detalhes.
npm install
npm test MIT
Se você também usa wemark, envie um PR para adicionar seu próprio miniprograma à lista.
rich-text usando componentes de rich text de miniprogramavideo[poster] para adicionar a imagem da capa do vídeo nº 15 de @kilik52widthFix e não calcula mais dinamicamente a altura #11 #12~~deleted~~ )
