支付寶小程序不支持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

  • 憤怒

    8

  • 可憐

    3

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 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.***.23 的嘉賓 说道 : 很久前
引入 mini-html-parser2 编译时报错