支付宝小程序不支持html语法富文本,在Uniapp上的解决方法

字号+ 编辑: 国内TP粉 修订: 种花家 来源: cnblogs 2023-09-20 我要说两句(1)

纠结于这个BUG吗?看看这个方法行不行。不想多说废话,百度统计说我们站点跳出率高也没关系,你看完能用就ok。

原因:

支付宝小程序势单力薄,开发进度还没到,尽管程序在不断的努力迭代,目前仍不能自动支持富文本内显示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;
阅完此文,您的感想如何?
  • 有用

    448

  • 没用

    4

  • 开心

    28

  • 愤怒

    7

  • 可怜

    3

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.交流群: PHP+JS聊天群

相关课文
  • Invalid prop custom validator check failed for prop navigationBarTextStyle

  • svg是什么文件格式?如何打开svg文件?

  • Cordova报错Could not find an installed version of Gradle either in Android Studio

  • flutter基础名词和简单代码案例

我要说说
网上宾友点评
1 楼 IP 171.88.44.23 的嘉宾 说道 : 1686364543
引入 mini-html-parser2 编译时报错