mp htmlダウンロードmp htmlソースコードのダウンロード

mp html

その他のリソース

v2.5.0

ダウンロード

MP-HTML

強力なアプレットリッチテキストコンポーネント

機能的な紹介

複数の主流アプレットプラットフォームとuni-appでの使用をサポートします
リッチタグ（ table 、 video 、 svgなどを含む）をサポートしています
豊富なイベント効果をサポートします（写真の自動プレビュー、リンク処理など）
プレースホルダーマップのサポート設定（読み込み、エラー、プレビュー）
アンカーポイントジャンプ、ロングプレス、コピーなどの豊富な機能をサポートしています
ほとんどのHTMLエンティティをサポートします
リッチプラグイン（キーワード検索、コンテンツ編集、 latex式など）
高効率、強い断層トレランス、軽量（ ≈25KB 、 9KB gzipped ）

詳細については、関数の紹介をご覧ください

使い方

ネイティブプラットフォーム

npmメソッド
1. プロジェクトディレクトリにコンポーネントパッケージをインストールします
```
npm install mp-html
```
2. 開発者ツールでの使用npm 模块（オプションがない場合は必要ありません）を確認し、工具- 构建npm
3. ページを使用する必要があるjsonファイルを追加します
```
{
  "usingComponents" : {
    "mp-html" : " mp-html "
  }
}
```
4. ページを使用する必要があるwxmlファイルを追加します
```
 < mp-html content =" {{html}} " />
```
5. ページを使用する必要があるjsファイルを追加します
```
 Page ( {
  onLoad ( ) {
    this . setData ( {
      html : '<div>Hello World!</div>'
    } )
  }
} )
```
ソースコードメソッド
1. ソースコードの対応するプラットフォームのコードパッケージ（ dist/platform ）をcomponentsディレクトリにコピーし、 mp-htmlに名前を変更します
2. ページを使用する必要があるjsonファイルを追加します
```
{
  "usingComponents" : {
    "mp-html" : " /components/mp-html/index "
  }
}
```
次のステップは上記と同じです

詳細については、クイックスタートをご覧ください

uni-app

ソースコードメソッド

ソースコードのdist/uni-appのコンテンツをProject Root Directoryにコピーし、プラグインマーケットを通じて直接紹介できます。

ページを使用する必要があるvueファイルを追加します

< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' @/components/mp-html/mp-html '
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >

npmメソッド
1. プロジェクトディレクトリにコンポーネントパッケージをインストールします
```
npm install mp-html
```
2. ページを使用する必要があるvueファイルを追加します
```
< template >
  < view >
    < mp-html :content = " html " />
  </ view >
</ template >
< script >
  import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
  export default {
    // 不可省略
    components : {
      mpHtml
    },
    data () {
      return {
        html : ' <div>Hello World!</div> '
      }
    }
  }
</ script >
```
npmを使用してcliメソッドを使用して実行されているプロジェクトを導入する場合、 vue.config.jsでtranspileDependenciesを構成する必要があります。詳細については、＃330を参照してください
nvueで使用する場合は、 dist/uni-app/staticディレクトリのコンテンツをプロジェクトのstaticディレクトリにコピーします。それ以外の場合は実行されません

詳細については、クイックスタートをご覧ください

コンポーネントプロパティ

財産	タイプ	デフォルト値	説明します
コンテナスタイル	弦		コンテナスタイル（2.1.0+）
コンテンツ	弦		レンダリング用のHTML文字列
コピーリンク	ブール	真実	クリック時に外部リンクの自動コピーを許可するかどうか
ドメイン	弦		メインドメイン名（リンクステッチ用）
エラー-img	弦		画像エラーが発生したときのプレースホルダーリンク
怠zy-ロード	ブール	間違い	写真の怠zyなロードを有効にするかどうか
読み込みIMG	弦		画像読み込み中のプレースホルダーリンク
一時停止防止	ブール	真実	ビデオを再生するときに他のビデオを自動的に一時停止するかどうか
プレビューIMG	ブール	真実	クリック時に画像を自動的にプレビューすることを許可するかどうか
スクロールテーブル	ブール	間違い	各テーブルにスクロールレイヤーを追加して、単独で水平にスクロールできるようにするかどうか
選択可能	ブール	間違い	テキストロングプレスを有効にするかどうか
セットタイトル	ブール	真実	タイトルタグのコンテンツをページタイトルに設定するかどうか
show-img-menu	ブール	真実	メニューを表示するために画像を長時間押すことを許可するかどうか
タグスタイル	物体		タグのデフォルトスタイルを設定します
ユースアンカー	ブール	間違い	アンカーリンクを使用するかどうか

詳細については、プロパティを表示します

コンポーネントイベント

名前	タイミングをトリガーします
負荷	DOMツリーがロードされたとき
準備ができて	写真がロードされたとき
エラー	レンダリングエラーが発生したとき
imgtap	写真がクリックされたら
linktap	リンクがクリックされたとき

詳細については、イベントをご覧ください

API

一部のapiメソッドは、コール用のコンポーネントインスタンスに提供されています

名前	効果
で	アンカージャンプの範囲をスクロールビューに制限します
navigateto	アンカージャンプ
getText	テキストコンテンツを取得します
GetRect	豊富なテキストコンテンツの場所とサイズを取得します
setcontent	豊富なテキストコンテンツを設定します
imglist	すべての画像の配列を取得します
Pausemedia	オーディオとビデオの再生を一時停止する（2.2.2+）
SetPlayBackRate	オーディオおよびビデオ再生率（2.4.0+）を設定します

詳細については、APIをご覧ください

プラグイン拡張機能

基本機能に加えて、このコンポーネントはリッチな拡張機能も提供し、必要に応じて選択できます。

名前	効果
オーディオ	音楽プレーヤー
編集可能	豊富なテキスト編集
絵文字	絵文字を分析します
ハイライト	コードブロックハイライト
マークダウン	レンダリングマークダウン
検索	キーワード検索
スタイル	スタイルタグのスタイルをマッチします
TXV-Video	Tencentビデオの使用
img-cache	@Pentateaによる画像キャッシュ
ラテックス	@Zeng-Jによってラテックスフォーミュラをレンダリングします
カード	@whoooamiによるカードディスプレイ

詳細については、プラグインをご覧ください

ユースケース

公式の例	ハッピーモール	なんて人生	食品方法チェック	ワイム	古典文学を読んでください

科学レビュー	プログラマーのテクノロジーの旅	Diandianブログ	優れたメモ	365の質問	同じ都市で共有された本

テクノロジーソースシェア	あなたのコードは素晴らしいです	真実	モットーニ	テンプレートデモ	ai wali

上記のランキングは特定の順序ではなく、より目に見えるユースケースが収集されます（追加してください）

ライセンスとサポート

無料のライセンス（商用利用を含む）、このコンポーネントMITライセンスのコピーまたは変更
生産環境で使用される前に、十分なテストを受ける必要があります。プラグインのbugによって引き起こされる損失について責任を負いません（ソースコードを自分で変更できます）
お問い合わせくださいQQコミュニケーショングループに参加してください。
グループ1（フル）： 699734691
グループ2（フル）： 778239129
グループ3： 960265313
サポート

ログを更新します

v2.5.0（20240422）
1. U playイベントは、 srcおよびその他の情報の詳細を追加します
2. U preview-img属性はall設定をサポートしてbase64画像プレビューの詳細を有効にします
3. U editableプラグインは簡単なモードを追加します（テキストをクリックして直接編集します）
4. U latexプラグインは、ブロックレベルの式の詳細をサポートしています
5. Fテーブルの場合によっては、バックグラウンド損失の問題を修正しました。
6. F svg詳細に表示できないいくつかの問題を修正しました
7. F uni-appパッケージh5とappの終了でスタイルを認識できないという問題を修正しました。
8. F場合によっては、 latexプラグインの誤ったディスプレイの問題を修正しました。
9. F editableプラグインテーブルを削除できない問題を修正しました
10. F editableプラグインuni-appパッケージvue3 h5をクリックする画像エラーの問題を修正しました
11. Fメニューバーなしでeditableプラグインuni-appパッケージがテーブルをクリックする問題を修正しました
v2.4.3（20240121）
1. @whoooamiによるAカードプラグインの詳細
2. F foreignobject svg詳細に表示されない可能性がある問題を修正しました
3. F詳細のテーブル部分のマージされたセルの場合、誤ったディスプレイの問題を修正しました
4. F無効のimgタグにobject-fitを設定する問題を修正しました
5. F latexプラグインフォーミュラがラインの詳細を包む問題を修正しました
6. F uni-appパッケージのeditableとaudioプラグインが共有されている場合、クリックaudioを編集できないという問題を修正しました。 @whoooamiによる詳細
7. F Alipayアプレットが異常に表示される可能性のある幅と高さの写真を設定した問題を修正しました。
8. F uni-appパッケージWeChatアプレットが、場合によってはreplace of undefinedのエラーを報告する問題を修正しました。
9. F uni-appパッケージKuaishou Miniプログラムが詳細を表示しないという問題を修正しました
更新ガイドは、 1.xのアップグレード方法から見ることができます