在开发小程序的时候,会遇到接口返回的内容是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') } })