用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

WxParse解决html标签解析烦恼

天下雪 2017-4-17 00:05

大家在开发的过程中,一定会遇到需要解析html标签的地方举个栗子:后台管理系统用户会有编辑富文本的需求,编辑好后的内容需要在前台解析展示。 但后台使用的html标签,和微信的自定义标签无法通用,这个时候我们就 ...

大家在开发的过程中,一定会遇到需要解析html标签的地方举个栗子:后台管理系统用户会有编辑富文本的需求,编辑好后的内容需要在前台解析展示。
但后台使用的html标签,和微信的自定义标签无法通用,这个时候我们就需要用的工具来解析这些html字符串。
方法一:微信小程序里我们最常用的就是your text,所以最粗暴的方法是将所有的包含文本的节点利用正则替换成替换成
方法二:使用WxParse插件
WxParse-->GitHub地址:https://github.com/icindy/wxParse,上面的使用方法非常清楚
接下来做些简单的使用示例,有不对的地方还请指正
首先你需要在你的project中引入这些必要的文件
如图示:
1.png
你可以把这些文件放在utils文件内,或者像我这样放在一个单独的文件夹内
okay,接下来我们看看后台返回的html字符串
1.png
嗯,就是普通的html,I like it.
准备工作完毕后,我们可以开始使用这个插件了
在你需要使用解析html的page页内的js文件中,引入wxParse.js
2.png
在data中添加一个key用于存储后天返回的html字符串,当然了,你也可以不添加这个key,我只是为了方便调试输出。
3.png
好哒,js这部分的处理我们暂时放一下,现在我们来引入模板文件
在当前页的wxml文件中引入WxParse.wxml,这一步不要搞错了你的路径哦。
4.png
使用template组件
5.png
处理完毕后,我们再回到js部分,简单的处理下
使用WxParse中的方法
6.png
okay,至此你就可以解析那些烦人的html字符串啦
我的解析后如图示:
7.png

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: jwq782108446

相关阅读

  • 天下雪 2017-4-16 18:50
    感谢同学的分享,我顺便扫了一下其中的二维码,然后把这个文章收录进入了富文本解析的跳坑指南里了
  • jwq782108446 2017-4-16 18:57
    天下雪 发表于 2017-4-16 18:50
    感谢同学的分享,我顺便扫了一下其中的二维码,然后把这个文章收录进入了富文本解析的跳坑指南里了 ...

    周末还坚守一线呀