眾所周知岂傲,微信小程序編譯好后是不能解析HTML標(biāo)簽的,那么問(wèn)題來(lái)了:后臺(tái)中通過(guò)所見(jiàn)即所得編輯器編輯的圖文并茂的文章如何在微信小程序端也能顯示呢?這就是本文要討論的主題江掩。
本文內(nèi)容如下
一、如何解析HTML
二乘瓤、小程序端如何顯示
三环形、總結(jié)
本文所講內(nèi)容是基于PHP和微信小程序端的一起配合的情況下完成的⊙每總體思路是通過(guò)PHP把標(biāo)簽的類型抬吟、樣式和內(nèi)容匹配出來(lái),然后通過(guò)小程序端根據(jù)標(biāo)簽的類型生成小程序自帶的標(biāo)簽统抬。比如P標(biāo)簽轉(zhuǎn)為view標(biāo)簽火本,label標(biāo)簽轉(zhuǎn)為text標(biāo)簽,img標(biāo)簽轉(zhuǎn)為image標(biāo)簽蓄喇。然后附上內(nèi)容和樣式即可发侵。
一、如何解析HTML
通過(guò)所見(jiàn)即所得編輯器編輯的文章是長(zhǎng)這樣的(點(diǎn)擊編輯器的“查看源碼 ”即可查看):
可以看到有p標(biāo)簽妆偏,圖片標(biāo)簽刃鳄,換行標(biāo)簽等,這些標(biāo)簽直接傳給小程序端是原樣顯示钱骂,無(wú)法解析叔锐。這個(gè)時(shí)候需要正則表達(dá)式的幫助了,常用的正則匹配如下:
其它標(biāo)簽類似见秽,不一一舉例愉烙。
PHP的正則匹配函數(shù)使用如下:
上圖中$view[1]為文章內(nèi)容的HTML或者是某段p標(biāo)簽里面的HTML。
其它正則使用類似解取,返回給前端的數(shù)據(jù)格式如下:
二步责、小程序端顯示
小程序邏輯很簡(jiǎn)單,根據(jù)接口傳的類型顯示不同的標(biāo)簽即可禀苦,代碼如下:
三蔓肯、總結(jié)
1、上面給的小程序端樣例沒(méi)有把樣式給顯示上去振乏,PHP端已經(jīng)匹配出樣式的內(nèi)容蔗包,要顯示也很簡(jiǎn)單,只需要在標(biāo)簽上加個(gè)style屬性慧邮,然后設(shè)置后臺(tái)匹配的樣式內(nèi)容即可调限;
2舟陆、如果有人js很牛逼的,也可以通過(guò)js去解析HTML標(biāo)簽耻矮,GitHub上有人開(kāi)源了類似的框架秦躯,有興趣可以去百度下。