wemark
1.0.0
Das Miniprogramm verfügt über native Unterstützung für das HTML-Rendering und kann grundsätzlich wemark ersetzen. Es wird empfohlen, es zu verwenden. Diese Bibliothek ist in einem schlechten Zustand und wird derzeit nicht gewartet. Bitte verwenden Sie sie mit Vorsicht.
Wird zum Rendern von Markdown-Text in Miniprogrammen verwendet.
Vor der Geburt von Miniprogrammen erforderte das Markdown-Rendering im Allgemeinen das Parsen in HTML und das anschließende Rendern des analysierten HTML. Allerdings bieten Mini-Programme keine HTML-Rendering-Funktionen. Daher konnten vor der Geburt von wemark fast alle Markdown-Rendering-Bibliotheken unter Mini-Programmen nicht richtig funktionieren.
wemark kann Markdown-Inhalte mit einem kleinen Programm rendern und unterstützt die meisten Markdown-Funktionen, einschließlich Bilder und Tabellen.
rich-textwemark -Verzeichnis herunter und kopieren Sie es in das Stammverzeichnis des Miniprogrammswemark Komponente in der Konfigurationsdatei der Seite {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>Detaillierter Code finden Sie im
demo-Verzeichnis, bei dem es sich um ein vollständiges kleines Programm-„Code-Snippet“-Projekt handelt. Sie könnennpm run copyim Wemark-Stammverzeichnis ausführen und es dann zur Erfahrung zum „Code-Snippet“ der WeChat-Entwicklertools hinzufügen .
Parameterbeschreibung:
md , erforderlich, Markdown-String, der gerendert werden muss;link , ob false Link analysiert werden soll, wird er mit der Miniprogramm- navigator angezeigt, die innerhalb des Miniprogramms springen kann.highlight : Gibt an, ob der Code hervorgehoben werden soll. Der Standardwert ist false .type , Rendering-Methode, wemark verwendet die Datenstruktur und Vorlage von wemark zum Rendern, rich-text verwendet die im Miniprogramm integrierte rich-text Komponente zum Rendern (Linksprünge und Videos werden nicht unterstützt).Hinweis: Durch die Codehervorhebung erhöht sich die Anzahl der Tags und die Menge der geparsten Daten, was zu Problemen bei der Rendering-Leistung führen kann. Bitte verwenden Sie sie entsprechend den tatsächlichen Anforderungen.
mpvue unterstützt die Einführung benutzerdefinierter WeChat-Komponenten. Sie können die Konfiguration in der .js Datei der Seite hinzufügen, auf wemark verweisen und dann wemark direkt im template der .vue Datei verwenden:
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Hinweis: Damit mpvue
wemarkPaket beim Packen in dasdist-Verzeichnis packen kann, wird empfohlen,wemarkimstaticVerzeichnis des Quellcodes zu platzieren.
Das mpvue -Verzeichnis dieses Projekts enthält ein vollständiges mpvue-Applet-Demonstrationsprojekt. Sie können npm run copy im wemark Stammverzeichnis ausführen und es dann in den WeChat-Entwicklertools öffnen und verwenden.
Nehmen Sie die folgenden Änderungen am vorhandenen Taro-Projekt vor:
wemark im src Verzeichnis ab, also src/wemarkwemark -Verzeichnis fest, das während der Kompilierung kopiert werden soll, ändern Sie config/index.js und fügen Sie wemark zum copy hinzu. Die Referenz lautet wie folgt: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js beim Kompilieren ignoriert, und ändern Sie weiterhin config/index.js . Die Referenz lautet wie folgt: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark auf der Seite ein und verwenden Sie es, z. B. 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 hinzu (nur TypeScript-Projekte) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} Das taro -Verzeichnis dieses Projekts enthält ein vollständiges Taro-Applet-Demonstrationsprojekt. Sie können npm run copy im wemark -Stammverzeichnis ausführen und es dann in den WeChat-Entwicklertools öffnen und verwenden.
Besonderer Dank geht an @Songkeys für die Weiterverfolgung der Verwendung von Taro während des gesamten Prozesses. Weitere Informationen finden Sie unter Nr. 36.
npm install
npm test MIT
Wenn Sie auch wemark nutzen, reichen Sie bitte eine PR ein, um Ihr eigenes Miniprogramm zur Liste hinzuzufügen.
rich-text Rendering mit Rich-Text-Komponenten von Miniprogrammenvideo[poster] um das Titelbild Nr. 15 des Videos von @kilik52 hinzuzufügenwidthFix Modus und berechnet die Höhe #11 #12 nicht mehr dynamisch~~deleted~~ )
