So führen Sie das React-Projekt auf dem offiziellen WeChat-Konto aus

Hinweis: Bei dem Projekt handelt es sich um ein H5, das von create-react-app in Kombination mit antd-mobile geschrieben wurde und auf dem offiziellen WeChat-Konto ausgeführt wird.

1. Verwenden Sie das „A“-Tag, um eine PDF-Vorschau anzuzeigen oder herunterzuladen. Die Schreibweise ist wie folgt: Beim Klicken auf dem Mobiltelefon erfolgt keine Reaktion, und beim Klicken auf dem Computer stürzt die Webseite ab.

<a href='pdf oder Bildpfad'>
  PDF- oder Bildname</a>

Der Grund liegt darin, dass der Browser den Zugriff auf einen unsicheren Zugang erkannt und blockiert hat. Fügen Sie daher gemäß der Fehlermeldung zwei neue Attribute hinzu, „target“ und „rel“, und schreiben Sie sie wie folgt:

<a href='pdf oder Bildpfad' target='_blank' rel="noreferrer">
  PDF- oder Bildname</a>

Es kann sowohl auf dem Computer als auch auf iOS normal angezeigt werden.

Unter Android gibt es jedoch mehrere Situationen:

a) Das Mobiltelefon verfügt über einen QQ-Browser, der PDF-Dateien direkt öffnen kann. (Dies ist eine normale Vorschau)

b) Wenn auf dem Telefon kein QQ-Browser, aber andere Browser vorhanden sind, wird ein Fenster angezeigt, in dem Sie aufgefordert werden, den QQ-Browser herunterzuladen oder mit anderen Browsern zu öffnen. (Dies ist auch ein normaler Vorschau-Download)

c) Auf dem Telefon gibt es keinen QQ-Browser, aber andere Browser. Wenn Sie auf die PDF-Datei klicken, wird ein Ladebalken angezeigt, aber danach gibt es keine Vorschau oder Eingabeaufforderung. (Dies ist nicht normal und wird von WeChat untersagt.) Das Hinzufügen eines Download-Attributs zum a-Tag kann den Effekt b) erzeugen.

<a href='pdf oder Bildpfad' target='_blank' rel="noreferrer" download>
  PDF- oder Bildname</a>

Wenn Sie außerdem eine direkte Vorschau der PDF-Datei benötigen, können Sie das Plugin react-pdf-js verwenden. Der Nachteil besteht darin, dass das Laden und Anzeigen extrem langsam ist, wenn die PDF-Datei etwas groß ist. Daher wird die obige Methode dennoch empfohlen.

2. Verwenden Sie antd-mobile long list listView, um lange Listen zu laden. (Bieten Sie Ihnen eine alternative Lösung für lange Listen auf Mobilgeräten)

3. Zu Beginn des Projekts wurden verschiedene Probleme mit fehlenden Babel-Plugins gemeldet, sobald es ausgeführt wurde. Es dauerte mehr als zwei Stunden, die Ursache zu finden. In der Webpack-Konfigurationsdatei wurden in Plugins zwei weitere Plugins konfiguriert, aber diese beiden Plugins waren nicht im Projekt installiert und wurden nicht benötigt. Daher trat nach dem Entfernen aus der Konfiguration und erneutem Ausführen kein Fehler auf.

4. Echarts zeichnet Karten und Säulendiagramme

a) Zeichnen Sie eine Karte von China

Ab Version 5 sind keine Kartenumrissdaten mehr verfügbar. Der Vorteil der Version 4.9.0 besteht darin, dass sie über Kartenumrissdaten verfügt und die Provinznamen auf der Karte ebenfalls zentriert sind. Die schwebende Ebene auf der Karte wird im Tooltip konfiguriert. Sie müssen keine spezielle Position hinzufügen. Die Standardanzeigeposition ist flexibel.

b) Zeichnen Sie ein Säulendiagramm

Die Version v4 verfügt nicht über eine Sortier-API. Wenn die Daten des Säulendiagramms sortiert werden müssen, versuchen Sie, mit den Backend-Kollegen zu kommunizieren und sie zu bitten, die Daten zu sortieren und an Sie zurückzugeben. Wenn es zu einer Fehlkommunikation kommt, können wir diese hier beheben, indem wir eine Sortierfunktion schreiben.

5. Verwenden Sie useRef, um den Wert zu binden und Vorgänge auszuführen, die direkt an das DOM gebunden werden können.

Beim Schreiben eines Backend-Systems werden UI-Komponenten normalerweise direkt eingeführt. Es gibt jedoch Anforderungen an die UI auf der mobilen Seite, und es ist auch mühsam, Komponenten einzuführen und den Stil in der UI-Bibliothek zu ändern. Nehmen Sie als Beispiel das Input-Tag:

Die Eingabekomponente der UI-Bibliothek kann problemlos eine bidirektionale Bindung erreichen, verfügt jedoch über einen eigenen Stil. Daher ist es schwierig, den Stil des Eingabefelds mit dem vom Designer gezeichneten Stil beizubehalten.

Nativer HTML-Tag – Eingabe. Sie können den Stil anpassen, aber es gibt keine bidirektionale Bindung. Auf der Anmeldeseite müssen Sie beispielsweise Ihr Kontokennwort eingeben. Sie können js verwenden, um das Kontokennwort abzurufen, müssen jedoch selbst viel Code schreiben. Derzeit ist useRef die bessere Wahl. Wie useState und useEffect ist es eine Hook-Funktion von React. Verwenden Sie es wie folgt:

importiere { useState,useRef } von 'react'; //Einführung
const inputRef = useRef<any>(); //definieren const [phone, setPhone] = useState("");
​
exportiere Standard const Login= () => {
  const changePhone = () => {
    setPhone(EingabeRef?.aktuell?.Wert)
  }
    zurückkehren (
       /*An das Eingabe-Tag binden*/
       <input value={phone} ref={inputRef} onChange={changePhone} maxLength={11} placeholder='Bitte geben Sie Ihre Telefonnummer ein' />
        )
}

6. Kleine Ideen für Verpackungskomponenten

Single-Responsibility-Prinzip: Eine Komponente sollte nur eine Sache tun. Wenn eine Komponente komplex wird, zerlegen Sie sie in kleinere Komponenten.

Oben finden Sie detaillierte Informationen dazu, wie das React-Projekt auf dem offiziellen WeChat-Konto ausgeführt wird. Weitere Informationen dazu, wie React auf dem offiziellen WeChat-Konto ausgeführt wird, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!