微信小程序富文本解析插件wxParse

微信小程序富文本解析插件wxParse

今年这个插件火了,一搜小程序富文本解析全部都是这个!然而当我打开GITHUB搜索这个插件的时候发现,最后一次更新是2017年11月,也就是去年11月到现在8个月没有更新过!

《微信小程序富文本解析插件wxParse》

在wxParse的GitHub里面看到了,开发这个插件的社区,已经是打不开的状态了,这个基本已经可以肯定的是,插件应该已经无人更新的状态中!

目前有很多人是需要这种插件的,除了一款还真没有听说过其他的类似插件,也可能是我自己孤陋寡闻了!

接下来进入正题,要用他当然是要先进行下载了!然后看一下它支持的特性

附上开源地址https://github.com/icindy/wxParse

特性

支持特性 实验功能 ToDo
–  HTML的大部分标签解析  小表情emjio  table标签
–  内联style  a标签跳转
– 标签Class  动态添加
–  图片自适应规则
–  图片多图片预览
–  模版层级可扩展性
–  多数据循环方式
–  内联style

拷贝wxParse文件夹到自己的小程序项目中。   wxParse/文件夹里面的文件是必须的,其他的文件都是demo文件

《微信小程序富文本解析插件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);

我的项目代码

Var article= postData.detail;
var that= this;
WxParse.wxParse('article', 'html', article,that, 5);

5.在内容页(.wxml文件)中引用该模版文件,其中data中article为bindName

导入文件
<import src="../../../wxParse/wxParse.wxml" />

引用模版
<template is="wxParse" data="{{wxParseData:article.nodes}}" />

完成后页面就能够正常渲染HTML富文本数据了,好开心,有木有!!!当然它还有更高级的表情解析,这个大家可以自行去看官方文档来进行开发~

朋友在使用的时候遇到一个问题,在ES6小程序环境下html代码不可能解析,转到ES5下面可以执行但是console.dir() 会报错!我暂时也没有解决方法!所以有看到 并且会的情况下 请留下解决方法,在此谢过!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据