Detailed explanation of an example of how WeChat applet implements graphic and text display function on headline news details page

As we all know, the WeChat applet cannot parse HTML tags after being compiled. So the question arises: How can the articles with pictures and texts edited through the WYSIWYG editor in the background be displayed on the WeChat applet? This is what this article is about.

The content of this article is as follows

1. How to parse HTML

2. How to display the mini program

3. Summary

The content discussed in this article is based on the cooperation of PHP and WeChat applet. The general idea is to use PHP to match the type, style and content of the tag, and then use the mini program to generate the tags that come with the mini program based on the tag type. For example, the P tag is converted to a view tag, the label tag is converted to a text tag, and the img tag is converted to an image tag. Then attach the content and style.

1. How to parse HTML

The article edited through the WYSIWYG editor looks like this (click "View Source" in the editor to view):

You can see that there are p tags, picture tags, line break tags, etc. These tags are directly passed to the mini program and displayed as they are. , cannot be parsed. At this time, you need the help of regular expressions. Commonly used regular expressions are as follows:

Other tags are similar, so I won’t give examples one by one.

PHP’s regular matching function is used as follows:

$view[1] in the above picture is the HTML of the article content or a certain paragraph HTML inside the tag.

Other regular expressions are used similarly. The data format returned to the front end is as follows:

2. The applet displays

small The program logic is very simple. Just display different labels according to the type passed through the interface. The code is as follows:

##3. Summary

1. Above The given applet example does not display the style. The PHP side has already matched the content of the style. It is also very simple to display it. You only need to add a style attribute to the label, and then set the matching style content in the background;

2. If someone is very good at js, you can also use js to parse HTML tags. Someone on GitHub has open sourced a similar framework. If you are interested, you can download it from Baidu.

The above is the detailed content of Detailed explanation of an example of how WeChat applet implements graphic and text display function on headline news details page. For more information, please follow other related articles on the PHP Chinese website!