html直接发布到小程序,自动转换标签-wxParse使用教程

1、缘起

这几天在做图森的小程序,在做到从网站数据库调取数据的时候,发现小程序不能直接解析html标签,这导致图片不能正常显示,当时第一反应是在服务器端通过正则表达式替换掉对应的标签,发现到了小程序上,并不能正常解析,而是原样输出了。

2、插件

https://github.com/icindy/wxParse

去上面网址下载 wxParse-微信小程序富文本解析组件 

3、使用

1)解压压缩包

将wxParse文件夹复制到项目中,这里我复制到了根目录,方便演示

wxParse.png

2)引入

本例是图森案例的内页用到wxParse插件,因此,图森案例的详情页需要引入对应的文件

A. detail.js引入wxParse.js,

var WxParse = require('../../../wxParse/wxParse.js');

wxParse的使用方法.png

注意:这里只能用相对路径,不能用绝对路径

上图,第一个标记是引入,第二个标记是赋值。res.data.content就是从数据库拿到的html,赋值给article_content,这个字段自己命名,wxml里面会用到。

B. detail.wxml取值,如下图所示