微信小程序渲染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 ↩