最近在做一個(gè)百度小程序的項(xiàng)目,我的需求是后端返回了文章的html結(jié)構(gòu)數(shù)據(jù),前端小程序需要同步顯示頁面,首先想到的肯定需要解析html結(jié)構(gòu)數(shù)據(jù);
所以需要用到富文本解析的功能,雖然小程序有提供了rich-text富文本組件功能,但這個(gè)效果并不一定能滿足自己想要的功能,因此需要去解析處理,
于是就去百度了一下,果然有高人寫好了組件直接拿來用就可以了(百度小程序富文本解析工具bdParse,改造自wxparse,
當(dāng)然你如果有能力的化自己頁可以寫一個(gè)),在此記錄一下具體步驟流程如下:
第一步:百度找到bdparse組件的下載地址;下載地址 https://gitee.com/sootou/bdparse ,下載整個(gè)全部文件,放到你的小程序根目錄下
第二步:在小程序頁面的js文件中直接引入代碼
const bdParse = require('../../bdParse/bdParse.js')
對(duì)應(yīng)css中引入
@import "../../bdParse/bdParse.css";
第三步:在js文件中調(diào)用; 在需要的字段使用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">拼多多開店,付費(fèi)推廣是有門路和講究的。不論你是過早把錢花完,還是花不完,都是不利我們商品流量推廣的。今天, 帶大家了解一下分時(shí)折扣的概念和調(diào)整方法。</font></font></font></p><p style="line-height:nullpx;text-indent:2em;text-align:left"><strong> <font face="宋體"><font size="4"><font color="#000000">我這邊給大家整理一份拼多多店鋪運(yùn)營的實(shí)操干貨和資料,需要的朋友可以 </font><font color="#ff0000">掃描底部二維碼</font><font color="#000000">免費(fèi)領(lǐng)取。 ` this.setData({ content:bdParse.bdParse('article', 'html',result, that, 10) }) }
第四步:在swan頁面中引入模板文件,填寫如下代碼即可
<import src="../../bdParse/bdParse.swan" /> <template is="bdParse" data="{{{bdParseData: article.nodes}}}" />
總結(jié):在高人的基礎(chǔ)上能更快的學(xué)習(xí),快速的實(shí)現(xiàn)自己想要的功能,這也是學(xué)習(xí)的一種方式。學(xué)習(xí)是慢慢積累的過程,交流是重要的學(xué)習(xí)方式。