wxmlifyダウンロード - wxmlifyソースコードのダウンロード

wxmlify

AI ソースコード

v1.2.0

ダウンロード

Wxmlify

WeChat ミニプログラムでリッチテキストエディターによって生成された HTML を表示するのに役立つ軽量で高速なプラグイン。

注: WeChat ミニプログラムの新しいバージョンでは、すでに`<rich-text>`リッチテキストコンポーネントが提供されていますが、当面はその互換性が保証されていません。サードパーティの解析ツールが必要になる場合があります。

アドバンテージ

小型で軽量 - わずか 2 ファイル、合計 14kb
冗長なスタイルが追加されないため、ドキュメントのスタイルをカスタマイズするのに便利です
元のドキュメントのfont-size 、 font-weightなどを保持するように指定するなど、元のドキュメントのスタイルを選択的に保持できます。
解析が速くなります
使いやすい
写真、ビデオ、表をサポート

欠点がある

リッチテキストエディターで生成された HTML の解析を好みますが、すべてのシナリオに適しているわけではありません。リッチテキストエディターによって生成される HTML は特定の仕様に準拠しているためです。

使い方（デモ）

wxmlify フォルダーを weapp プロジェクトにコピーします。
リッチテキストを表示する必要があるページの js にこれを導入し、新しいインスタンスを作成します。次に例を示します。

 // pages/index/index.js

var Wxmlify = require ( '../../wxmlify/wxmlify.js' )

Page ( {
  onLoad ( ) {
    // 以任何方式获得要解析的Html代码
    var html = getHTMLStringSomehow ( ) 

    // new 一个 wxmlify 实例就好了
    var wxmlify = new Wxmlify ( html , this , { } )
  }
} )

テンプレートを対応するページ wxml に導入します。次に例を示します。

 <!-- pages/index/index.wxml  -->
< import src =" ../../wxmlify/wxmlify.wxml " />

< template is =" wxmlify " data =" {{nodes: wxmlified}} " > </ template >

ドキュメントビュー

コンストラクタ

 new Wxmlify ( html , page [ , options ] )

パラメータ:
- html: string - 解析する HTML コードの文字列
- page: ミニプログラムページインスタンス - つまり、すべてのページメソッドにおけるthisのポインタ
- オプション: オプション
戻り値: メソッドの呼び出しに使用される wxmlify インスタンス

オプション

データキー

ページデータ内の解析されたデータのキー
タイプ: string
デフォルト: 'wxmlified'
例えば：

 new Wxmlify ( html , this , {
  dataKey : 'myRichText'
} )

対応して、wxml では次のようになります。

 < template is =" wxmlify " data =" {{nodes: myRichText}} " > </ template >

スタイルを保持する

保持するCSSスタイル名（キャメルケース形式）
タイプ：
- 文字列'all'はすべてのスタイルを保持することを意味します
- false 、 0 、 nullなどの負の値は、すべての組み込みスタイルを削除することを意味します
- ['fontSize', 'fontWeight', 'background']などの特定のスタイルを保持するように指定する配列
デフォルト: 'all' (すべてのスタイルをデフォルトのままにする)

画像プレビューを無効にする

画像クリックプレビューを無効にする
タイプ: boolean
デフォルト: false

画像タップ時

画像クリック処理機能
タイプ: function
デフォルト: function() {}

方法

wxmlify.getFullNodes()

JavaScript 配列、HTML が解析された後の json データ構造を返します。

wxmlify.getHTML()

渡されたHTMLを返します

wxmlify.getImages()

すべての画像の URL を含む配列を返します。

カスタムスタイル

. wxmlified-element {
  /* 修改段落块的样式 */
}

. wxmlified-element . h1 {
  /* 修改原<h1>标签块的样式，其它块级标签同理 */
}

. wxmlified-image {
  /* 修改图片的样式 */
}

. wxmlified-text {
  /* 修改文字节点的样式 */
}

. wxmlified-table . table {
  /* table 的样式 */
  border : 1 rpx solid # acacac ;
}

. wxmlified-table . tr {
  /* tr 的样式 */
  border-bottom : 1 rpx solid # acacac ;
}

. wxmlified-table . tr : last-child {
  border-bottom : 0 ;
}

. wxmlified-table . th , . wxmlified-table . td {
  /* th,td 的样式 */
  border-right : 1 rpx solid # acacac ;
  line-height : 2 ;
}

. wxmlified-table . th : last-child , . wxmlified-table . td : last-child {
  border-right : none;
}

. wxmlified-table . th {
  font-weight : bold;
}