眾所周知，微信小程序編譯好后是不能解析HTML標(biāo)簽的，那么問題來了：后臺(tái)中通過所見即所得編輯器編輯的圖文并茂的文章如何在微信小程序端也能顯示呢？這就是本文要討論的主題。

本文內(nèi)容如下

一、如何解析HTML

二、小程序端如何顯示

三、總結(jié)

本文所講內(nèi)容是基于PHP和微信小程序端的一起配合的情況下完成的。總體思路是通過PHP把標(biāo)簽的類型、樣式和內(nèi)容匹配出來，然后通過小程序端根據(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

通過所見即所得編輯器編輯的文章是長這樣的（點(diǎn)擊編輯器的“查看源碼 ”即可查看）：

可以看到有p標(biāo)簽，圖片標(biāo)簽，換行標(biāo)簽等，這些標(biāo)簽直接傳給小程序端是原樣顯示，無法解析。這個(gè)時(shí)候需要正則表達(dá)式的幫助了，常用的正則匹配如下：

其它標(biāo)簽類似，不一一舉例。

PHP的正則匹配函數(shù)使用如下：

上圖中$view[1]為文章內(nèi)容的HTML或者是某段p標(biāo)簽里面的HTML。

其它正則使用類似，返回給前端的數(shù)據(jù)格式如下：

二、小程序端顯示

小程序邏輯很簡單，根據(jù)接口傳的類型顯示不同的標(biāo)簽即可，代碼如下：

三、總結(jié)

1、上面給的小程序端樣例沒有把樣式給顯示上去，PHP端已經(jīng)匹配出樣式的內(nèi)容，要顯示也很簡單，只需要在標(biāo)簽上加個(gè)style屬性，然后設(shè)置后臺(tái)匹配的樣式內(nèi)容即可；

2、如果有人js很牛逼的，也可以通過js去解析HTML標(biāo)簽，GitHub上有人開源了類似的框架，有興趣可以去百度下。