V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2752 天前的主题，其中的信息可能已经有所发展或是发生改变。

鸣谢

感谢各位在 github 予以的支持和鼓励以及建立，经过一周， wxParse 渐渐完善，现在发布 version0.1 欢迎大家使用探讨。

原地址:http://weappdev.com/t/wxparse-version0-1-html-markdown/208

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

本项目由微信小程序开发论坛-WeAppDev http://weappdev.com/ 会员开发

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

版本号: version0.1

效果 GIF(加载较慢，请稍候)

代码库

github 地址: https://github.com/icindy/wxParse

现状

版本号: version0.1

希望大家能够发现问题，提交问题，也可以 foke 提交您的修改代码

支持大部分标签解析
支持 code 代码
支持 video 渲染
支持自定义样式
支持无限嵌套标签

组成

-wxParse
--wxParse.js(工具类入口输出口)
--wxParse.wxml(模版文件)
--wxParse.wxss(定义 css)

使用方法

复制整个文件夹wxParse/到根目录
把样式文件wxParse.wxss引入到您调用本插件的作用域喜爱

@import "你的路径 /wxParse/wxParse.wxss";

在需要使用的模版的x.wxml中引入模版文件wxParse.wxml

<import src="你的路径 /wxParse/wxParse.wxml"/>
<view class="wxParse">
<template is="wxParse" data="{{wxParseData}}"/>
</view>

在对应的 js 中引入wxParse.js文件

var WxParse = require('你的路径 /wxParse/wxParse.js');

设置对应 data 值数组wxParseData(必须使用 wxParseData),并设置


// html 解析

onLoad: function () {
    console.log('onLoad')
    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; } &lt;div&gt;test div&lt;/div&gt;</code></pre> <h2 id="-">开发信息</h2> <p><a href="http://weappdev.com" target="_blank">微信小程序开发论坛</a></p> <div class="image-package"><img src="http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png" data-original-src="http://weappdev.com/uploads/default/original/1X/9156b32bd04323f35d0957796f126b8a54595c97.png"><br><div class="image-caption">微信小程序 logo</div></div> </div>';

    var that = this
    //更新数据
    that.setData({
      wxParseData:WxParse('html',html)
    })
  }


// markdown 解析

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

    var that = this
    //更新数据
    that.setData({
      wxParseData:WxParse('md',text)
    })
  }

功能列表

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

示例

cnode 版 wxParse 使用

github 地址:https://github.com/icindy/wechat-webapp-cnode

流程图

wxParse 流程图

第三方引用

html->json html2json 目前没有找到更好的，感觉解析还是有问题，欢迎提供更好的代替品
markdown->html showdown

开发信息

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

微信小程序 logo

Time

2016.10.24 Alpha0.1 发布
2016.10.25 video 支持
2016.10.26 li 支持
2016.10.26 a 支持
2016.10.26 code 支持
2016.10.26 version0.1 发布

目前尚无回复

wxparse 解析 Markdown HTML

wxParse version0.1 正式发布-全面支持微信小程序富文本 html 及 markdown 动态解析

鸣谢