最近有个产品需求：在PC端里用富文本编辑器里编写自定义内容，然后保存后需要在小程序端展示，了解过的朋友就知道了，富文本编辑器输出的内容都是基于HTML标签的，比如：div、p、br这些常用的，而小程序中使用的是类似于HTML的标签，但并不能通用！坑就在这里，两者是不通用的，所以就会遇到解析的问题。
本篇就是基于这个问题，从而实现两者的互相兼容，其实呢网上早已有解决方案，但有些不太全面，所以呢，我会把实现的具体步骤写出来，仅供参考！
假设我要实现这种效果，如下图：
上图中的内容都是富文本编辑器中生成后保存到数据库的，所以代码就会类似于下面这种↓↓↓↓↓↓：
1 |
<p>某某某先生:</p ><p><br></p ><p>谨代表XXX公司，真诚欢迎您加入 研发部 任 技术总监。</p ><p><br></p ><p>请您于 2019年 3 月 1日（星期五）上午9：00，携带以下物品，到 某某某地点处办理报到手续。</p ><p><br></p ><p>1、居民身份证原件及复印件4张；</p ><p><br></p ><p>2、毕业证书原件及复印件1张(如学生，提供有效期内学生证原件及复印件1张)；学历证书原件及复印件1张（如应届毕业生，需额外提供 就业报到证）；</p ><p><br></p ><p>3、相关证书原件及复印件1张（如需要）；</p ><p><br></p ><p>4、二寸白底证件照片2张；</p ><p><br></p ><p>5、有工作经验的需提交： 离职证明 / 解除劳动合同证明 ；</p ><p><br></p ><p>6、公立市级医院出具的体检报告单</p ><p><br></p ><p>注：</p ><p><br></p ><p>1 ) 如接受我司offer，请邮件回复接受；如对offer有任何疑问，也请尽快回复邮件说明。</p ><p><br></p ><p>2 ) 如果您确认此录用offer，我司相关人员将对您入职资格（体检、验证等）进行审核。若入职资格的审核（体检、验证等）不符要求，此offer将自动失效。</p ><p><br></p ><p>3 ) 请按约定时间至我司报到，如超过约定时间半个工作日未至我司报到且无正当理由 ，视为您自动放弃我司就业机会，本offer自动失效。</p ><p><br></p ><p>附我司作息安排：周一至周五，上午9:00~12:00 下午13:00~18:00 </p ><p><br></p ><p>以上事宜请知悉，若有疑问，请及时与我联系， 谢谢。</p ><p><br></p ><p> </p ><p><br></p > |
好了，下面开始言归正传，说说如何实现的吧。
1. 先下载主要代码，传送门，下载好之后，把wxParse这个文件夹复制到自己小程序的根项目下。
1 2 3 4 5 6 7 8 9 |
- wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选) |
目录结构如下图：
2. 在wxml中加入如下代码（PS: 路径请根据自身项目来调整）：
1 |
<import src="../../wxParse/wxParse.wxml" /> |
1 2 3 |
<view class="offer-detail">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view> |
3. 在使用的View中引入WxParse模块，js里加入如下代码（PS: 路径请根据自身项目来调整）：
1 |
var WxParse = require('../../wxParse/wxParse.js'); |
然后在onLoad中加入以下测试代码：
1 2 3 4 5 6 7 8 |
onLoad: function(options) {
// test
var that = this;
var htmlTpl = '<p>某某某先生:</p ><p><br></p ><p>谨代表XXX公司，真诚欢迎您加入 研发部 任 技术总监。</p ><p><br></p ><p>请您于 2019年 3 月 1日（星期五）上午9：00，携带以下物品，到 某某某地点处办理报到手续。</p ><p><br></p ><p>1、居民身份证原件及复印件4张；</p ><p><br></p ><p>2、毕业证书原件及复印件1张(如学生，提供有效期内学生证原件及复印件1张)；学历证书原件及复印件1张（如应届毕业生，需额外提供 就业报到证）；</p ><p><br></p ><p>3、相关证书原件及复印件1张（如需要）；</p ><p><br></p ><p>4、二寸白底证件照片2张；</p ><p><br></p ><p>5、有工作经验的需提交： 离职证明 / 解除劳动合同证明 ；</p ><p><br></p ><p>6、公立市级医院出具的体检报告单</p ><p><br></p ><p>注：</p ><p><br></p ><p>1 ) 如接受我司offer，请邮件回复接受；如对offer有任何疑问，也请尽快回复邮件说明。</p ><p><br></p ><p>2 ) 如果您确认此录用offer，我司相关人员将对您入职资格（体检、验证等）进行审核。若入职资格的审核（体检、验证等）不符要求，此offer将自动失效。</p ><p><br></p ><p>3 ) 请按约定时间至我司报到，如超过约定时间半个工作日未至我司报到且无正当理由 ，视为您自动放弃我司就业机会，本offer自动失效。</p ><p><br></p ><p>附我司作息安排：周一至周五，上午9:00~12:00 下午13:00~18:00 </p ><p><br></p ><p>以上事宜请知悉，若有疑问，请及时与我联系， 谢谢。</p ><p><br></p ><p> </p ><p><br></p >';
WxParse.wxParse('article', 'html', htmlTpl, that, 5);
} |
这段内容一般是异步请求中获取的，这里只是演示而已~
友情提示：
wxParse.wxss links不是必须的，也可以自行写样式，如需使用，可自行在app.wxss中import。
ok，以上即实现了上图的效果，有兴趣的话可以看看wxParse FVDI J2534, GM Tech2, iProg的源代码，也支持图片或者表情等。很强大，在此感谢开发该开源项目的作者。
写在最后
好了，本文到此结束！
如果还有什么疑问或者建议，欢迎多多交流，如果觉得文章对你有帮助，打个赏，让我有更大的动力去创作，谢谢！