關(guān)于微信小程序中使用rich-text標(biāo)簽渲染富文本，想把這個富文本內(nèi)容傳遞給其他頁面。
首先：用普通的方法直接傳遞是會出錯的。item是從接口中拿過來的富文本
wx.navigateTo({
url: `/pages/commodity-details/commodity-details?item=${item}`,
})
控制臺會提示渲染錯誤
解決辦法：用encodeURIComponent轉(zhuǎn)碼
wx.navigateTo({
// item有特殊字符，需轉(zhuǎn)碼 encodeURIComponent轉(zhuǎn)碼
url: `/pages/commodity-details/commodity-details?item=${encodeURIComponent(JSON.stringify(item))}`,
})
當(dāng)然，在接收的地方還要處理一下
// 接受轉(zhuǎn)碼特殊字符需要decodeURIComponent解碼
const goodDetails = JSON.parse(decodeURIComponent(options.item));
現(xiàn)在用rich-text標(biāo)簽直接渲染goodDetails 就顯示正常了
如果富文本里面有圖片應(yīng)該怎么顯示
因為一般接口給出來的圖片都是像這樣的，需要我們?nèi)ヌ砑忧熬Y
'/profile/upload/2023/06/10/111_20230610152821A002.png'
解決辦法是在富文本中找到<img 然后拿出來處理,“config.domain”就是需要添加的前綴，當(dāng)然還可以添加一些行內(nèi)樣式。文章來源：http://www.zghlxwxcb.cn/news/detail-621353.html
const = richTextData = goodDetails.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
return `<img src='${ config.domain + p1 }' style="max-width:100%;height:auto;display:block;margin:0 auto;" />`
})
richTextData 就是處理好了圖片顯示問題的rich-text富文本內(nèi)容了文章來源地址http://www.zghlxwxcb.cn/news/detail-621353.html
到了這里，關(guān)于微信小程序中rich-text富文本的用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
