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

本文转自：/icindy/wxParse

基本使用方法

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 = '<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);

模版引用

// 引入模板<import src="你的路径/wxParse/wxParse.wxml"/>//这里data中article为bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

高级用法

配置小表情emojis

/*** WxParse.emojisInit(reg,baseSrc,emojis)* 1.reg，如格式为[00]=>赋值 reg='[]'* 2.baseSrc,为存储emojis的图片文件夹* 3.emojis,定义表情键值对*/WxParse.emojisInit('[]', "/wxParse/emojis/", {"00": "00.gif","01": "01.gif","02": "02.gif","03": "03.gif","04": "04.gif","05": "05.gif","06": "06.gif","07": "07.gif","08": "08.gif","09": "09.gif","09": "09.gif","10": "10.gif","11": "11.gif","12": "12.gif","13": "13.gif","14": "14.gif","15": "15.gif","16": "16.gif","17": "17.gif","18": "18.gif","19": "19.gif",});

多数据格式参见wikiwxParse多数据循环使用方法

FAQ

参见wikiweParse常见问题FAQ

二次开发

基础数据格式

parsedata:{view:{},//样式存储nodes:{},//展示需要的存储节点images:[],//存放图片对象数组imageUrls:[],//存放图片url数组}

参见wikiwxParse二次开发文档

相关文章

wxDiscode－微信小程序特殊字符转义符转化工具类微信小程序组件wxParse中的模版template使用 既然不能循环那就使用笨办法微信小程序单图片的自适应计算