在開發小程序的時候,會遇到接口返回的內容是html標簽的情況,為了讓把小程序不識別的html標簽轉成可識別的wxml,我們用到了富文本。
使用方法:
1:項目根目錄下應用xwParse(下載地址:https://github.com/icindy/wxParse)。
2:頁面引用方式一:
(1)js引入:
var WxParse = require('../../wxParse/wxParse.js');
WxParse.wxParse(bindName, type, data, target, imagePadding)
bindName:綁定的數據名(必填)
type:html或md(必填)
data:傳入的數據(必填)
target:this(必填)
imagePadding:圖片自適應的左右padding(默認是0,可選)
(2)wxml引入:
wxml:<import src="../../wxParse/wxParse.wxml" />
<import src="../../wxParse/wxParse.wxml"/> <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
3:頁面引入方式二:
小程序自帶rich-text組件(詳細內容參看:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)
示例代碼:
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') } })