wemark
1.0.0
El mini programa tiene soporte nativo para la representación HTML y básicamente puede reemplazar a Wemark. Se recomienda su uso. Esta biblioteca está en mal estado y actualmente no se encuentra en mantenimiento. Úsela con precaución.
Se utiliza para representar texto Markdown en mini programas.
Antes del nacimiento de los miniprogramas, la representación de Markdown generalmente requería analizarla en HTML y luego representar el HTML analizado. Sin embargo, los miniprogramas no proporcionan funciones de representación HTML. Por lo tanto, antes del nacimiento de wemark, casi todas las bibliotecas de representación de Markdown no podían funcionar correctamente en los miniprogramas.
wemark puede representar contenido de Markdown en un programa pequeño y admite la mayoría de las funciones de Markdown, incluidas imágenes y tablas.
rich-text nativowemark al directorio raíz del mini programawemark en el archivo de configuración de la página. {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>El código detallado se puede encontrar en el directorio
demo, que es un proyecto completo de "fragmento de código" de programa pequeño. Puede ejecutarnpm run copyen el directorio raíz de wemark y luego agregarlo al "fragmento de código" de las herramientas de desarrollador de WeChat para obtener experiencia. .
Descripción del parámetro:
md , requerido, cadena de Markdown que debe representarse;link , si se analiza el enlace Si se analiza, se mostrará utilizando el componente navigator del mini programa, que puede saltar dentro del mini programa. El valor predeterminado es false ;highlight , si se resalta el código, el valor predeterminado es false ;type , método de representación, wemark utilizará la estructura de datos y la plantilla de wemark para la representación, rich-text utilizará el componente rich-text integrado en el mini programa para la representación (no se admiten saltos de enlaces ni vídeos).Nota: El resaltado de código aumentará la cantidad de etiquetas y la cantidad de datos analizados, lo que puede causar problemas de rendimiento de representación. Úselo según corresponda según las necesidades reales.
mpvue admite la introducción de componentes personalizados de WeChat. Puede agregar configuración en el archivo .js de la página, hacer referencia wemark y luego usar wemark directamente en template del archivo .vue :
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Nota: Para permitir que mpvue empaquete
wemarken el directoriodistal empaquetar, se recomienda colocarwemarken el directoriostaticdel código fuente.
El directorio mpvue de este proyecto contiene un proyecto de demostración completo del subprograma mpvue. Puede ejecutar npm run copy en el directorio raíz wemark y luego abrirlo y usarlo en las herramientas de desarrollador de WeChat.
Realice las siguientes modificaciones en el proyecto taro existente:
wemark en el directorio src , es decir, src/wemarkwemark que se copiará durante la compilación, modifique config/index.js y agregue wemark al elemento de configuración copy . La referencia es la siguiente: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js al compilar y continúe modificando config/index.js La referencia es la siguiente: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark en la 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 (solo proyectos mecanografiados) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} El directorio taro de este proyecto contiene un proyecto de demostración completo del subprograma taro. Puede ejecutar npm run copy en el directorio raíz wemark y luego abrirlo y usarlo en las herramientas de desarrollador de WeChat.
Un agradecimiento especial a @Songkeys por dar seguimiento al uso del taro durante todo el proceso. Consulte el n.° 36 para obtener más detalles.
npm install
npm test MIT
Si también utiliza wemark, envíe un PR para agregar su propio mini programa a la lista.
rich-text utilizando componentes de texto enriquecido de miniprogramavideo[poster] para agregar la imagen de portada del video n.° 15 de @kilik52widthFix y ya no calcula dinámicamente la altura #11 #12~~deleted~~ )
