微信小程序富文本解析

在小程序开发过程中可能遇到这样的场景需要展示（商品、文章）详情，详情是一段html，里面图文混排。这时候就需要将html解析成小程序标签，更有甚者需要在小程序中操作html中的标签，比如做选中，批注，复制，粘贴等功能。
针对只做展示这种场景可以我们可以说曲线解决，把上传的商品详情做成图片，直接展示。当然这种方式固然好，但每次都得做成图片谁来做？
所以大多数情况下只能将html解析成效程序标签。在github(https://github.com/icindy/wxParse)上有一个很好用的原生组件wxparse可以解决富文本解析的问题。
使用方式：
一、在原生小程序中使用（官方demo）
1.目录

主要的源码就是wxParse文件夹，这个被封装成小程序模板的组件。使用方式可以按官方demo来。
在index.wxml文件中引入模板文件




在index.js中调用WxParse.wxParse(‘article’, ‘html’, article, that, 5)，并将解析后的数据通过setData当前页面的data属性上，以便模板中引用
var that = this;
var article = ‘

我是HTML代码

’;
WxParse.wxParse(‘article’, ‘html’, article, that, 5);
wxParse方法参数的意义如下：
/**

• WxParse.wxParse(bindName , type, data, target,imagePadding)
• 1.bindName绑定的数据名(必填)
• 2.type可以为html或者md(必填)
• 3.data为传入的具体数据(必填)
• 4.target为Page对象,一般为this(必填)
• 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
  */
  使用起来还是很方便的，但这里面也会遇到一些问题
  1.解析出来的html会将style标签，script标签中的内容也当文本解析
  2.没有做标签过滤，只能识别预定义的这这几种标签，对不识别的标签可能会解析错误
  3.setData时报invokeWebviewMethod 数据传输长度为 1233778 已经超过最大长度 1048576 的错误，导致错误
  解决办法：引入xss，进行标签过滤，属性过滤
  TODO:（未完待续…）
  1.使用xss过滤
  2.操作解析出来的小程序标签（dom）
  3.实现选中，批注，划重点（标记），插入用户信息。具体小过可以参考轻芒杂志小程序
  （今天先写到这里，如果看到还未更新完整就有人看到的话，有问题，请留言或者请联系本人）