WeChat-Miniprogramm spielt Texten einen Streich (Sperrfeuer)

Die meisten Barrage-Anwendungen in Miniprogrammen unterstützen nur Text, aber die Bild- und Audiofunktionen fehlen. In diesem Artikel wird erklärt, wie man aus Produktsicht ein Barrage-Miniprogramm erstellt, das Emoticons unterstützt.

Erzielen Sie den Effekt

Idee:

Eingabe ruft den Eingabetext ab, Richtext zeigt den Balken mit dem Bild an und legt die Richtung fest des Textes in Richtext Und scrollen Sie nach oben, schieben Sie, um Textgröße, Textfarbe und andere Vorgänge zu ändern

Implementierungscode:

1. Verwenden Sie die Eingabe, um Text einzugeben und Emoji-Ausdrücke zu unterstützen

Definieren Sie zuerst ein „Danmu“-Objekt, um den eingegebenen Sperrtext und Sperrstil zu speichern,

danmu: {
      fontColor: "#ffffff",
      text: "默认弹幕~",
      fontSize: "40px",
      glow: "#ffff00",
      speed: '10s',
},

und definieren Sie dann das „Knoten“-Objekt, um Daten anzuzeigen
text: Sperrtext; Schriftartgröße: Text Größe; Schriftfarbe: Textfarbe; Glühen: Textglühen; Scrollgeschwindigkeit.

Verwenden Sie die Eingabekomponente, um Text einzugeben:

<input type=&#39;text&#39;
        bindconfirm=&#39;changeDanmuText&#39;
        value=&#39;{{danmu.text}}&#39; 
        placeholder=&#39;输入弹幕~&#39; 
        placeholder-style=&#39;color:#fff&#39; 
        cursor-spacing=&#39;28&#39;>
</input>

cursor-spacing legt den Abstand zwischen dem Cursor und der Tastatur in der Eingabe fest

2.richText zeigt eine Sperre an enthält Bilder

Knotenobjekt zum Aktualisieren von Sperrfeuern definieren

Knoten: [{
Name: 'div',
Attrs: {
Klasse: 'danmu-text'},
Kinder: [
                      
Typ: 'Text',
text: 'Sperrtext

Das obige ist der detaillierte Inhalt vonWeChat-Miniprogramm spielt Texten einen Streich (Sperrfeuer). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!