WeChat mini program plays tricks on text (barrage)

Most of the barrage-type applications in mini programs only support text, but the image and audio functions are missing. This article will explain how to create a barrage mini program that supports emoticons from a product perspective.

Achieve the effect

Idea:

input Get the input text, richtext displays the barrage containing the picture, and sets the direction of the text in richtext And scroll up, slide to change text size, text color and other operations

Implementation code:

1. Use input to input text and support emoji expressions

First define a "danmu "object to save the entered barrage text and barrage style,

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

Then define the "nodes" object display data
text: barrage text; fontSize: text size; fontColor: text color; glow : text glow; speed: scrolling speed.

Use the input component to input text:

<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 sets the distance between the cursor and the keyboard in the input

2.richText displays a barrage containing pictures

Define nodes object to update barrages

nodes: [{
name: 'div',
Attrs: {
class: 'danmu-text'},
children: [
                      
type: 'text',
text: 'Barrage text

The above is the detailed content of WeChat mini program plays tricks on text (barrage). For more information, please follow other related articles on the PHP Chinese website!