一个轻量快速的插件，帮助你在微信小程序中显

Wxmlify

一个轻量快速的插件，帮助你在微信小程序中显示富文本编辑器生成的HTML。

注：新版微信小程序已提供<rich-text>富文本组件，但其兼容性暂时没有保证，你可能还是需要第三方解析工具。

优点 体积小轻量 - 只需2个文件，总共14kb 不添加多余样式，利于自定义文档样式 可选择性保留原文档样式，如指定保留原文档的font-size, font-weight等 解析速度较快 用法简便 支持图片、视频、table 缺点 偏向于对富文本编辑器生成的HTML进行解析，并不适用于所有场景。因为富文本编辑器生成的HTML符合一定的规范。 用法 (demo) 把 wxmlify 文件夹复制到你的 weapp 项目下。 在你需要显示富文本的页面 js 中引入，并 new 一个实例，比如：

// pages/index/index.js var Wxmlify = require('../../wxmlify/wxmlify.js') Page({ onLoad() { // 以任何方式获得要解析的Html代码 var html = getHTMLStringSomehow() // new 一个 wxmlify 实例就好了 var wxmlify = new Wxmlify(html, this, {}) } }) 在对应的页面 wxml 中引入模板，比如：

<!-- pages/index/index.wxml --> <import src="../../wxmlify/wxmlify.wxml" /> <template is="wxmlify" data="{{nodes: wxmlified}}"></template> Doc 查阅 构造函数

new Wxmlify(html, page [, options]) 参数： html: 字符串 - 要解析的html代码字符串 page: 小程序页面实例 - 也就是所有页面方法内this的指向 options: 选项 返回值：一个wxmlify实例，用于调用方法 选项 dataKey 解析后数据在页面data中的key 类型：string 默认：'wxmlified' 例如：

new Wxmlify(html, this, { dataKey: 'myRichText' })

相应地在wxml中：

<template is="wxmlify" data="{{nodes: myRichText}}"></template> preserveStyles 要保留的css样式名称（驼峰格式） 类型： 字符串 'all'， 表示保留所有样式 否定值，如false, 0, null，表示移除所有自带样式 数组，指定保留某些样式，如['fontSize', 'fontWeight', 'background'] 默认：'all' (默认保留所有样式) disableImagePreivew 禁用图片点击预览 类型：boolean 默认：false onImageTap 图片点击处理函数 类型：function 默认：function() {} 方法 wxmlify.getFullNodes() 返回一个Javascript数组，HTML 被解析后的 json数据结构 wxmlify.getHTML() 返回传入的HTML wxmlify.getImages() 返回数组，包含所有图片的url 自定义样式

.wxmlified-element { /* 修改段落块的样式 */ } .wxmlified-element.h1 { /* 修改原<h1>标签块的样式，其它块级标签同理 */ } .wxmlified-image { /* 修改图片的样式 */ } .wxmlified-text { /* 修改文字节点的样式 */ } .wxmlified-table.table { /* table 的样式 */ border: 1rpx solid #acacac; } .wxmlified-table.tr { /* tr 的样式 */ border-bottom: 1rpx solid #acacac; } .wxmlified-table.tr:last-child { border-bottom:0; } .wxmlified-table.th, .wxmlified-table.td { /* th,td 的样式 */ border-right: 1rpx solid #acacac; line-height: 2; } .wxmlified-table.th:last-child, .wxmlified-table.td:last-child { border-right: none; } .wxmlified-table.th { font-weight: bold; }

This little tool is made possible thanks to an open source HTML-to-JSON parser himalaya made by Chris Andrejewski.