原因:
支付寶小程序勢單力薄,開發進度還沒到,盡管程序在不斷的努力疊代,目前仍不能自動支持富文本内顯示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;