WeChat 애플릿이 헤드라인 뉴스 세부정보 페이지에 그래픽 및 텍스트 표시 기능을 구현하는 방법에 대한 자세한 설명

우리 모두 알고 있듯이 WeChat 애플릿은 컴파일된 후에 HTML 태그를 구문 분석할 수 없습니다. 따라서 다음과 같은 의문이 생깁니다. 백그라운드에서 WYSIWYG 편집기를 통해 편집된 사진과 텍스트가 있는 기사를 WeChat 애플릿에 표시하려면 어떻게 해야 합니까? 이것이 바로 이 기사의 내용입니다.

이 글의 내용은 다음과 같습니다

1. HTML을 파싱하는 방법

2. 미니 프로그램을 표시하는 방법

3. . 요약

이 기사에 설명된 내용은 PHP와 WeChat 애플릿의 협력을 기반으로 합니다. 일반적인 아이디어는 PHP를 사용하여 태그의 유형, 스타일 및 내용을 일치시킨 다음 미니 프로그램을 사용하여 태그 유형을 기반으로 미니 프로그램과 함께 제공되는 태그를 생성하는 것입니다. 예를 들어, P 태그는 view 태그로 변환되고, label 태그는 text 태그로 변환되고, img 태그는 image 태그로 변환됩니다. 그런 다음 내용과 스타일을 첨부합니다.

1. HTML을 구문 분석하는 방법

WYSIWYG 편집기를 통해 편집한 기사는 다음과 같습니다(편집기에서 "소스 보기"를 클릭하면 볼 수 있습니다):

p 태그, 그림 태그, 줄 바꿈 태그 등이 있는 것을 볼 수 있습니다. 이러한 태그는 미니 프로그램에 직접 전달되어 표시됩니다. 이므로 구문 분석할 수 없습니다. 이때, 정규식의 도움이 필요합니다. 일반적으로 사용되는 정규식은 다음과 같습니다.

다른 태그도 유사하므로 예를 들지 않겠습니다. 하나씩.

PHP의 정규 매칭 기능은 다음과 같이 사용됩니다.

위 그림에서 $view[1]은 기사 내용의 HTML입니다. 또는 태그 내부의 특정 단락.

다른 정규 표현식도 유사하게 사용됩니다. 프런트 엔드에 반환되는 데이터 형식은 다음과 같습니다.

2. 애플릿에

small 프로그램 로직은 매우 간단합니다. 인터페이스를 통해 전달되는 유형에 따라 다른 레이블을 표시하면 됩니다.

3 . 요약

1. 위 주어진 애플릿 예제는 스타일을 표시하지 않습니다. PHP 측에서는 이미 스타일 속성을 추가하기만 하면 됩니다. 레이블에 추가한 다음 백그라운드에서 일치하는 스타일 콘텐츠를 설정합니다.

2. 누군가 js에 능숙하다면 js를 사용하여 HTML 태그를 구문 분석할 수도 있습니다. . 관심이 있으시면 Baidu에 가실 수 있습니다.

위 내용은 WeChat 애플릿이 헤드라인 뉴스 세부정보 페이지에 그래픽 및 텍스트 표시 기능을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!