天天看點

小程式 支援html富文本嗎

業務場景:

項目是一個商品類型,現在商品介紹管理端是用的富文本做的内容釋出和編輯;
小程式對接的時候,能否支援這樣的場景,比如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"' )       

自己的代碼展示: