业务场景:
项目是一个商品类型,现在商品介绍管理端是用的富文本做的内容发布和编辑;小程序对接的时候,能否支持这样的场景,比如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
当然有一个小问题(重点说明):图片无法自适应,需要自己解决这个问题:
提供两种方案解决:
方案一:
替换成比较通用的百分比模式
参考链接地址:https://blog.csdn.net/qq_31843517/article/details/80446894
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"' )
自己的代码展示:
1111111.png
文章转载于:https://www.jianshu.com/p/9b9b97b17393
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~