支付寶小程序不支持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 编译时报错