搞定了微信小程序富文本渲染解決方案-後端渲染方案Html2Wxml2J

先介紹一下最近遇到的問題：

最近小程序項目中有文章詳情頁須要渲染富文本，微信小程序官方提供的<rich-text>是個弱雞，不少標籤不支持，用起來也麻煩，性能也不咋地。

吐槽完了，咱們決定尋找其餘方案-wxParse，一個小程序前端使用的javascript庫，前端直接轉換渲染。使用到了微信小程序的模板渲染，可是依然弱雞，常常出現各類Javascript錯誤，不少標籤不兼容。

 

咱們的需求是

一篇文章詳情圖文Html標籤正常解析，就連視頻和音頻，常見Html標籤，代碼標籤都要渲染出來。

 

起初，我想的也是在微信小程序端，使用JavaScript處理這些編譯渲染的工做，或者拿到WxParse的代碼去改改。

無奈，個人JavaScript水平雖然不是弱雞，單也耗時費力。因而我就轉變思路尋找服務器端的解決方案，將須要渲染的Html在後端處理好，而後前端根據配置的模板動態渲染。

這個思路敲定之後，很是幸運地在開源中國碼雲裏找到了一個靠譜的項目-html2wxml 

這個項目有好幾種使用方式：

第一種、插件版

一、須要使用者在微信小程序後臺，添加html2wxml這個第三方插件服務，在小程序裏配置一下這個插件，就能自動加載和使用了，很是方便。

二、添加完插件後，須要在微信小程序項目裏配置一下這個插件：注意version版本號和appid

代碼以下：

"plugins": {
 	"htmltowxml": {
 		"version": "1.3.0",
 		"provider": "wxa51b9c855ae38f3c"
 	}
 }

三、而後，在對應須要使用這個插件渲染Html富文本的頁面，找到對應的JSON文件，加入一個聲明：代碼以下

這樣，插件版的使用配置就完成了，剩下的就是如何具體在頁面中使用這個插件去渲染了。

 

在咱們本身的小程序項目中找到頁面對應的JavaScript文件，添加一個模擬讀取外部Html的過程：

咱們讀取到Html後賦值爲本頁面定義的一個數據變量「html」;

而後在對應的Index.wxml中 加入插件提供的調用方式：

直接把Html變量丟給這個組件的text屬性就能夠了，其餘屬性能夠去html2wxml的碼雲站點看文檔說明。

 

咱們來看一下成果：

第一個是在瀏覽器裏查看的效果：

再來看看 小程序裏插件版的轉換效果：是否是一毛同樣~~

 

好了，講到這裏你們都明白Html2Wxml是幹什麼的了，也知道如何使用了，這裏咱們發現一個問題，這個插件版如何給咱們轉換的代碼呢？

看看NetWork就知道了：看下圖，原來是插件自動將html代碼發給插件提供的服務接口，將html轉成了JSON格式的NODE節點數據，而後交給了插件在小程序解析渲染。

那麼，問題來了：我線上的應用都是用官方提供的這個接口服務器地址，萬一哪天扛不住掛了怎麼辦，小程序不也跟着廢了嗎？

這個問題，做者固然想到啦~~~

2、除了插件版，做者還提供了另外兩個版本 模板版本和自建服務器組件版，這兩個版本都須要下載一套代碼集成到微信小程序的項目中。

一、模板版本的我這裏就不講了，官方有文檔 我先截個圖過來

二、自建服務器組件版，須要下載整套HTML2Wxml組件版的源代碼，集成到咱們如今的微信小程序項目中。

這裏下載有兩個選擇，一個是PHP版本，一個是Java版本 其中PHP版本是html2wxml的做者寫的，目前插件版訪問的就是後端PHP版本。

可是，我是搞Java的小夥兒，PHP略懂。。。 本身搭建完也正常使用了，可是總覺不爽，因而我就寫了一個Java版的後端轉換程序，而且開源了。

哎呀，媽呀，寫了這麼多終於說到本身了~~

 

3、實戰實戰

項目地址：https://www.oschina.net/p/html2wxml4j

具體用法也很簡單：

一、首先，下載組件源碼 集成到小程序項目中 直接拿截圖吧

注意組件版的代碼放的位置，我是放在了和Pages在同一級目錄下，而後跟插件版不同的是在Index.json中的引用配置，具體的存放路徑。

 

其實默認，若是到此位置，也就是用了組件版替換了插件版，可是最後調用的服務器接口，仍是官方提供的，在上圖的文件裏能夠找到這個地址。

那麼若是，咱們須要本身使用本身部署的後端服務，就須要下載Java版或者Php版本的接口源碼，本身部署後，在這裏替換掉接口地址就好了。

二、下載Html2wxml4J的源碼

源碼是JFinal+JSoup+FastJson開發的，JFinal做爲Controller層，若是有使用Spring系列的 能夠幾分鐘內參照JFinal的Controller 改掉。

主要就是這個IndexController，接口的入口處理器，在這裏主要傳遞的就是text參數。

直接右鍵 run as，啓動MainConfig.java，80端口。

使用http://127.0.0.1 就能夠訪問了。

不傳任何數據，返回空的數組（廢話~~）。

text參數傳遞過來一個h1標籤，轉換成下面的節點數據。

這些數據 在小程序裏使用組件能夠直接解析了。

 

那我再把微信小程序裏組件上的接口地址改爲 這個http://127.0.0.1.

去看看轉換的效果~~

 

好了，終於搞定了，這樣就完成了一個從服務端解析轉換 小程序裏渲染Html的方案，並且仍是Java版的哦~~