業務場景:
項目是一個商品類型,現在商品介紹管理端是用的富文本做的内容釋出和編輯;
小程式對接的時候,能否支援這樣的場景,比如react裡面有單獨的标簽來接收html,
希望解決問題:
能夠加入一個支援html解析的元件,最起碼能夠保持格式不變和能夠展示圖檔!
改問題請參考下面連結位址:
[連結位址]
(https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000ec6762741f8e278f61ba8951000&token=1802039541&lang=zh_CN)
解決思路:
使用:
<rich-text>元件了解一下
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
當然有一個小問題(重點說明):圖檔無法自适應,需要自己解決這個問題:
提供兩種方案解決:
方案一:
替換成比較通用的百分比模式
參考連結位址
wxml檔案下
<view class="find-content">
<rich-text nodes="{{weeklyDetail.content}}" type='text'></rich-text>
</view>
js檔案下
f1.getWeeklyById(id, res => {
let content = res.content;
//重點是這句話 res.content是從背景擷取的資料 進行正則比對的
res.content = content.replace(/\<img/gi, '<img style="width:100%;height:auto" ')
this.setData({
weeklyDetail: res
})
方案二:
替換成比較正常的固定大小
.replace( '<img' , '<img style="max-width: 320px;" width="320px"' )
自己的代碼展示: