由于小程序提供的RichText处理html dom过于简单,可能会出现一些样式和原文不一致的问题。所以,有时候就要特殊处理,显示富文本。而wxParse就是一个不错的选择。下面就来说说如何使用wxParse:
1、下载wxParse,wxParse官方下载地址:https://github.com/icindy/wxParse
2、将wxParse文件夹放到项目中,网上很多地方都说要和pages同级,其实同不同级都行,只要引用时,地址不要弄错了就成,下面是模板网的一个项目目录截图:
从目录中可以看出,它共包含:wxParse.js、wxParse.wxml、wxParse.wxss、html2json.js、htmlparser.js、showdown.js、wxDiscode.js几个文件。
3、如果你需要用到wxParse.wxss里面的样式就在你的wxss文件中引用他,否则可以不引用:
1 | @import '../../wxParse/wxParse.js' |
注意:路径的正确、import导入的样式必须放在样式表中最前面,否则无效。
4、在需要解析html内容的页面对应的js文件里引入wxParse
1 | var WxParse = require( '../../wxParse/wxParse.js' ); |
或
1 | import WxParse from '../../wxParse/wxParse.js' ; |
5、 解析富文本
语法格式:
1 | WxParse.wxParse(bindName , type, data, target,imagePadding) |
1 | WxParse.wxParse( 'content' , 'html' , _html, this , 10); |
6、在需要解析html内容的页面对应的wxml文件里引入wxParse
1 | < import src = "../../wxParse/wxParse.wxml" /> |
7、在wxml文件中引用你解析出来的数据(这里的content就是上面提到的 bindName)
1 | < template is = "wxParse" data = "{{wxParseData:content.nodes}}" /> |