99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(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)惠性價(jià)比高，為北海街道等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

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

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

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

因?yàn)槲疫@個(gè)只是需求只是需要識(shí)別出來電話號(hào)碼并且不是那種復(fù)雜的字符模板。因此參考wxparse 的原理自己寫了一個(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)于字段讀取的模板

  
    
  


  
    {{item.acceptStation}}
  
  {{item.acceptStation}}

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

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

那就滿足現(xiàn)在的功能呢需求了。不用復(fù)雜的插件也比直接引入原生組件來得方便。關(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è)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!

文章名稱：微信小程序渲染html內(nèi)容的方法-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.ef60e0e.cn/article/docscp.html