0
点赞
收藏
分享

微信扫一扫

小程序 支持html富文本吗

RIOChing 2022-07-14 阅读 97

业务场景:

项目是一个商品类型,现在商品介绍管理端是用的富文本做的内容发布和编辑;
小程序对接的时候,能否支持这样的场景,比如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"' ) 

自己的代码展示:


小程序 支持html富文本吗_html

1111111.png

举报

相关推荐

0 条评论