微信小程序 rich-text 组件 配合 mp-html 的使用
2021年6月15日
rich-text给我的感觉就像文章详情组件一样, 但是他只能解析node所以非常麻烦,我们要使用mp-html将html转化为node节点
1.在项目目录下安装组件包
|
1 |
npm install mp-html |
2.在需要使用页面的 json 文件中添加
|
1 2 3 4 5 |
{ <span class="pl-s"><span class="pl-pds">"</span>usingComponents<span class="pl-pds">"</span></span>: { <span class="pl-s"><span class="pl-pds">"</span>mp-html<span class="pl-pds">"</span></span>: <span class="pl-s"><span class="pl-pds">"</span>mp-html<span class="pl-pds">"</span></span> } } |
3.在wxml中添加
|
1 |
<parser bindimgtap="onTapImage" html="{{html}}" tag-style="{{tagStyle}}" /> |
4.在js文件中添加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Page({ /** * 写数据的地方 */ data: { tagStyle: { img: 'font-size:0;display:block;', }, html: "<div>小程序实践<span>message</span><img src='http://t.cn/A622upBw' /><img src='http://t.cn/A622upBw' /></div>" }, /** * 一个方法 * @param e */ onTapImage(e) { console.log('iamge url', e.detail.src) } }) |
