小程序 支持html富文本吗

作者: 追逐繁星的阿忠 | 来源:发表于2018-06-26 09:15 被阅读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

相关文章

网友评论

    本文标题:小程序 支持html富文本吗

    本文链接:https://www.haomeiwen.com/subject/dmhpyftx.html