本文內容如下

一、如何解析HTML

二、小程序端如何顯示

三、總結

本文所講內容是基于PHP和微信小程序端的一起配合的情況下完成的。總體思路是通過PHP把標簽的類型、樣式和內容匹配出來，然后通過小程序端根據標簽的類型生成小程序自帶的標簽。比如P標簽轉為view標簽，label標簽轉為text標簽，img標簽轉為image標簽。然后附上內容和樣式即可。

一、如何解析HTML

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

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

其它標簽類似，不一一舉例。

PHP的正則匹配函數使用如下：

上圖中$view[1]為文章內容的HTML或者是某段p標簽里面的HTML。

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

二、小程序端顯示

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

三、總結

1、上面給的小程序端樣例沒有把樣式給顯示上去，PHP端已經匹配出樣式的內容，要顯示也很簡單，只需要在標簽上加個style屬性，然后設置后臺匹配的樣式內容即可；

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

以上就是微信小程序實現頭條新聞詳情頁圖文顯示功能的實例詳解的詳細內容，更多請關注php中文網其它相關文章！