Kapitel zur Entwicklung von WeChat-Applets: Fallstricke

Vor kurzem habe ich an der Entwicklung des ersten Miniprogramms des Unternehmens teilgenommen. Die Entwicklungserfahrung ähnelt im Wesentlichen der Hybridentwicklung auf Basis von Webview. Es kann die offizielle leistungsstarke API aufrufen, aber es gibt auch einige Fallstricke oder Dinge, an die ich nicht gewöhnt bin. In diesem Artikel werden einige Probleme im Entwicklungsprozess aus praktischer Sicht beschrieben:

1. Verwirrte Stilprioritäten

Bei Verwendung der Schaltflächenkomponente habe ich festgestellt, dass das Festlegen der Breite in der Klasse keine Wirkung zeigt. Hier ist der Code:

.mein-button{
 Breite: 140rpx;
 Höhe: 60rpx;
 Zeilenhöhe: 60rpx;
 Polsterung: 0;
}

Nach der Überprüfung mit den WeChat-Debugging-Tools stellten wir fest, dass die Stilpriorität des Benutzeragenten höher ist als die von uns selbst geschriebene Stilklasse. Dies ist im Browser grundsätzlich unmöglich.

Die Lösung ist eigentlich ganz einfach. Fügen Sie einfach das Suffix !important zu width oder style="width:140rpx" hinzu. Schauen wir uns den Effekt nach der Änderung an:

Nach dem Hinzufügen von !important hat der tatsächliche Effekt der Breite tatsächlich unseren Erwartungen entsprochen, aber das WeChat-Debugging-Tool zeigt immer noch an, dass der Benutzeragentenstil Vorrang hat. Dies sollte als Fehler im Debugging-Tool betrachtet werden.

2. Gewöhnliche Kapselung von UI-Komponenten, umständliche Parameterdefinition

Im Allgemeinen haben grundlegende Komponenten in visuellen UI-Entwürfen, wie etwa Schaltflächen, bestimmte Stile, beispielsweise Hintergrundfarbe/Schriftart. Verwenden Sie die Komponentenfunktion des Miniprogramms, um es in eine Komponente zu kapseln, den Standardstil zu schreiben und die von außen übergebene Klasse zu empfangen, um die nachfolgende Entwicklung zu erleichtern.

React verfügt über eine Schreibmethode namens <tag {...props}></tag>, die bedeutet, dass die Komponente Props empfängt, ohne sie zu verarbeiten, und sie einfach an die nächste Komponente weitergibt. Miniprogramme unterstützen diese Schreibmethode jedoch nicht (eine intensive Suche hat keine Ergebnisse geliefert, und auch die offizielle Dokumentation erklärt sie nicht).

Dies bedeutet, dass wir alle von der Schaltflächenkomponente unterstützten Parameter in den Eigenschaften auflisten müssen:

Eigenschaften:
  Klassen: {
   Typ: Zeichenfolge,
   Wert: '',
  },
  Typ: {
   Typ: Zeichenfolge,
   Wert: „Standard“,
  },
  schmucklos:
   Typ: Boolean,
   Wert: false,
  },
  Größe: {
   Typ: Zeichenfolge,
   Wert: „Standard“,
  },
  ......
 },

3. Der globale Stilselektor * ist deaktiviert

*{
 Box-Größe: Rahmenbox;
}

Der obige Code meldet beim Kompilieren einen Fehler, da das Applet diesen Selektortyp verbietet. Eine gewagte Vermutung zum konkreten Grund lautet: Dieser Selektortyp mit relativ großem Gültigkeitsbereich kollidiert mit der Stilisolierung benutzerdefinierter Komponenten? ?

Wie fügen Sie dem Miniprogramm globale allgemeine Stile hinzu? Es scheint, dass ich alle verwendeten Tags nur manuell schreiben kann. Zum Glück gibt es im Internet fertige Codes, die man einfügen kann:

Ansicht, Scroll-Ansicht, Wischer, Wischerelement, verschiebbarer Bereich, verschiebbare Ansicht, Cover-Ansicht, Cover-Bild, Symbol, Text, Rich-Text, Fortschritt, Schaltfläche, Kontrollkästchengruppe, Kontrollkästchen, Formular, Eingabe, Bezeichnung, Auswahl, Auswahlansicht, Radiogruppe, Radio, Schieberegler, Schalter, Textbereich, Navigator, funktionaler Seitennavigator, Bild, Video, Kamera, Live-Player, Live-Pusher, Karte, Leinwand, offene Daten, Web-Ansicht, Anzeige {
 Box-Größe: Rahmenbox;
}

4. Benutzerdefinierte Komponente, bind:tap wird zweimal aufgerufen

Beim Kapseln von Basiskomponenten, wie z. B. Schaltflächen, sollte Folgendes vermieden werden:

beim Tippen {
 wenn (!this.data.disabled && !this.data.loading) {
  this.triggerEvent('tippen', e.detail)
 }
},

<button bindtap="beimTap"></button>

Die auf diese Weise gekapselte Komponente löst zwei Tap-Ereignisse aus, eines durch das Miniprogramm selbst und eines durch triggerEvent.

Sie können zu einem Ereignistyp wechseln, der nicht in das Applet integriert ist, wie etwa „Klick“:

beim Tippen {
 wenn (!this.data.disabled && !this.data.loading) {
  this.triggerEvent('klicken', e.detail)
 }
},

Das Verhindern des Sprudelns des Tap-Ereignisses kann das Problem ebenfalls lösen:

<button catchtap="beimTap"></button>

5. Verwenden Sie Boolean() zur Typkonvertierung in wxml

Warten Sie beispielsweise in einer Komponente auf einen Parameter vom Typ String. Wenn dieser nicht leer ist, wird die Textbeschriftung angezeigt, andernfalls wird sie nicht angezeigt:

// Spieler.wxml
<text class="text1" wx:if="{{ Boolean(linkerText) }}">{{ linkerText }}</text>

// index.wxml
<player leftText="Lesen"></player>

Auf diese Weise wird das Feld leftText offensichtlich übergeben, aber die Textbeschriftung wird trotzdem nicht angezeigt. Wenn es andersherum geschrieben wird:

// Spieler.wxml
<text class="text1" wx:if="{{ linkerText }}">{{ linkerText }}</text>

Dies ist richtig und entspricht unseren Erwartungen.

Ist das nicht unglaublich?

6. Nachdem InnerAudioContext die Seek-Methode aufgerufen hat, wird der onTimeUpdate-Rückruf ungültig

InnerAudioContext wird zum Abspielen von Audio verwendet. Übergeben Sie den Rückruf onTimeUpdate, um den aktuellen Wiedergabefortschritt abzurufen.

Wenn jedoch die Seek-Methode aufgerufen wird, um zur angegebenen Position für die Wiedergabe zu springen, wird onTimeUpdate nicht mehr aufgerufen.

Viele Leute in der Miniprogramm-Community haben dieses Problem angesprochen. Nach etwa anderthalb Jahren hat das WeChat-Team es immer noch nicht behoben. Wir können nur vorübergehend eine Kompromisslösung verwenden. Die Lösung ist eigentlich ganz einfach:

Fortschritt bei Änderung(e) {
 wenn (this.properties.src && this.data.innerAudioContext) {
  const innerAudioContext = this.data.innerAudioContext;
  innerAudioContext.pause();
  innerAudioContext.seek(innerAudioContext.duration * e.detail.value / 100);
  setzeTimeout(() => {
   innerAudioContext.play();
  }, 500);
 }
},

Halten Sie zuerst die Wiedergabe an, führen Sie dann die Suchmethode aus und stellen Sie anschließend eine Verzögerung von etwa 500 ms ein, um die Wiedergabemethode aufzurufen.

7. Zeitpunkt der Dauererfassung im InnerAudioContext

Ich wollte die Dauer ermitteln, bevor das Audio abgespielt wird, aber das ist nicht möglich. Die Angaben im Internet zum Aufrufen von onPlay und onCanplay sind nicht sehr zuverlässig. Eine Lösung ist diese:

innerAudioContext.onCanplay(() => {
 setzeTimeout(() => {
  dies.setData({
   DauerStr: SekundeZuZeitStr(innererAudiokontext.Dauer) || '--:--',
  });
 }, 500);
});

Ganz zu schweigen davon, wie viele Millisekunden zum Festlegen von „setTimeout“ angemessen sind. Dies ist auf einer realen Maschine ungültig.

Daher ist es besser, onTimeUpdate zu verwenden:

innerAudioContext.onTimeUpdate(() => {
 dies.setData({
  DauerStr: SekundeToTimeStr(innererAudiokontext.Dauer) || '--:--'
 })
});

Wenn Ihnen die Berechnung jedes onTimeUpdates zu leistungsintensiv erscheint, können Sie es selbst implementieren und nur einmal berechnen.

8. Stellen Sie die Hintergrundfarbe der Seite ein

In der JSON-Datei der aktuellen Seite gibt es ein Feld backgroundColor, das jedoch nach dem Festlegen ungültig ist. Später stellte ich fest, dass dieses Feld nicht die Hintergrundfarbe des sichtbaren Bereichs darstellt, sondern die Hintergrundfarbe des Fensters, wenn die Seite heruntergezogen wird.

Wenn Sie die Hintergrundfarbe der Seite festlegen müssen, können Sie dies über den Stil des Seiten-Tags tun:

Seite{
 Hintergrund: #f9fafb;
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Fallstricke bei der Entwicklung des WeChat Mini-Programms. Weitere relevante Inhalte zu den Fallstricken bei der Entwicklung des WeChat Mini-Programms finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!