如题所示,在vue中可以使用v-html
来实现。
那么,在小程序里该怎么实现呢???
经过资料的查找,发现这么一个插件mini-html-parser2
,【文档地址】
使用流程
1. 安装插件
npm install mini-html-parser2 --save
2.引入使用
在对应的.js
文件里
import parse from 'mini-html-parser2';
const html =`<h1>小程序渲染html字符串</h1>
<ul>
<li>1. 安装插件</li>
<li>2. 引入插件并转换</li>
<li>3. html页面使用rich-text展示</li>
</ul>
`
Page({
data: {
nodes: [],
},
onLoad() {
parse(html, (err, nodes) => {
if (!err) {
this.setData({
nodes,
});
}
})
},
})
3.页面展示
<view>
<rich-text nodes="{{nodes}}" />
</view>