小程序解析富文本的3种方法优劣,wxParse、rich-text、web-view_小程序 富文本 解析-程序员宅基地

技术标签: 微信小程序  

我们做普通web开发时,
后台可以使用很多的富文本编辑器,
比如百度ueditor编辑器,ckeditor富文本编辑器等。

但是微信小程序是在自己的引擎里解析,
所以很多html/html5的标签无法在小程序里正常显示,
 

一、 使用 wxParse 解析富文本

这种方式可以解析 html/markdown 两种脚本,
功能很强大,

wxParse解析html5富文本缺点

在解析富文本过程中,
多次调用小程序的setData()方法,
对性能有一定影响。
wxparse解æå¯ææ¬wxml代ç 

 

二、 使用 rich-text 解析富文本

rich-text富文本组件是小程序1.4.0版本后推出来的,
可以通过js脚本把html解析成一定格式的nodes,
然后在 rich-text 中显示。

<!– rich-text.wxml –>
<rich-text nodes=”{ {nodes}}” bindtap=”tap”></rich-text>

rich-text富文件组件缺点

只能解析html内容
需要做兼容处理

三、 使用 web-view 解析富文本

web-view 是小程序1.6.4版本推出来的新组件,
功能很强大,
可以直接显示网页内容,
而且可以做 a 链接跳转。

web-view 解析富文本缺点

其实两个很多微信都低于1.6.4版本,
不能使用,
需要用前面介绍的两种方法做兼容处理。

现在为止,
上面3种方法可以在微信小程序中解析html富文本,
你可以根据自己的情况选择适合的方法。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/z591102/article/details/105111919

智能推荐

手动触发 vue-print-nb 打印事件_v-print="printhospital"怎么使用点击事件触发里面的printhospital-程序员宅基地

文章浏览阅读655次,点赞2次,收藏2次。给按钮绑定 ref ,然后使用 v-show 隐藏打印的按钮,接着重新写一个按钮,绑定点击事件。在点击事件里面通过 ref 获取到 el对象,然后派发点击事件。_v-print="printhospital"怎么使用点击事件触发里面的printhospital

Android使用Rxjava异步递归读取内存卡中所有的视频文件_rxjava 递归-程序员宅基地

文章浏览阅读6.9k次,点赞3次,收藏3次。Rxjava是一个异步调用库,可以很灵活地使用操作符来满足各种的异步操作需求。 RXjava入门引导文章请看:http://blog.csdn.net/job_hesc/article/details/46242117_rxjava 递归

win10下装win7双系统安装教程-程序员宅基地

文章浏览阅读1.6k次,点赞2次,收藏9次。win10下装win7双系统安装教程来源:www.laomaotao.org 时间:2017-02-13 10:15  新买的电脑预装了win10系统,但win10对于有些游戏兼容性不是很好,总是会出现打不开或者是很卡顿的情况,导致游戏无法正常运行,就想在win10系统下再装个win7系统来玩游戏,那win10win7双系统怎么安装呢?下面给大家分享win10下装win7..._win10安装win7双系统教程 csdn

由URLDecoder.decode(reqBody, "utf-8");引发的bug-程序员宅基地

文章浏览阅读3k次。 最近在跟Asp.net端调接口,产品接口里面有个上传产品头像的功能。Asp.net端需要把上传的图片流重新用Apache Base64编码,服务端使用base64解码成byte输入流上传到Windows azure云端就可以了。在今天之前小檀的接口都是正确的,今天重新再走了一下流程发现图片上传到云端后打不开。小檀走了一下本地httpclient请求模拟了一下,无果。 作为一个..._request.body.decode('utf-8')

区间DP专题-程序员宅基地

文章浏览阅读787次,点赞23次,收藏23次。区间DP

程序员圈 内的 鄙视链_python为什么属于鄙视链底端-程序员宅基地

文章浏览阅读1.8k次。刚刚在网上看到了这样一个段子,关于程序员之间的“鄙视链”:就赶快和大家来分享分享~~~走起,一起来吃瓜故事分享在这呢~一天我路过一座桥,碰巧看见一个人想跳河自杀。我跑过去对他大喊道:“别跳,别死啊。”“为什么不让我跳?”他说。“因为还有很多东西值得我们活下去啊。”“有吗?比如说?”“呃……你做什么工作?”“程序员。”我说:“我也是!瞧,有共同点了吧。你是软件还是硬件?”“软件。”“我也是!PC 还是 Web?”“PC。”“我也是!Windows 还是 Linu.._python为什么属于鄙视链底端

随便推点

记录--纯CSS实现一个简单又不失优雅的步骤条-程序员宅基地

文章浏览阅读2.9k次,点赞5次,收藏10次。这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助步骤条是一种用于引导用户按照特定流程完成任务的导航条,在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子:ElementPlusAntDesignOpenTinyiView我们可以发现,步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单..._css 步骤条

Nginx Event模块-程序员宅基地

文章浏览阅读694次。对 Nginx 事件处理,定时器处理流程进行详述描述了 Nginx 如何解决 epoll accept 惊群问题参考 Nginx 版本 1.8.0

多智能体强化学习算法【三】【QMIX、MADDPG、MAPPO】_强化学习mappo算法神经网络-程序员宅基地

文章浏览阅读3.8k次,点赞19次,收藏30次。相关文章:1.QMIX算法简述QMIX是一个多智能体强化学习算法,具有如下特点: 1. 学习得到分布式策略。 2. 本质是一个值函数逼近算法。 3. 由于对一个联合动作-状态只有一个总奖励值,而不是每个智能体得到一个自己的奖励值,因此只能用于合作环境,而不能用于竞争对抗环境。 4. QMIX算法采用集中式学习,分布式执行应用的框架。通过集中式的信息学习,得到每个智能体的分布式策略。 5. 训练时借用全局状态信息来提高算法效果。是后文提到的VDN方法的改进。 6. 接上一条,QMIX设计一个神经网络来_强化学习mappo算法神经网络

CCF 201703-1 分蛋糕_ccf 201703-1 分蛋糕 c语言-程序员宅基地

文章浏览阅读241次。小明今天生日,他有n块蛋糕要分给朋友们吃,这n块蛋糕(编号为1到n)的重量分别为a1, a2, …, an。_ccf 201703-1 分蛋糕 c语言

TypeError: call() missing 1 required positional argument: ‘target‘_uwsgi typeerror: __call__() missing 1 required pos-程序员宅基地

文章浏览阅读3.5k次。TypeError: call() missing 1 required positional argument: ‘target’使用tf.save_model()时,出现Bug,将模型文件中的call()改为__call__()_uwsgi typeerror: __call__() missing 1 required positional argument: 'send

产生式系统实验头歌实验测试不通过解决(人工智能)_头歌产生式系统实验-程序员宅基地

文章浏览阅读2.1k次,点赞2次,收藏4次。解决产生式系统实验头哥测试不通过问题_头歌产生式系统实验