原因:
支付宝小程序势单力薄,开发进度还没到,尽管程序在不断的努力迭代,目前仍不能自动支持富文本内显示html的自适应。
如果你注意观察,发现别的公司所研发的小程序产生的最终样式和支付宝是不一样的。
解决方法如下:
首先我们找到这个富文本显示不正常的页面,在script标签开头写上
import parse from 'mini-html-parser2';
意思是引入这个mini-html-parser2的nodejs库,命名为parse对象等待使用;
之后要在支付宝小程序开发工具里的左边文件结构树空白处,点“在系统终端中打开”,可能叫别的名字,只要带“终端”二字有关的就打开它。这个时候在终端里输入:
npm install mini-html-parser2 --save
如果你没有安装npm,那赶快先安装一个。
安装完毕之后你会发现项目里多了一个node_modules文件夹。
代码使用
这个时候在你需要处理的项目JS文件里把String进行转义:
let htmlNodes = []; // 先声明防止报错 parse(res.data.content, (err, htmlNodes) => { if(!err) { this.content = htmlNodes; } })
其中res.data.content是从接口获取到的string串,htmlNodes就是转义后的数组节点变量
接下来正常发挥吧!
uniapp的富文本文档所含图片样式控制
使用js正则匹配,将css样式依次绑定给<img>标签。
// 富文本图片处理 let htmlBody = res.data.body.replace(/\<img/gi, '<img style="display:-webkit-box;max-width:90%!important;margin:10px auto!important;height:auto!important" '); this.body = htmlBody;