小程序下wxParse 渲染html代码

在内容类型的小程序中，通常使用富文本编辑器添加内容，如summernote等。

内容存储在数据库中，类似余下面这与的html+css的混合代码

<p><img src="https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/trm5VMeFp9ltUhl3X1DRzot0oeEflIibYFM79nq0DoXW9ibia8VSJjHL6RAjianos2mJmOoSJQKJMJUQ7c60c1LMbg/640?wx_fmt=jpeg" style="width: 50%;"></p><p>近日，据以色列财经媒体 Globes 报道，由巴塞罗那球星梅西代言的 Finney 区块链手机（以下简称 Finney）遭遇了前所未有的经济危机，由于这款区块链手机销量远远未达预期标准，其制造商以色列通讯技术公司 Sirin Labs 不得已开始了大规模裁员，裁员规模高达25%。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>号称全球第一款区块链手机</p><p><br></p><p><br></p><p><br></p><p>“区块链手机”的概念是由 Sirin Labs 于2017年9月首次提出。</p><p><br></p>

在小程序中，使用view 等容器渲染这些代码时，会原样展示，原因在于小程序并不支持这些html标签。

这就需要将 html 标签内容转换为 wxml 标签内容，如将html 中的 img 转换成 小程序中的 image。

wxPare 就是干这个的！

使用步骤

第一步：下载

wxParse 下载

下载完成，解压压缩文件，目录如下

将 wxParse 文件夹拷贝到小程序中，可以放到根目录，也可以放到其他目录，我放到了 utils 目录下

第二步：引入文件

要想使用此插件，需要分别在小程序页面的视图、样式和逻辑文件中引入相关文件

在 xx.wxss 中引入样式文件

在 xx.js 中文件中引入js文件

在 xx.ml 中引入如下视图文件

第三步：编写代码替换

下面就是将html 代码替换成 wxml 代码

在解释这行代码 之前，首先看一下我 article 变量的结构

其中，content 键中存储了 html 结构代码，我们的目的就是将其替换成 wxml

下面再解释下面这行代码中参数的意义

参数1：替换之后的变量名称，这个变量我们会在视图中使用，变量名称自定义

参数2：表示源代码为html格式

参数3：通过上面article 变量结构截图，我们知道，article.content 就是要替换的存储着 html 代码的字段名称

参数4：当前页面的上下文，如果没有在回调函数中，可以使用 this

参数5：imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

最后一步：修改视图代码

最后将如下代码放到原本显示 article.content  变量的地方

注意：标注的变量名称“content”就是上面方法中的第一个参数的名称