ホームページ  >  記事  >  WeChat アプレット  >  WeChat アプレットのリッチ テキストは、HTML およびマークダウン解析をサポートします。wxParse Alpha0.1

WeChat アプレットのリッチ テキストは、HTML およびマークダウン解析をサポートします。wxParse Alpha0.1

Y2J
Y2Jオリジナル
2017-05-01 10:32:242761ブラウズ

wxParse

WeChat アプレット リッチ テキスト解析カスタム コンポーネント、HTML およびマークダウン解析をサポート、最初の WeChat アプレット リッチ テキスト解析コンポーネントになる可能性があります

WeChat アプレットのリッチ テキストは、HTML およびマークダウン解析をサポートします。wxParse Alpha0.1

wxParse.gif

コード ライブラリ

githubアドレス: github.com/icindy/wxParse

Example

  • cnodeのバージョンwxParseの使い方

    githubアドレス: github.com/icindy/wechat-webapp-cnode

現在の状況

バージョン番号: Alpha0.1 - 現時点では直接使用には適していません版本号: Alpha0.1-目前还不太适合直接使用

目前项目不属于完整版,只是大概完成了基础的构思项目,能够解析基本的html,基础的markdown。
希望大家能够发现问题,提交问题,也可以foke提交您的修改代码

  • 项目目前在只是测试版,需要进一步完善

  • 需要完善样式wxParse,wxss

  • 需要加强markdown解析html

  • 其他

组成

-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

  • 現在のプロジェクトは、基本的なコンセプトのプロジェクトが大まかに完成しただけで、基本的な HTML と基本的なマークダウンを解析できます。
皆さんが問題を見つけたり、問題を送信したり、 Foke 経由で変更したコードを送信したりできることを願っています

  • このプロジェクトは現在ベータ版にすぎず、さらなる改善の必要があります

  • 必要wxParse、wxssのスタイルを改善する

  • HTMLのマークダウン解析を強化する必要がある

  • その他

  • で構成される

    // 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) }) }
  • 使い方
  • フォルダ全体をコピーするwxParse/ コード>ルートディレクトリに

    スタイルを配置します。 ファイル wxParse.wxss が、このプラグインを呼び出すスコープに導入されます。 テンプレート ファイル wxParse を <code>x に導入します。使用したいテンプレートの.wxml
  • // 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)
        })
      }

  • 対応するjsにwxParse.jsファイルを導入します
  • rrreee

  • データ値配列 wxParseData ( wxParseData を使用する必要があります)、
  • rrreeerrreee
  • 関数リスト

    動的読み込みコード

  • htmlをjsonに設定
  • マークダウンをhtmlからjsonに設定
🎜🎜リッチテキストマークダウン解析🎜🎜 🎜🎜カスタマイズされたレベル分析🎜🎜🎜🎜カスタムスタイルシート🎜🎜🎜🎜TODO🎜🎜🎜🎜さらにタグを解析🎜🎜🎜🎜スタイルを複製してカスタマイズできます🎜🎜🎜🎜問題を解決するコンポーネント内🎜🎜🎜🎜サードパーティの参照🎜🎜 🎜🎜html->json html2json🎜 解析にまだ問題があると感じています🎜🎜。 🎜🎜マークダウン->HTML 対決🎜🎜🎜

以上がWeChat アプレットのリッチ テキストは、HTML およびマークダウン解析をサポートします。wxParse Alpha0.1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。