微信小程序渲染html内容

最近又作了一个新的小程序关于物流订单查询欢迎来体验

遇到了一个小问题：数据中返回电话号码的字符串识别出来而且高亮和能够绑定事件。好比数据中包含您的派送员黄xx正在派件，电话：137xxxx41460已经在派送。其中就要识别出137xxxx41460而且绑定点击事件能够点击拨打电话号码。

对于这个功能搜集了很多资料其中包含了3个解决方案可是各有优缺点所以记录下来

wxParse
小程序刚上线那会儿，是没法直接渲染HTML内容的，因而就诞生了一个叫作「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据，再经过小程序的模板把该数据渲染出来。

rich-text
后来，小程序增长了「rich-text」组件用于展现富文本内容。然而，这个组件存在一个极大的限制： 组件内屏蔽了全部节点的事件 。也就是说，在该组件内，连「预览图片」这样一个简单的功能都没法实现。

web-view
再后来，小程序容许经过「web-view」组件嵌套网页，经过网页展现HTML内容是兼容性最好的解决方案了。然而，由于要多加载一个页面，性能是较差的，我的小程序也是无法用webview。

 

由于我这个只是需求只是须要识别出来电话号码而且不是那种复杂的字符模板。所以参考wxparse 的原理本身写了一个关于电话号码识别的功能。

效果以下：

技术重点就是

一、在数据返回后对于字符串用正则(/(¹+)|(d{9,14})|(d{3,4}-d{6,10})/g)识别出电话号码存在一个新的字段而且表示为type:phone ，不是电话号码的字符就放到另一个字段而且表示为type:text.数据结构如图所示

二、新建一个关于字段读取的模板

<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>

其中，在模板里面绑定点击事件方便后期作逻辑处理还能够绑定不一样的参数方便获取

三、在须要用到的地方引入模板

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

那就知足如今的功能呢需求了。不用复杂的插件也比直接引入原生组件来得方便。关键就是思路。。特此记录哈。

---

1. d ↩