百度小程序富文本解析工具bdParse的使用

最近在做一個百度小程序的項目，我的需求是后端返回了文章的html結構數據，前端小程序需要同步顯示頁面，首先想到的肯定需要解析html結構數據；

所以需要用到富文本解析的功能，雖然小程序有提供了rich-text富文本組件功能，但這個效果并不一定能滿足自己想要的功能，因此需要去解析處理，

于是就去百度了一下，果然有高人寫好了組件直接拿來用就可以了（百度小程序富文本解析工具bdParse，改造自wxparse，

當然你如果有能力的化自己頁可以寫一個）,在此記錄一下具體步驟流程如下：

第一步：百度找到bdparse組件的下載地址；下載地址https://gitee.com/sootou/bdparse，下載整個全部文件，放到你的小程序根目錄下

第二步：在小程序頁面的js文件中直接引入代碼

const bdParse = require('../../bdParse/bdParse.js')

對應css中引入

@import "../../bdParse/bdParse.css";

第三步：在js文件中調用； 在需要的字段使用baparse，可以在onLoad方法中引用

onLoad: function (options) {   let content = `   <p style="line-height:nullpx;text-indent:2em;text-align:left"><font face="宋體">   <font size="4"><font color="#000000">拼多多開店，付費推廣是有門路和講究的。不論你是過早把錢花完，還是花不完，都是不利我們商品流量推廣的。今天，   帶大家了解一下分時折扣的概念和調整方法。</font></font></font></p><p style="line-height:nullpx;text-indent:2em;text-align:left"><strong>   <font face="宋體"><font size="4"><font color="#000000">我這邊給大家整理一份拼多多店鋪運營的實操干貨和資料，需要的朋友可以   </font><font color="#ff0000">掃描底部二維碼</font><font color="#000000">免費領取。   `   this.setData({     content:bdParse.bdParse('article', 'html',result, that, 10)   }) }

第四步：在swan頁面中引入模板文件，填寫如下代碼即可

<import src="../../bdParse/bdParse.swan" /> <template is="bdParse" data="{{{bdParseData: article.nodes}}}" />

總結：在高人的基礎上能更快的學習，快速的實現自己想要的功能，這也是學習的一種方式。學習是慢慢積累的過程，交流是重要的學習方式。