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