So passen Sie Markdown an das von mpvue erstellte kleine Programm an

Dieses Mal zeige ich Ihnen, wie Sie den Markdown an das von mpvue erstellte Miniprogramm anpassen. Hier sind die praktischen Fälle Schauen Sie einmal vorbei. Das Hauptziel von mpvue besteht darin, die Entwicklungseffizienz zu verbessern und das Entwicklungserlebnis zu verbessern. Mit diesem Framework müssen Entwickler lediglich ein vorläufiges Verständnis des Miniprogramms

Entwicklungsspezifikationen

haben und mit der grundlegenden Syntax von Vue.js vertraut sein, um loszulegen. Das Framework bietet ein umfassendes Vue.js-Entwicklungserlebnis. Entwickler schreiben Vue.js-Code, und mpvue analysiert und konvertiert ihn in ein kleines Programm und stellt sicher, dass es korrekt ausgeführt wird. Darüber hinaus bietet das Framework Entwicklern über das Tool vue-cli einen Schnellstart-Beispielcode. Entwickler müssen lediglich einen einfachen Befehl ausführen, um ein ausführbares Projekt zu erhalten.

Hauptfunktionen:

Umfassende Komponentenentwicklungsfunktionen: Code verbessern
Vervollständigen Sie Vue.js Entwicklungserfahrung
Praktische Vuex-Datenverwaltungslösung: Einfache Erstellung komplexer Anwendungen
Schneller Webpack-Konstruktionsmechanismus: benutzerdefinierte Build-Strategie, HotReload in der Entwicklung stage
Unterstützt die Verwendung externer npm-Abhängigkeiten
Verwenden Sie das Vue.js-Befehlszeilentool vue-cli, um schnell
6. zu initialisieren Projekt

Die Fähigkeit, H5-Code in kleinen Programmzielcode umzuwandeln

Implementierungsprinzip:

Vue-Code

Schreiben Sie die Applet-Seite als Vue.js, um
mit zu implementieren Vue.js-Entwicklungsspezifikationen zur Implementierung der Eltern-Kind-Komponentenzuordnung
Miniprogrammcode

Geschrieben mit Miniprogrammentwicklungsspezifikationen
1. Ansichtsebene

   Vorlage

Konfigurieren Sie die Funktion
2. Lebenszyklus

   und rufen Sie die zugehörige Datenaktualisierung auf

Map Vue.js Daten in das Applet-Datenmodell
Und auf dieser Basis wird der folgende Mechanismus angehängt

Die Vue.js-Instanz ist mit dem Mini verknüpft Programmseiteninstanz
Das Miniprogramm und der Vue.js-Lebenszyklus stellen eine Zuordnungsbeziehung her, die den Vue.js-Lebenszyklus im Miniprogramm-Lebenszyklus auslösen kann
Das Miniprogrammereignis richtet einen Proxy-Mechanismus ein. Die entsprechende Ereignisantwort der Vue.js-Komponente wird in der Ereignis-Proxy-Funktion ausgelöst.
Es wird berichtet, dass das mpvue-Framework wurde in Geschäftsprojekten praktiziert und verifiziert und wird derzeit in Meituan-Dianping in großem Umfang eingesetzt. mpvue ist eine sekundäre Entwicklung, die auf dem Vue.js-Quellcode basiert. Sie fügt die Implementierung der Mini-Programmplattform hinzu und behält gleichzeitig die Möglichkeit, dem Vue.js-Versions-Upgrade zu folgen.

Ich glaube, jeder, der ein Miniprogramm entwickelt hat, weiß, dass das Miniprogramm das direkte Einfügen in das DOM nicht unterstützt. Daher werden wir in Schwierigkeiten geraten, wenn wir Markdown-Daten erhalten und diese rendern müssen.

Gekapselte mpvue-wemark-Adresse

Daher gibt es auf Github viele ausgereifte Markdown-Rendering-Lösungen für kleine Programme, aber als ich zuvor mpvue schrieb, stellte ich fest, dass es nicht möglich war, diese Bibliotheken direkt zu verwenden auf mpvue. Da die Schreibmethoden von wxml und vue nicht kompatibel sind, muss mpvue angepasst werden. Hier wähle ich die Wemark-Bibliothek.

Hauptsächlich ein paar Schritte erledigt: 1. Representable.js in die ES-Version umpacken. Das Standardgerüst von mpvue ist wepack2 und unterstützt nicht die gemischte Verwendung von es commonjs. 2. Erstellen Sie wxml und das Miniprogramm js Ebene, die nicht mit der Schreibmethode von vue kompatibel ist.

Die Demo lautet wie folgt

<template>
 <p>
  <wemark :mdData=&#39;mdData&#39;/>
 </p>
</template>
<script>
import wemark from "mpvue-wemark";
export default {
 data() {
  return {
   mdData: ''
  };
 },
 components: {
  wemark
 },
 mounted() {
   this.mdData = "## hello, world";
 }
};
</script>

Auf diese Weise ist es möglich, Markdown-Inhalte im mpvue-Applet zu rendern

Ich glaube, dass Sie die Methode nach dem Lesen des Falles beherrschen in diesem Artikel, mehr Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vue.js, um den WeChat-Menüeditor für öffentliche Konten zu implementieren (detaillierte Idee)

So verwenden Sie Vue.js, um den WeChat-Menüeditor für öffentliche Konten zu implementieren (Fallcode)

Das obige ist der detaillierte Inhalt vonSo passen Sie Markdown an das von mpvue erstellte kleine Programm an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!