Recently also made a new small procedures about logistics order inquiries welcome to experience

There is a small problem: the string returning the phone number in the data is recognized and highlighted and can be bound to the event. For example, the data contains your dispatcher Huang XX who is delivering the goods, and the phone number: 137XXXX41460 is already delivering the goods. It is necessary to identify 137xxxx41460 and bind the click event to call the phone number.

A lot of data has been collected on this feature and there are three solutions but each has advantages and disadvantages so they are documented

When the WXParse applet was launched, it was not possible to render HTML content directly, so a library called “WXParse” was born. Its principle is to parse HTML code into tree structure data, and then through the small program template to render the data out.

Rich-text Later, the applet added a “rich-text” component for displaying rich-text content. However, this component has one big limitation: all node events are masked within the component. In other words, even the simple function of “preview image” cannot be implemented in this component.

More recently, applets allowed web pages to be nested via “Web-View” components, and presenting HTML content through a web page was the most compatible solution. However, because of the extra page load, performance is poor and personal applets can’t use WebView.

 

Because this is just a requirement that I need to recognize the phone number and it’s not a complicated character template. So I wrote a phone number recognition function based on the WXParse principle.

The effect is as follows:

The technical point is that

1, after the data back to a string with regular (/ (1 +) | | {9, 14} (d) (d – d 6, 10} {{3, 4})/g) to identify the phone number is a new field and is expressed as type: phone, not the phone number of characters in another field and is expressed as type: text. The data structure is shown in the figure

2. Create a new template for field reading

<template name="wepyhtml">
  <block wx:for="{{wxmlData}}" wx:key="">
    <template is="wxml" data="{{item}}"></template>
  </block>
</template>
<template name="wxml">
  <block wx:if="{{item.type == 'phone'}}" wx:key="">
    <text class="blue" bindtap="tapTel" data-phone="{{item.acceptStation}}">{{item.acceptStation}}</text>
  </block>
  <block wx:else>{{item.acceptStation}}</block>
</template>

Among them, in the template binding click events for later logical processing can also bind different parameters for easy access

3. Introduce templates where you need them

  <import src="/components/html.wxml" />   
  <template is="wepyhtml" data="{{wxmlData:item.nodes}}"></template>

That will satisfy the current functional needs. It is also easier to do without complex plug-ins than to introduce native components directly. The key is thinking. Hereby record ha.

  1. D ↩