收藏
回答

如何处理后端返回的富文本内容展示到小程序查看文章内容详情

list.wpy文件通过wx.request请求列表到页面,该列表页点击进入查看列表内容详情HelpList.wpy。


示图=》


结果


由于微信小程序自定义了标签,但是富文本返回了H5标签在内,针对该问题,小程序中应该如何处理?

最后一次编辑于  2018-02-26  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

5 个回答

  • Initial D
    Initial D
    2018-03-02

    目前我这边找到的办法有两个,一个是引入wxParse插件,这个插件能将标签转换成小程序的,另一个办法是用小程序自带组件 富文本 rich-text;这两种办法都是能将html标签解析出来的,但是目前遇到了两个问题,一个是空格 这种没法解析,只能靠正则匹配之后替换为小程序的空格\xa0(直接替换为' '这种空格的话只能显示一个);另一个问题就是图片解析出来基本是原图大小,很容易满屏显示,很蛋疼,希望官方能解决一下?

    2018-03-02
    赞同
    回复
  • Initial D
    Initial D
    2018-03-02

    更新一下,对比了下wxParse和rich-text组件,我发现如果富文本里面有特别大的图片,rich-text这个组件显示图片的时候是直接显示原大小的,直接超出屏幕了,而wxParse能显示出来整张图片,并且还可以通过外包view标签来设置整体宽度等等;不过也可能rich-text跟我直接用string类型有关系吧

    2018-03-02
    赞同
    回复
  • 同步
    同步
    2018-03-02

    我github选的 参考文档是: https://github.com/ifanrx/wxParser

    那个选的rich-text 还要自己解析 data.content富文本片段的吧?这样子就真的麻烦起来了。




    <style>
        @import '../wxParser/index.wxss';
         .wrap{padding: 0 10px;}
    </style>
    <template>
        <view class="page">
            <view class="page__hd">
                <view class="page__title">
                    wxParser
                </view>
                <view class="page__desc">
                    小程序富文本示例
                </view>
            </view>
            <view class="page__bd wrap">
                <view>
                    参考文档: https://github.com/ifanrx/wxParser
                </view>
                <import src="../wxParser/index.wxml" />
                <view class="wxParser">
                    <template is="wxParser" data="{{wxParserData:richText.nodes}}" />
                </view>
                <rich-text nodes="{{nodes}}" bindtap="tap">
                </rich-text>
            </view>
        </view>
    </template>
    <script>
        import wepy from 'wepy';
        const wxParser = require('../wxParser/index');
        export default class WxParserDemo extends wepy.page {
            data = {
                nodes: [{
                    name: 'div',
                    attrs: {
                        class: 'div_class',
                        style: 'line-height: 60px; color: red;'
                    },
                    children: [{
                        type: 'text',
                        text: 'Hello&nbsp;World!'
                    }]
                }]
     
            }
     
            methods = {
     
                tap() {
                    console.log('tap')
                }
            }
     
            onLoad() {
                var self = this;
     
                var Html = "<div><a href='https://mp.weixin.qq.com'>微信小程序</a><strong>富文本</strong>示例</div>";
                // var Html="<div>微信小程序<strong>富文本</strong>示例</div>";
     
                wxParser.parse({
                    bind: 'richText',
                    html: Html,
                    target: this,
                    enablePreviewImage: false,
                    // 禁用图片预览功能
                    tapLink: function(url) {
     
                        // 点击超链接时的回调函数
                        // url 就是 HTML 富文本中 a 标签的 href 属性值
                        // 这里可以自定义点击事件逻辑,比如页面跳转
                        console.log("url=>", url);
                        wx.navigateTo({
                            url: url
                        });
                    }
                });
     
            }
     
        }
    </script>


    2018-03-02
    赞同
    回复
  • Initial D
    Initial D
    2018-03-02

    rich-text不需要按文档这样写,他这样写是数组形式,我用的是string形式,就是把内容直接赋值给nodes就行了,但是rich-text经过我测试比较坑,对图片的解析太不友好,完全显示的原图,所以就用wxParse就好了

    2018-03-02
    赞同
    回复
  • 同步
    同步
    2018-03-02

    好的

    2018-03-02
    赞同
    回复