mp html HTML Download - mp html HTML Quellcode Download

mp html

Andere Ressourcen

v2.5.0

Herunterladen

MP-HTML

Eine leistungsstarke Applet -Rich -Textkomponente

Funktionale Einführung

Unterstützt die Verwendung in mehreren Mainstream-Applet-Plattformen und uni-app
Unterstützt reiche Tags (einschließlich table , video , svg usw.)
Unterstützt umfangreiche Ereigniseffekte (automatische Vorschau von Bildern, Linkverarbeitung usw.)
Unterstützung der Einstellung von Platzhalterkarten (Laden, Fehler, Vorschau)
Unterstützt reiche Funktionen wie Anchor Point Jump, Long Press und Copy
Unterstützt die meisten HTML -Unternehmen
Rich Plug-Ins (Keywordsuche, Inhaltsbearbeitung, latex usw.)
Hohe Effizienz, starke Verwerfungstoleranz und leichtes Gewicht ( ≈25KB , 9KB gzipped )

Sehen Sie sich die Funktion ein, um mehr zu erfahren

Wie man benutzt

Native Plattform

npm -Methode
1. Installieren Sie Komponentenpakete im Projektverzeichnis
```
npm install mp-html
```
2. Überprüfen Sie使用npm 模块im Entwickler -Tool (falls es keine Option gibt, und klicken Sie auf工具- 构建npm
3. Fügen Sie die json -Datei hinzu, die die Seite verwenden muss
```
{
  "usingComponents" : {
    "mp-html" : " mp-html "
  }
}
```
4. Fügen Sie die wxml -Datei hinzu, die die Seite verwenden muss
```
 < mp-html content =" {{html}} " />
```
5. Fügen Sie die js -Datei hinzu, die die Seite verwenden muss
```
 Page ( {
  onLoad ( ) {
    this . setData ( {
      html : '<div>Hello World!</div>'
    } )
  }
} )
```
Quellcode -Methode
1. Kopieren Sie das Codepaket ( dist/platform ) der entsprechenden Plattform im Quellcode in das components und benennen Sie es in mp-html um
2. Fügen Sie die json -Datei hinzu, die die Seite verwenden muss
```
{
  "usingComponents" : {
    "mp-html" : " /components/mp-html/index "
  }
}
```
Die nächsten Schritte sind die gleichen wie oben

Schauen Sie sich den schnellen Start an, um mehr zu erfahren

Uni-App

Quellcode -Methode

Kopieren Sie den Inhalt in dist/uni-app im Quellcode in das Projektroot-Verzeichnis und können direkt über den Plug-in-Markt eingeführt werden.

Fügen Sie vue -Datei hinzu, die die Seite verwenden muss

< 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 >

npm -Methode

Installieren Sie Komponentenpakete im Projektverzeichnis
```
npm install mp-html
```

Fügen Sie vue -Datei hinzu, die die Seite verwenden muss

< 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 >

Bei der Einführung von Projekten, die mit cli -Methode über npm ausgeführt werden, müssen Sie transpileDependencies in vue.config.js konfigurieren. Details finden Sie unter #330
Kopieren Sie den Inhalt in das Dist/Uni nvue dist/uni-app/static Verzeichnis in das static Verzeichnis des Projekts, da es sonst nicht ausgeführt wird

Schauen Sie sich den schnellen Start an, um mehr zu erfahren

Komponenteneigenschaften

Eigentum	Typ	Standardwert	veranschaulichen
Containerstil	Saite		Containerstil (2.1.0+)
Inhalt	Saite		HTML -Zeichenfolge für das Rendering
Kopierenkopie	Boolean	WAHR	Ob das automatische Kopieren externer Links beim Klicken zulässt
Domain	Saite		Hauptdomainname (für Linkstiche)
Fehler-Img	Saite		Platzhalterverbindung, wenn ein Bildfehler auftritt
faul laden	Boolean	FALSCH	Ob das faule Laden von Bildern aktiviert werden soll
Lade-Img	Saite		Platzhalterverbindungen während des Bildladens
Pause-Video	Boolean	WAHR	Ob Sie beim Abspielen eines Videos automatisch andere Videos innehalten sollen
Vorschau-Img	Boolean	WAHR	Ob das Bild beim Klicken automatisch in der Vorschau gestellt werden soll
Scroll-Tisch	Boolean	FALSCH	Unabhängig davon, ob sie jeder Tabelle eine Scrollschicht hinzufügen soll, damit sie horizontal alleine scrollen kann
wählbar	Boolean	FALSCH	Ob Sie Text Long Press zum Kopieren aktivieren möchten
Settitle	Boolean	WAHR	Unabhängig davon, ob der Inhalt des Titel -Tags auf den Seitentitel festgelegt wird
Show-Img-Menu	Boolean	WAHR	Ob das Bild lange gedrückt werden kann, um das Menü anzuzeigen
Tag-Stil	Objekt		Legen Sie den Standardstil des Tags fest
Nutzung	Boolean	FALSCH	Ob Sie Ankerlinks verwenden möchten

Eigenschaften anzeigen, um mehr zu erfahren

Komponentenereignisse

Name	Timing auslösen
laden	Wenn der Dombaum geladen ist
bereit	Wenn das Bild geladen ist
Fehler	Wenn ein Rendering -Fehler auftritt
IMGTAP	Wenn das Bild angeklickt wird
LinkTap	Wenn der Link geklickt wird

Sehen Sie Veranstaltungen, um mehr zu erfahren

API

Einige api -Methoden werden in Komponenteninstanzen für den Anruf bereitgestellt

Name	Wirkung
In	Begrenzen Sie den Bereich der Ankersprung auf eine Bildlaufansicht
Navigateto	Ankersprung
GetText	Holen Sie sich Textinhalte
GetRect	Holen Sie sich den Standort und die Größe des reichen Textinhalts
SetContent	Legen Sie den reichen Textinhalt fest
Imglist	Holen Sie sich eine Reihe aller Bilder
Pausemedia	Pause von Audio- und Video -Wiedergabe (2.2.2+)
setPlaybackrate	Legen Sie die Audio- und Video -Wiedergabetrate fest (2.4.0+)

Schauen Sie sich die API an, um mehr zu erfahren

Plugin -Erweiterungen

Neben den grundlegenden Funktionen bietet diese Komponente auch umfangreiche Erweiterungen und kann bei Bedarf ausgewählt werden.

Name	Wirkung
Audio-	Musikspieler
bearbeitet	Reiche Textbearbeitung
Emoji	Analysieren Sie Emoji
Highlight	Code -Block -Hervorhebung
Markdown	Markdown machen
Suchen	Keyword -Suche
Stil	Match -Stile in Stil -Tags übereinstimmen
txv-video	Verwenden von Tencent Video
IMG-Cache	Bildcache von @pentatea
Latex	Latexformel von @Zeng-J rendern
Karte	Kartenanzeige von @Whoooami

Schauen Sie sich das Plugin an, um mehr zu erfahren

Anwendungsfälle

Offizielles Beispiel	Happy Mall	Was für ein Leben	Lebensmittelmethodeprüfung	Weiman	Lesen Sie die klassische Literatur

Science Review	Programmierer technologische Reise	Diandian Blog	Ausgezeichnete Noten	365 Fragen	Geteilte Bücher in derselben Stadt

Technologiequelle Anteil	Ihr Code ist großartig	WAHR	Mottoni	Vorlage Demo	Ai wali

Die oben genannten Ranglisten sind in keiner bestimmten Reihenfolge und sichtbarere Anwendungsfälle werden gesammelt (bitte fügen Sie es hinzu).

Lizenz und Unterstützung

Mit der Lizenz können Sie diese Komponenten -MIT -Lizenz kostenlos verwenden (einschließlich kommerzieller Nutzung), kopieren oder ändern
Es ist notwendig, ausreichend Tests durchzuführen, bevor sie in einer Produktionsumgebung verwendet werden. Sie sind nicht verantwortlich für Verluste, die durch Plug-in bug verursacht werden (Sie können den Quellcode selbst ändern).
Kontaktieren Sie uns und sind willkommen, um sich der QQ -Kommunikationsgruppe anzuschließen:
Gruppe 1 (voll): 699734691
Gruppe 2 (voll): 778239129
Gruppe 3: 960265313
Unterstützung

Aktualisieren Sie das Protokoll

v2.5.0 (20240422)
1. U play -Event fügt src und andere Informationsdetails hinzu
2. U preview-img Attribut unterstützt die Einstellung an all , um base64 Bildvorschau-Details zu aktivieren
3. U editable Plug-In fügt einen einfachen Modus hinzu (klicken Sie auf Text, um es direkt zu bearbeiten).
4. U latex -Plug-In unterstützt Formel-Details auf Blockebene
5. F behielte das Problem des Hintergrundverlusts in einigen Fällen der Tabelle fest.
6. F hat einige Probleme behoben, die svg nicht im Detail angezeigt werden kann
7. F behielten das Problem, dass der Stil im uni-app Paket h5 und app nicht erkannt werden kann.
8. F behielten das Problem der falschen Anzeige im latex Plug-In in einigen Fällen.
9. F hat das Problem behoben, dass editable Plugin -Tabelle nicht gelöscht werden kann
10. F behoben das Problem des editable Plug-in uni-app Pakets vue3 h5 Klicken Sie auf Bildfehler klicken
11. F behoben das Problem, bei dem das Paket editable Plugin uni-app auf die Tabelle ohne Menüleiste klickt
v2.4.3 (20240121)
1. A -Karten -Plugin -Details von @Whoooami
2. F hat das Problem behoben, dass foreignobject möglicherweise nicht in svg -Details angezeigt wird
3. F behielten das Problem der falschen Anzeige im Fall von zusammengeführten Zellen im Tabellenteil des Detaillierten
4. F wurde das Problem der Einstellung von object-fit in img -Tags für ungültig behoben
5. F behoben das Problem, dass die latex Plug-in-Formel die Liniendetails einpackt
6. F behoben das Problem, dass das Klicken auf audio nicht bearbeitet werden kann, wenn editable und audio -Plug-In uni-app Pakets freigegeben wird. Details von @Whoooami
7. F behielten das Problem, dass das Alipay -Applet die Breite und die Höhenbilder festgelegt hat, die möglicherweise abnormal angezeigt werden.
8. F behielten das Problem, dass uni-app Paket WeChat Applet in einigen Fällen einen Fehler im Bildersatz replace of undefined meldet.
9. F behielten das Problem, dass uni-app -Paket Kuaishou Mini-Programm nicht detailliert angezeigt wird
Der Update -Handbuch ist aus der Upgrade -Methode von 1.x zu sehen