本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序如何渲染html內(nèi)容(示例講解)，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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

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

wxParse

小程序剛上線那會(huì)兒，是無法直接渲染HTML內(nèi)容的，于是就誕生了一個(gè)叫做「 wxParse 」的庫。它的原理就是把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è)簡單的功能都無法實(shí)現(xiàn)。

web-view

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

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

效果如下：

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

1、在數(shù)據(jù)返回后對于字符串用正則(/(1+)|(d{9,14})|(d{3,4}-d{6,10})/g)識別出電話號碼存在一個(gè)新的字段并且表示為type:phone ，不是電話號碼的字符就放到另外一個(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)鍵就是思路。。特此記錄

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的php渲染页面简单例子,微信小程序如何渲染html内容（示例讲解）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。