小程序 支持html富文本吗
2018-06-26 本文已影响222人
追逐繁星的阿忠
业务场景:
项目是一个商品类型,现在商品介绍管理端是用的富文本做的内容发布和编辑;
小程序对接的时候,能否支持这样的场景,比如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