微信小程序整合wxParse以显示富文本内容

2021-04-16 17:34:51  1  版权声明:本文为站长原创文章,转载请写明出处


一、背景


    长久以来,我都有移动端展示的需求。曾经尝试过:

        ① js判定移动端和PC端,然后使用两套代码

        ② 响应式布局

    但是,无论是从工作量还是,改造难度对于我这个新手村玩家都是不太友好的。

    于是乎就在近期,我终于重新拾起了微信公众号和微信小程序,以期能解决我在移动端上的一些业务需求。


二、富文本的数据展示

    

    2.1、目前存在的情况

        ① 我在PC端已经写好了这部分东西

        ② 微信公众号需加入适量的改造更好的搭配移动端

        ③ 微信小程序部分,我希望能够直接使用PC端的这部分数据


    2.2、处理方案

        ① 微信公众号部分,做几个比较好的模板,然后把我的内容复制进去同时加以完善

        ② 小程序端还是正常的https请求,然后把PC的富文本内容渲染到微信小程序中


    2.3、遇到问题

        2.3.1、如何在小程序端展示富文本内容?

            我们知道在PC端我们可以使用v-html来进把富文本产生的内容直接展示到网页中。

        那么小程序的语法中这个操作应该怎么实现呢?


三、关于rich-text


    3.1、官网说明

        我们在查阅微信小程序文档资料时可以发现有这样一个组件:rich-text

    它的相关说明时这样的:

        
        

    3.2、使用方法


<rich-text nodes="{{articleInfo.content}}"></rich-text>

    

    3.3、为什么我不使用rich-text

        综合使用下来,我发现有以下我不太能接受的几点:

        ① 比较呆板的展示内容,一些细化的Html无法展示

        ② 移除了所有节点的事件(eg:之前定义的图片事件不能使用)

        ③ 不能友好的适配屏幕,大屏显得空洞,小屏显示不完整


四、wxParse登场


    4.1、关于wxParse

        wxParse是目前很多小程序开发中处理显示富文本Html的一个解决方案,使用起来比较简单,门槛低且能有效解决问题。


    下面就介绍一下其完整的整合步骤:

    4.2、下载wxParse

        我们可以打开:https://github.com/icindy/wxParse 找到wxParse的项目源码,直接下载压缩包。


    4.3、提取有效文件

        解压源代码后,在wxParse文件夹下,可以看到有如下内容:

    
        


    4.4、引入到小程序项目中

        tips:这个根据个人实际情况而定,我这边是当做一个util来处理的。

        

    4.5、在功能页面配置并使用


        ① 在app.wxss中引入wxParse样式


                

    

        ② 在功能页的js中引入wxParse.js并绑定数据


        

    if (res.data.status == 200) {					
// 保存文章数据
that.setData({
...
});
// 渲染html
WxParse.wxParse('article', 'html', res.data.data.content, that,5);
} else {
Toast.fail(res.data.message);
}


        ③ 在功能页面引入wxParse页面并放置渲染组件

            

        



  <!-- 正文区域 -->
<view class="xa-article-content">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>


五、效果展示


    不仅能适配屏幕,而且对一些图表的展示也十分友好,图片也是加上点击放大了的...


    

    

    

    


六、后记

    另外公众号和小程序正在逐步完善中,欢迎提前关注入场!


    

    



最新评论:

不错
2021-04-16 22:22:19
1楼