⼩程序解析富⽂本过程详解
前⾔
最近公司在开发OTA⼩程序，⼀些页⾯的详情内容是HTML富⽂本格式的的，但是⼩程序不能直接解析HTML，需要将内容中的HTML标签转换成⼩程序所⽀持的标签。
开始的时候想过⾃⼰写⽅法来替换标签，后来到了⼀个很好⽤的插件：WxParse。
使⽤WxParse解析富⽂本数据
1．将下载下来的插件⽂件夹复制到我们的项⽬根⽬录下（其中emojis⽂件可根据⾃⼰所需决定要或者不要，其他的⽂件必须要）
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(表情包⽂件，可选)
wxParse
2.在需要使⽤该插件的View（.js⽂件）中引⼊WxParse模块
Var WxParse= require('../../../wxParse/wxParse.js');
3.在需要是⽤的wxss中引⼊WxParse.wxss，也可以在app.wxss中引⼊
@import"../../../wxParse/wxParse.wxss";
4.进⾏数据绑定
Var article= '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data,target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
写文章的小程序* 3.data为传⼊的具体数据(必填)
* 4.target为Page对象,⼀般为this(必填)
** 5.imagePadding为当图⽚⾃适应是左右的单⼀padding(默认为0，可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article,that, 5);
5.在内容页（.wxml⽂件）中引⽤该模版⽂件，其中data中article为bindName
导⼊⽂件
<import src="../../../wxParse/wxParse.wxml" />
引⽤模版
<template is="wxParse" data="{{des}}" />
完成后页⾯就能够正常渲染HTML富⽂本数据了
⽰例
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。