Github url

wxParse

by icindy

icindy /wxParse

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

7.4K Stars 1.8K Forks Last release: Not found MIT License 131 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

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

支持Html及markdown转wxml可视化

版本号:0.3

来源: 微信小程序开发论坛-weappdev

作用: 将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 = '
      我是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);
    1. 模版引用
      // 引入模板<import src="%E4%BD%A0%E7%9A%84%E8%B7%AF%E5%BE%84/wxParse/wxParse.wxml"></import>//这里data中article为bindName<template is="wxParse" data="{{wxParseData:article.nodes}}"></template>

高级用法

  • 配置小表情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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.