先介紹一下最近遇到的問題：
最近小程序項目中有文章詳情頁需要渲染富文本，微信小程序官方提供的<rich-text>是個弱雞，很多標籤不支持，用起來也麻煩，性能也不咋地。
吐槽完了，我們決定尋找其他方案-wxParse，一個小程序前端使用的javascript庫，前端直接轉換渲染。使用到了微信小程序的模板渲染，但是依然弱雞，經常出現各種Javascript錯誤，很多標籤不兼容。
我們的需求是
一篇文章詳情圖文Html標籤正常解析，就連視頻和音頻，常見Html標籤，代碼標籤都要渲染出來。
起初，我想的也是在微信小程序端，使用JavaScript處理這些編譯渲染的工作，或者拿到WxParse的代碼去改改。
無奈，我的JavaScript水平雖然不是弱雞，單也耗時費力。於是我就轉變思路尋找服務器端的解決方案，將需要渲染的Html在後端處理好，然後前端根據配置的模板動態渲染。
這個思路敲定以後，非常幸運地在開源中國碼雲裏找到了一個靠譜的項目-html2wxml
這個項目有好幾種使用方式：
第一種、插件版
1、需要使用者在微信小程序後臺，添加html2wxml這個第三方插件服務，在小程序裏配置一下這個插件，就能自動加載和使用了，非常方便。
2、添加完插件後，需要在微信小程序項目裏配置一下這個插件：注意version版本號和appid
代碼如下：
"plugins": {
"htmltowxml": {
"version": "1.3.0",
"provider": "wxa51b9c855ae38f3c"
}
}
3、然後，在對應需要使用這個插件渲染Html富文本的頁面，找到對應的JSON文件，加入一個聲明：代碼如下
這樣，插件版的使用配置就完成了，剩下的就是如何具體在頁面中使用這個插件去渲染了。
在我們自己的小程序項目中找到頁面對應的JavaScript文件，添加一個模擬讀取外部Html的過程：
我們讀取到Html後賦值爲本頁面定義的一個數據變量“html”;
然後在對應的Index.wxml中 加入插件提供的調用方式：
直接把Html變量丟給這個組件的text屬性就可以了，其他屬性可以去html2wxml的碼雲站點看文檔說明。
我們來看一下成果：
第一個是在瀏覽器裏查看的效果：
再來看看 小程序裏插件版的轉換效果：是不是一毛一樣~~
好了，講到這裏大家都明白Html2Wxml是幹什麼的了，也知道如何使用了，這裏我們發現一個問題，這個插件版如何給我們轉換的代碼呢？
看看NetWork就知道了：看下圖，原來是插件自動將html代碼發給插件提供的服務接口，將html轉成了JSON格式的NODE節點數據，然後交給了插件在小程序解析渲染。
那麼，問題來了：我線上的應用都是用官方提供的這個接口服務器地址，萬一哪天扛不住掛了怎麼辦，小程序不也跟着廢了嗎？
這個問題，作者當然想到啦~~~
二、除了插件版，作者還提供了另外兩個版本 模板版本和自建服務器組件版，這兩個版本都需要下載一套代碼集成到微信小程序的項目中。
1、模板版本的我這裏就不講了，官方有文檔 我先截個圖過來
2、自建服務器組件版，需要下載整套HTML2Wxml組件版的源代碼，集成到我們現在的微信小程序項目中。
這裏下載有兩個選擇，一個是PHP版本，一個是Java版本 其中PHP版本是html2wxml的作者寫的，目前插件版訪問的就是後端PHP版本。
但是，我是搞Java的小夥兒，PHP略懂。。。 自己搭建完也正常使用了，但是總覺不爽，於是我就寫了一個Java版的後端轉換程序，並且開源了。
哎呀，媽呀，寫了這麼多終於說到自己了~~
三、實戰實戰
項目地址：https://www.oschina.net/p/html2wxml4j
具體用法也很簡單：
1、首先，下載組件源碼 集成到小程序項目中 直接拿截圖吧
注意組件版的代碼放的位置，我是放在了和Pages在同一級目錄下，然後跟插件版不一樣的是在Index.json中的引用配置，具體的存放路徑。
其實默認，如果到此位置，也就是用了組件版替換了插件版，但是最後調用的服務器接口，還是官方提供的，在上圖的文件裏可以找到這個地址。
那麼如果，我們需要自己使用自己部署的後端服務，就需要下載Java版或者Php版本的接口源碼，自己部署後，在這裏替換掉接口地址就行了。
2、下載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.
去看看轉換的效果~~
好了，終於搞定了，這樣就完成了一個從服務端解析渲染Wxml的方案，而且還是Java版的哦~~