這篇文章主要介紹了微信小程序渲染html內(nèi)容的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專(zhuān)注于企業(yè)營(yíng)銷(xiāo)型網(wǎng)站、網(wǎng)站重做改版、北海街道網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性?xún)r(jià)比高，為北海街道等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

最近又做了一個(gè)新的小程序關(guān)于物流訂單查詢(xún)

遇到了一個(gè)小問(wèn)題：數(shù)據(jù)中返回電話號(hào)碼的字符串識(shí)別出來(lái)并且高亮和可以綁定事件。比如數(shù)據(jù)中包含您的派送員黃xx正在派件，電話：137xxxx41460已經(jīng)在派送。其中就要識(shí)別出137xxxx41460并且綁定點(diǎn)擊事件可以點(diǎn)擊撥打電話號(hào)碼。

對(duì)于這個(gè)功能搜集了不少資料其中包含了3個(gè)解決方案但是各有優(yōu)缺點(diǎn)因此記錄下來(lái)

wxParse
小程序剛上線那會(huì)兒，是無(wú)法直接渲染HTML內(nèi)容的，于是就誕生了一個(gè)叫做「 wxParse 」的庫(kù)。它的原理就是把HTML代碼解析成樹(shù)結(jié)構(gòu)的數(shù)據(jù)，再通過(guò)小程序的模板把該數(shù)據(jù)渲染出來(lái)。

rich-text
后來(lái)，小程序增加了「rich-text」組件用于展示富文本內(nèi)容。然而，這個(gè)組件存在一個(gè)極大的限制： 組件內(nèi)屏蔽了所有節(jié)點(diǎn)的事件 。也就是說(shuō)，在該組件內(nèi)，連「預(yù)覽圖片」這樣一個(gè)簡(jiǎn)單的功能都無(wú)法實(shí)現(xiàn)。

web-view
再后來(lái)，小程序允許通過(guò)「web-view」組件嵌套網(wǎng)頁(yè)，通過(guò)網(wǎng)頁(yè)展示HTML內(nèi)容是兼容性好的解決方案了。然而，因?yàn)橐嗉虞d一個(gè)頁(yè)面，性能是較差的，個(gè)人小程序也是沒(méi)法用webview。

因?yàn)槲疫@個(gè)只是需求只是需要識(shí)別出來(lái)電話號(hào)碼并且不是那種復(fù)雜的字符模板。因此參考wxparse 的原理自己寫(xiě)了一個(gè)關(guān)于電話號(hào)碼識(shí)別的功能。

效果如下：

技術(shù)重點(diǎn)就是

1、在數(shù)據(jù)返回后對(duì)于字符串用正則(/(¹+)|(d{9,14})|(d{3,4}-d{6,10})/g)識(shí)別出電話號(hào)碼存在一個(gè)新的字段并且表示為type:phone ，不是電話號(hào)碼的字符就放到另外一個(gè)字段并且表示為type:text.數(shù)據(jù)結(jié)構(gòu)如圖所示

2、新建一個(gè)關(guān)于字段讀取的模板

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

其中，在模板里面綁定點(diǎn)擊事件方便后期做邏輯處理還可以綁定不同的參數(shù)方便獲取

3、在需要用到的地方引入模板

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

那就滿(mǎn)足現(xiàn)在的功能呢需求了。不用復(fù)雜的插件也比直接引入原生組件來(lái)得方便。關(guān)鍵就是思路。。特此記錄

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享微信小程序渲染html內(nèi)容的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

本文標(biāo)題：微信小程序渲染html內(nèi)容的方法-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://www.chinadenli.net/article28/docscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、搜索引擎優(yōu)化、小程序開(kāi)發(fā)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)