wxParse

WeChat applet rich text parsing custom component, supports HTML and markdown parsing, may be the first WeChat applet rich text parsing component

WeChat applet rich text supports HTML and markdown parsing wxParse Alpha0.1

wxParse.gif

Code library

github address: github.com/icindy/wxParse

Example

cnode version wxParse usage

github address: github.com/icindy/wechat-webapp-cnode

Current situation

Version number: Alpha0.1-It is not suitable for direct use at the moment

Current project It is not a full version, but it has roughly completed the basic concept project and can parse basic html and basic markdown.
I hope everyone can find problems, submit problems, or you can submit your modified code via Foke

The project is currently only a beta version and needs further development Improve
Need to improve the style wxParse, wxss
Need to strengthen markdown parsing html
Others

Composition

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

Copy after login

Usage

Copy the entire folderwxParse/to the root directory
Introduce the style file wxParse.wxss into the scope where you call this plug-in and like
```
@import "你的路径/wxParse/wxParse.wxss";
```
Copy after login
in the template you need to use Introduce the template file wxParse.wxml<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:c#;toolbar:false;"><import src="你的路径/wxParse/wxParse.wxml"/> <view class="wxParse"> <template is="wxParse" data="{{wxParseData}}"/> </view></pre><div class="contentsignin">Copy after login</div></div>
wxParse.js
File<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var WxParse = require(&#39;你的路径/wxParse/wxParse.js&#39;);</pre><div class="contentsignin">Copy after login</div></div>

wxParseData

(wxParseData must be used), and set the

// html解析

onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var html = &#39;<p 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; } <p>test p</p></code>

开发信息

微信小程序开发论坛

![](https://img.php.cn/upload/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)

微信小程序logo

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

Copy after login

// markdown解析

onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var text = &#39;# wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n&#39;
    +&#39; > 微信小程序富文本解析自定义组件，支持HTML及markdown解析 \n\n&#39; 
    +&#39;## 功能列表 \n * 动态加载代码  \n * html转json \n * markdown转html转json \n * 富文本markdown解析 \n * 自定义层级解析 \n * 自定义样式表 \n&#39;
    +&#39;## 文件作用 \n&#39;
    +&#39; " // wxParse.wxml //用于解析使用的模版 " \n&#39;
    +&#39;## 开发信息 \n &#39;
    +&#39; [微信小程序开发论坛](http://weappdev.com) \n&#39;
    +&#39; ![微信小程序logo](https://img.php.cn/upload/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)&#39;;

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

Copy after login

function list

##html->json html2json

markdown->html showdown

The above is the detailed content of WeChat applet rich text supports HTML and markdown parsing wxParse Alpha0.1. For more information, please follow other related articles on the PHP Chinese website!