WeChat 미니 프로그램이 텍스트를 조작합니다(공격)

미니 프로그램의 탄막 애플리케이션은 대부분 텍스트만 지원하지만, 이미지 및 오디오 기능이 없습니다. 이 글에서는 제품 관점에서 이모티콘을 지원하는 탄막 미니 프로그램을 만드는 방법을 설명합니다.

효과 달성

아이디어:

입력 입력 텍스트를 가져오면 리치 텍스트가 그림이 포함된 공세를 표시하고 리치 텍스트의 텍스트 방향을 설정한 후 위로 스크롤하고 슬라이드하여 텍스트 크기, 텍스트 색상을 변경합니다. 및 기타 작업

구현 코드:

1. 입력을 사용하여 텍스트를 입력하고 이모티콘 표현을 지원합니다.

먼저 "단무" 개체를 정의하여 입력 사격 텍스트와 사격 스타일을 저장합니다.

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

그런 다음 "노드" 개체를 정의합니다. 데이터 표시
텍스트: 단무 자막 텍스트; 글꼴 크기: 텍스트 색상; 글로우 속도: 스크롤 속도.

입력 구성 요소를 사용하여 텍스트를 입력합니다.

<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은 입력에서 커서와 키보드 사이의 거리를 설정합니다.

2.richText는 그림이 포함된 사격을 표시합니다.

탄격을 업데이트하기 위해 노드 개체를 정의합니다.

 노드: [{
이름: 'div',
속성: {
클래스: '단무텍스트'},
어린이들: [
                      
유형: '텍스트',
text: '공격 텍스트

위 내용은 WeChat 미니 프로그램이 텍스트를 조작합니다(공격)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!