如何处理后端返回的富文本内容展示到小程序查看文章内容详情
发布于 4 年前 作者 xyang 16005 次浏览 来自 问答

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

示图=》

结果

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

5 回复

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

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

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

<style>
    [@import](/user/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>

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

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

回到顶部