找回密码
 立即注册

扫一扫,访问微社区

查看: 9182|回复: 9

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

  [复制链接]

910

主题

1190

回帖

3万

金钱

管理员

论坛管理员

积分
0

突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2016-11-16 11:31:52 | 显示全部楼层 |阅读模式
效果GIF(加载较慢,请稍候)
代码库
github地址: https://github.com/icindy/wxParse
现状
版本号: version0.1
希望大家能够发现问题,提交问题,也可以foke提交您的修改代码
  • 支持大部分标签解析
  • 支持code代码
  • 支持video渲染
  • 支持自定义样式
  • 支持无限嵌套标签
组成
  1. -wxParse
  2. --wxParse.js(工具类入口输出口)
  3. --wxParse.wxml(模版文件)
  4. --wxParse.wxss(定义css)
复制代码
使用方法
  • 复制整个文件夹wxParse/到根目录
  • 把样式文件wxParse.wxss引入到您调用本插件的作用域喜爱
  1. @import "你的路径/wxParse/wxParse.wxss";
复制代码
  • 在需要使用的模版的x.wxml中引入模版文件wxParse.wxml
  1. <import src="你的路径/wxParse/wxParse.wxml"/>
  2. <view class="wxParse">
  3. <template is="wxParse" data="{{wxParseData}}"/>
  4. </view>
复制代码
  • 在对应的js中引入wxParse.js文件
  1. var WxParse = require('你的路径/wxParse/wxParse.js');
复制代码
  • 设置对应data值数组wxParseData(必须使用wxParseData),并设置

  1. // html解析

  2. onLoad: function () {
  3.     console.log('onLoad')
  4.     var html = '<div class="content mousetrap"><h1 id="wxparse">wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析</h1> <blockquote><p>微信小程序富文本解析自定义组件,支持HTML及markdown解析</p></blockquote> <h2 id="-">功能列表</h2> <ul> <li>动态加载代码</li> <li>html转json</li> <li>markdown转html转json</li> <li>富文本markdown解析</li> <li>自定义层级解析</li> <li>自定义样式表</li> </ul> <h2 id="-">文件作用</h2> <pre class="hljs scala"><code class="scala"><span class="hljs-comment">// wxParse.wxml</span> <span class="hljs-comment">//用于解析使用的模版</span> .css{ text-align:center; } <div>test div</div></code></pre> <h2 id="-">开发信息</h2> <p><a href="http://weappdev.com" target="_blank">微信小程序开发论坛</a></p> <div class="image-package"><br><div class="image-caption">微信小程序logo</div></div> </div>';

  5.     var that = this
  6.     //更新数据
  7.     that.setData({
  8.       wxParseData:WxParse('html',html)
  9.     })
  10.   }
复制代码

  1. // markdown解析

  2. onLoad: function () {
  3.     console.log('onLoad')
  4.     var text = '# wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析 \n'
  5.     +' > 微信小程序富文本解析自定义组件,支持HTML及markdown解析 \n\n'
  6.     +'## 功能列表 \n * 动态加载代码  \n * html转json \n * markdown转html转json \n * 富文本markdown解析 \n * 自定义层级解析 \n * 自定义样式表 \n'
  7.     +'## 文件作用 \n'
  8.     +' ``` // wxParse.wxml //用于解析使用的模版 ``` \n'
  9.     +'## 开发信息 \n '
  10.     +' [微信小程序开发论坛](http://weappdev.com) \n'
  11.     +' ![微信小程序logo](http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png)';

  12.     var that = this
  13.     //更新数据
  14.     that.setData({
  15.       wxParseData:WxParse('md',text)
  16.     })
  17.   }
复制代码
功能列表
  • 动态加载代码
  • html转json
  • markdown转html转json
  • 富文本markdown解析
  • 自定义层级解析
  • 自定义样式表
示例
  • cnode版wxParse使用 >github地址:https://github.com/icindy/wechat-webapp-cnode
流程图


游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

29

回帖

366

金钱

新人求带

积分
0
发表于 2017-4-11 11:30:54 | 显示全部楼层
正需要,支持楼主大人了!

0

主题

29

回帖

366

金钱

新人求带

积分
0
发表于 2017-4-11 11:33:01 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

9

回帖

36

金钱

新人求带

积分
0
发表于 2017-8-11 00:41:57 | 显示全部楼层
谢谢楼主分享、、、

0

主题

245

回帖

63

金钱

新人求带

积分
0
发表于 2017-8-12 13:12:33 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

8

回帖

87

金钱

新人求带

积分
0
发表于 2017-9-12 08:25:41 | 显示全部楼层
厉害了,不知道能用吗

0

主题

1

回帖

15

金钱

新人求带

积分
0
发表于 2017-10-24 17:01:32 | 显示全部楼层
谢楼主分享

0

主题

1

回帖

111

金钱

新人求带

积分
0
发表于 2018-2-1 11:43:43 | 显示全部楼层
我只是路过打酱油的

0

主题

5

回帖

42

金钱

新人求带

积分
0
发表于 2018-4-9 11:30:36 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

222

回帖

509

金钱

新人求带

积分
0
发表于 2020-4-9 14:17:06 | 显示全部楼层
我有流量,寻求个人游戏开发者合作,有意者联系微信号jim20180688
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-29 18:41 , Processed in 0.151380 second(s), 37 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表