Heim  >  Artikel  >  WeChat-Applet  >  Rich Text des WeChat-Applets unterstützt HTML und Markdown-Parsing wxParse Alpha0.1

Rich Text des WeChat-Applets unterstützt HTML und Markdown-Parsing wxParse Alpha0.1

Y2J
Y2JOriginal
2017-05-01 10:32:242769Durchsuche

wxParse

Benutzerdefinierte WeChat-Applet-Rich-Text-Parsing-Komponente, unterstützt HTML- und Markdown-Parsing, möglicherweise die erste WeChat-Applet-Rich-Text-Parsing-Komponente

Rich Text des WeChat-Applets unterstützt HTML und Markdown-Parsing wxParse Alpha0.1

wxParse.gif

Codebibliothek

Github-Adresse: github.com/icindy/wxParse

Beispiel

  • Knode-Version wxParse-Nutzung

    Github-Adresse: github.com/icindy/wechat-webapp-cnode

Aktuelle Situation

版本号: Alpha0.1-Es ist noch nicht für den direkten Einsatz geeignet

Das aktuelle Projekt ist keine vollständige Version, sondern nur grob abgeschlossene grundlegende kreative Projekte, die in der Lage sind, grundlegendes HTML und grundlegendes Markdown zu analysieren.
Ich hoffe, dass Sie Probleme finden und einreichen können, oder Sie können Ihren geänderten Code über Foke einreichen

  • Das Projekt ist derzeit nur eine Beta Version und muss weiterentwickelt werden. Verbessern

  • muss den Stil wxParse, wxss verbessern

  • muss das Markdown-Parsing-HTML stärken

  • Andere

Zusammensetzung

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

Verwendung

  • Kopieren Sie den gesamten OrdnerwxParse/ in das Stammverzeichnis

  • Fügen Sie die Style-Datei wxParse.wxss in den Bereich ein, in dem Sie dieses Plug-in aufrufen

    @import "你的路径/wxParse/wxParse.wxss";
  • Fügen Sie die Vorlage im x.wxml der Vorlage ein, die Sie verwenden möchten. Datei wxParse.wxml

    <import src="你的路径/wxParse/wxParse.wxml"/>
    <view class="wxParse">
    <template is="wxParse" data="{{wxParseData}}"/>
    </view>
  • Fügen Sie die wxParse.js-Datei

    var WxParse = require('你的路径/wxParse/wxParse.js');
  • in die entsprechenden js, um das entsprechende Datenwertarray festzulegen

    (Muss wxParseData verwenden) und wxParseData

// 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) }) }
// 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)
    })
  }
Funktionsliste

    Dynamischer Ladecode
  • HTML zu JSON
  • Markdown zu HTML zu JSON
  • Rich-Text-Markdown-Analyse
  • Benutzerdefinierte Ebenenanalyse
  • Benutzerdefiniertes Stylesheet
  • TODO

    Mehr Tag-Parsing hinzufügen
  • Duplikate entfernen und Stile anpassen
  • Probleme lösen in Komponenten
  • Referenzen von Drittanbietern

    html->json html2json
  • Ich habe das Gefühl, dass ich noch kein besseres gefunden habe Es gibt immer noch ein Problem mit dem Parsen. Sie können gerne bessere Alternativen bereitstellen


  • Markdown->html Showdown

Das obige ist der detaillierte Inhalt vonRich Text des WeChat-Applets unterstützt HTML und Markdown-Parsing wxParse Alpha0.1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn