wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析

网友投稿 876 2022-10-14

wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析

wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析

抱歉各位,本项目已经停止维护,为了不给您使用造成问题,请仅做参考使用,感谢各位支持

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

支持Html及markdown转wxml可视化

版本号:0.3

来源: [微信小程序开发论坛-weappdev](https://weappdev.com)

作用: 将Html/Markdown转换为微信小程序的可视化方案

特性

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

相关截图

感谢

@stonewen| @Daissmentii | @wuyanwen | @vcxiaohan |

基本使用方法

Copy文件夹wxParse

- wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)

引入必要文件

//在使用的View中引入WxParse模块var WxParse = require('../../wxParse/wxParse.js');

//在使用的Wxss中引入WxParse.css,可以在app.wxss@import "/wxParse/wxParse.wxss";

数据绑定

var article = '

我是HTML代码
';/*** 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);

模版引用

// 引入模板//这里data中article为bindName