How to render html content in WeChat applet (explanation with examples)

The content this article brings to you is about how WeChat applet renders html content (explanation with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Recently I made a new small program about logistics order query

I encountered a small problem: the string of the phone number returned in the data was identified and highlighted and the event could be bound. For example, the data includes that your delivery person Huang xx is delivering, and his phone number: 137xxxx41460 is already delivering. Among them, it is necessary to identify 137xxxx41460 and bind the click event to click to dial the phone number.

I have collected a lot of information about this function, including 3 solutions, but each has its own advantages and disadvantages, so I recorded it

wxParse
The small program has just been launched. Now, it is impossible to directly render HTML content, so a library called "wxParse" was born. Its principle is to parse HTML code into tree-structured data, and then render the data through the template of the mini program.

rich-text
Later, the mini program added the "rich-text" component to display rich text content. However, this component has a huge limitation: events of all nodes are blocked within the component. In other words, in this component, even a simple function such as "preview image" cannot be implemented.

web-view
Later, the mini program allowed web pages to be nested through the "web-view" component. Displaying HTML content through web pages was the most compatible solution. However, because one more page needs to be loaded, the performance is poor, and personal applet cannot use webview.

Because my only requirement is to recognize the phone number and not that kind of complicated character template. Therefore, I wrote a function about phone number recognition based on the principles of wxparse.

The effect is as follows:

The technical focus is

1. Use regular rules for strings after the data is returned (/(¹ )|(d{9,14})|(d{3,4}-d{6,10})/g) recognizes that there is a new field for the phone number and indicates For type:phone, characters that are not phone numbers are placed in another field and represented as type:text. The data structure is as shown in the figure

2. Create a new template about field reading

<template>
  <block>
    <template></template>
  </block>
</template>
<template>
  <block>
    <text>{{item.acceptStation}}</text>
  </block>
  <block>{{item.acceptStation}}</block>
</template>

. Bind click events in the template to facilitate later logical processing. You can also bind different parameters to facilitate acquisition.

3. When needed Introduce the template

  <import></import>   
  <template></template>

where used to meet the current functional requirements. It is more convenient than directly introducing native components without using complicated plug-ins. The key is the idea. . Hereby record

The above is the detailed content of How to render html content in WeChat applet (explanation with examples). For more information, please follow other related articles on the PHP Chinese website!