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

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（直接替换为’ '这种空格的话只能显示一个）；另一个问题就是图片解析出来基本是原图大小，很容易满屏显示，很蛋疼，希望官方能解决一下？

回到顶部