zhanziyang / Wxmlify
一个轻量快速的插件,帮助你在微信小程序中显示富文本编辑器生成的HTML。
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Wxmlify
Wuss Weapp
🐳wuss-weapp 一款高质量,组件齐全,高自定义的微信小程序UI组件库
Stars: ✭ 338 (+263.44%)
Mutual labels: wxml, wechat, weapp
Wxapp Boilerplate
使用 webpack, babel, scss 开发的微信/支付宝小程序项目脚手架
Stars: ✭ 367 (+294.62%)
Mutual labels: wechat, weapp
Xiaochengxu demos
小程序优秀项目源码汇总,每个项目都有图有源码,零基础学微信小程序,小程序表格,小程序视频,小程序视频弹幕,小程序仿天猫大转盘抽奖等源码,小程序云开发,小程序发邮件,小程序支付,微信支付,持续更新。。。
Stars: ✭ 855 (+819.35%)
Mutual labels: wechat, weapp
Weapp Qrcode
Wechat miniapp generate qrcode image
Stars: ✭ 339 (+264.52%)
Mutual labels: wechat, weapp
Lemonjournal
A WeChat mini program demo based on Wafer2 framework - 微信小程序Demo:柠檬手帐 - 界面简洁的图片编辑应用,支持图片和文字的移动、旋转、缩放、保存编辑状态并生成预览图
Stars: ✭ 341 (+266.67%)
Mutual labels: wechat, weapp
Wechat Mini Program Wiki
Anyone can make a Wechat mini-program with the first and only English Wiki made to decrypt the Mini-program framework.
Stars: ✭ 388 (+317.2%)
Mutual labels: wxml, wechat
Wechat Weapp Mapdemo
微信小程序开发mapdemo,地图导航、marker标注
Stars: ✭ 491 (+427.96%)
Mutual labels: wechat, weapp
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-17.2%)
Mutual labels: wxml, wechat
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].