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

zhichi_admin

效果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. 
   
2. // html解析
   
3. 
   
4. onLoad: function () {
   
5.     console.log('onLoad')
   
6.     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>';
   
7. 
   
8.     var that = this
   
9.     //更新数据
   
10.     that.setData({
    
11.       wxParseData:WxParse('html',html)
    
12.     })
    
13.   }
    

复制代码

1. 
   
2. // markdown解析
   
3. 
   
4. onLoad: function () {
   
5.     console.log('onLoad')
   
6.     var text = '# wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n'
   
7.     +' > 微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n\n'
   
8.     +'## 功能列表 \n * 动态加载代码  \n * html转json \n * markdown转html转json \n * 富文本markdown解析 \n * 自定义层级解析 \n * 自定义样式表 \n'
   
9.     +'## 文件作用 \n'
   
10.     +' ``` // wxParse.wxml //用于解析使用的模版 ``` \n'
    
11.     +'## 开发信息 \n '
    
12.     +' [微信小程序开发论坛](http://weappdev.com) \n'
    
13.     +' ';
    
14. 
    
15.     var that = this
    
16.     //更新数据
    
17.     that.setData({
    
18.       wxParseData:WxParse('md',text)
    
19.     })
    
20.   }
    

复制代码

功能列表

• 动态加载代码
• html转json
• markdown转html转json
• 富文本markdown解析
• 自定义层级解析
• 自定义样式表
  

示例

• cnode版wxParse使用 >github地址:https://github.com/icindy/wechat-webapp-cnode
  

流程图

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

＂童话℃

正需要，支持楼主大人了！

＂童话℃

啥也不说了，感谢楼主分享哇！

广西南宁利米网络有限公司

谢谢楼主分享、、、

Ywenli

感谢分享

佛山酷雷曼网络科技有限公司

厉害了，不知道能用吗

骑猪看日出

谢楼主分享

13549660700

我只是路过打酱油的

53064591

感谢分享

jerry369

我有流量，寻求个人游戏开发者合作，有意者联系微信号jim20180688