Skip to content
wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析
JavaScript
Branch: master
Clone or download

Latest commit

1
Latest commit 9d5df48 Mar 19, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
image alpha 0.1 Oct 23, 2016
pages 修复li标签丧失内连 Mar 10, 2017
screenshoot 增加流程图 Dec 6, 2016
utils 休整代码 Oct 26, 2016
wxParse Fix a typo in wxParse/html2json.js Oct 19, 2017
.gitignore 增加str = str.replace(/•/g, '•'); Jul 18, 2017
LICENSE Initial commit Oct 23, 2016
README.md Update README.md Mar 19, 2020
app.js alpha 0.1 Oct 23, 2016
app.json 添加实验室demo Dec 6, 2016
app.wxss 修改及增加标签 Nov 10, 2016
config.js 休整代码 Oct 26, 2016
package.json add package json Feb 6, 2017

README.md

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

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 |

基本使用方法

    1. Copy文件夹wxParse
- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)
    1. 引入必要文件
//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";
    1. 数据绑定
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);
    1. 模版引用
// 引入模板
<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",
    });
  • 多数据格式

FAQ

二次开发

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

相关文章

捐献

来源

微信小程序开发论坛 垂直微信小程序开发交流社区

可在网站扫描二维码进入我们的微信小程序群,也可以微信搜索"weappmsg"进入"小码消息"公众号 小码消息-weappmsg 其他方式:合作qq群511389428

You can’t perform that action at this time.