Le mini programme WeChat joue des tours sur le texte (barrage)

La plupart des applications de barrage dans les mini-programmes ne prennent en charge que le texte, mais les fonctions d'image et audio sont manquantes. Cet article expliquera comment créer un mini-programme de barrage prenant en charge les émoticônes du point de vue du produit.

Obtenir l'effet

Idée :

l'entrée obtient le texte d'entrée, le texte enrichi affiche le barrage contenant l'image et définit la direction du texte en texte enrichi Et faites défiler vers le haut, faites glisser pour modifier la taille du texte, la couleur du texte et d'autres opérations

Code d'implémentation :

1 Utilisez la saisie pour saisir du texte et prendre en charge les expressions emoji

Définissez d'abord un objet "danmu" pour enregistrer le texte de barrage saisi et le style de barrage,

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

puis définissez l'objet "nodes" pour afficher les données
text: barrage text fontSize: text; taille ; fontColor : couleur du texte ; lueur : lueur du texte ; vitesse : vitesse de défilement.

Utilisez le composant de saisie pour saisir du texte :

<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 définit la distance entre le curseur et le clavier dans la saisie

2.richText affiche un barrage contenant des images

Définir l'objet nœuds pour mettre à jour les barrages

nœuds : [{
nom : 'div',
Attributs : {
classe : 'danmu-text'},
enfants: [
                      
tapez : 'texte',
text: 'Texte de barrage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!