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

wxParse

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

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)

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";

• in the template you need to use Introduce the template file wxParse.wxml<pre class='brush:php;toolbar:false;'>&lt;import src=&quot;你的路径/wxParse/wxParse.wxml&quot;/&gt; &lt;view class=&quot;wxParse&quot;&gt; &lt;template is=&quot;wxParse&quot; data=&quot;{{wxParseData}}&quot;/&gt; &lt;/view&gt;</pre>

into the corresponding js
• wxParse.js

  File<pre class="brush:php;toolbar:false">var WxParse = require('你的路径/wxParse/wxParse.js');</pre>

Set the corresponding data value array
• wxParseData

  (wxParseData must be used), and set the

  // html解析
  
  onLoad: function () {
      console.log('onLoad')
      var html = &#39;<p class="content mousetrap"><h1 id="wxParse-微信小程序富文本解析自定义组件-支持HTML及markdown解析">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>

   

  开发信息

   

  微信小程序开发论坛

   

  
  

  微信小程序logo

   ';     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](https://img.php.cn/upload/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)';
  
      var that = this
      //更新数据
      that.setData({
        wxParseData:WxParse('md',text)
      })
    }

function list

Dynamic loading code
html to json
markdown to html to json
Rich text markdown parsing
Customized level parsing
Customized style sheet
TODO

Add more tag parsing
Remove duplication and customize styles
Solving problems in components
Third-party references

##html->json html2json

No updates found yet Okay, I feel there is still a problem with the parsing. You are welcome to provide better alternatives

• 
  

  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!