[mp-html] ミニプログラムリッチテキストコンポーネント（ページに埋め込まれたhtml）

記事ディレクトリ

序文
1.mp-htmlとは何ですか?
2. 使用方法
3. 応用例

序文

動的なリッチテキストの表示はhtml、多くのアプリケーションにとって必要な要件です。ミニプログラムプラットフォームは操作をサポートしていないためdom、これが問題となります。独自のrich-textコンポーネントは少数のタグをサポートし、すべてのイベントをブロックするため、実際に適用するのは困難です。そこで、ミニプログラムプラットフォーム上でリッチテキストを便利に処理でき、リッチな拡張機能もサポートするコンポーネントが存在します。

提示：以下是mp-html正文内容，下面案例可供参考

1.mp-htmlとは何ですか?

mp-htmlリッチテキストコンポーネントは、複数の主流のミニプログラムプラットフォーム (WeChat、QQ、Baidu、Alipay、Toutiao、uni-app など) および uni-app で使用できるミニプログラムコンポーネントです。

このコンポーネントの主な機能は次のとおりです。

リッチテキストのレンダリングと編集をサポートできます。リッチテキストには、HTML タグ ( table、など)、イベント効果 ( video、svgなど)、関数( など) が含まれる場合があります。自动预览图片链接处理等锚点跳转长按复制
また、ほとんどの HTML エンティティもサポートしているため、ユーザーはミニプログラムでより豊富なコンテンツを表示できます。
このコンポーネントには、ユーザーエクスペリエンスを大幅に向上させる、关键词搜索やなどの豊富なプラグインもあります。内容编辑
mp-htmlリッチテキストコンポーネントは高効率、耐障害性、軽量であり、インストールパッケージのサイズは約 24.5 KB で、gzip 圧縮後のサイズはわずか 9 KB です。

詳細な属性については、公式ドキュメントを参照してください。たとえば、ネイティブプラットフォームでは、npm を介してコンポーネントパッケージをインストールし、プロジェクトディレクトリに npm をビルドし、対応する構成情報をページの json ファイルに追加できます。コンポーネントを使用する必要があります。

2. 使用方法

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

1.npmメソッド:

この方法は、WeChat および QQ mini プログラムにのみ適用できます。

ミニプログラムプロジェクトのルートディレクトリに npm を介してコンポーネントパッケージをインストールします。

npm install mp-html

開発者ツールで「npm モジュールを使用する」にチェックを入れます (このオプションが使用できない場合は不要です)。

使用 npm 模块

「npmモジュールのビルド」をクリックします

工具 - 构建 npm

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

{
    
    
  "usingComponents": {
    
    
    "mp-html": "mp-html"
  }
}

ページ内で使用する

<mp-html content="{
    
    {html}}">加载中...</mp-html>

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

Page({
    
    
  onLoad() {
    
    
    this.setData({
    
    
      html: '<div>Hello World!</div>'
    })
  }
})

2. ソースコードの紹介

この方法はすべてのプラットフォームに適用されます

源码プラットフォームに対応するコードパッケージ ( dist/platform)をcomponentsディレクトリにコピーし、名前を変更します (ソースコードを入手するには、公式ドキュメントをmp-html参照してください)。
ページを使用する必要があるjsonファイルに追加します

{
    
    
  "usingComponents": {
    
    
    "mp-html": "/components/mp-html/index"
  }
}

サポートされているプロパティとイベントについては、対応するドキュメントを参照してください。

2.ユニアプリプラットフォーム

1.uni-modulesメソッド

この方法には、HBuilder X バージョン 3.1.0 以降の開発が必要です。

プラグインマーケットにアクセスし、HBuilder X 导入插件右上隅の [使用] ボタンをクリックしてプロジェクトをインポートするか、下载插件ZIPボタンをクリックしてプラグインパッケージをダウンロードし、プロジェクトのuni_modules/mp-htmlディレクトリに抽出します。
ページを使用する必要がある (n)vue ファイルを追加します

<template>
  <view>
    <!-- 不需要引入，可直接使用 -->
    <mp-html :content="html" />
  </view>
</template>
<script>
  export default {
    
    
    data () {
    
    
      return {
    
    
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

バージョンを更新する必要がある場合は、ディレクトリを右HBuilder Xクリックして、uni_modules/mp-html从插件市场更新

2. ソースコード方式

ソースコードdist/uni-appの内容を项目根目录以下にコピーします
ページを使用する必要がある (n)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>

3.npmメソッド

npmコンポーネントパッケージをプロジェクトのルートディレクトリにインストールします
ページを使用する必要がある(n)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>

cli モードで実行されているプロジェクトが npm 経由で導入される場合、vue.config.js で transpileDependency を構成する必要があります。詳細については、#330を参照してください。

nvue で使用する場合は、dist/uni-app/static ディレクトリの内容をプロジェクトの static ディレクトリにコピーする必要もあります。そうしないと実行されません。

更多方式可查看公式ドキュメント

3. 応用例

1. uniappプラグインマーケットから直接ダウンロードし、HBuilderX にインポートします。
ここに画像の説明を挿入します

2. uniappでページを作成し、mp-htmlを使用します

<template>
	<view class="head-txt3-content">
		<mp-html :content="html" container-style="height: 100%;" 			:tag-style="tagStyle">加载中...
		</mp-html>
	</view>
</template>

3. .vue ファイルを js に導入し、コンポーネント内で宣言します

import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'

components: {
    
    
	mpHtml
},

4. mp-htmlが参照するデータに対応するデータとリモートHTMLファイルのパスを定義 mp-htmlコンテンツのスタイルはtagStyleで定義可能

data() {
    
    
	return {
    
    
		html: '',
		htmlUrl: 'https:baidu/**.html', /*这里是编的*/
		tagStyle: {
    
    
			overflow: 'hidden;', /* 禁用横向滚动 */
			p: 'font-size: 16px;color:#1F2329: line-heiaht: 1.4; padding:0; margin-block-start: 1.2em; margin-block-end: 1.2em;'
				},
	}
}

5. uniapp 関数 (この関数は指定された URL から HTML コードをロードするために使用されます) を使用するメソッドを定義し、ページの作成時に HTML データをロードしてページにレンダリングします。

loadExternalHtml() {
    
    
	uni.request({
    
    
		url: this.htmlUrl, // 外部HTML页面的URL
		success: (res) => {
    
    
			this.html = res.data;
		},
		fail: (err) => {
    
    
			console.error(err);
		},
	});
},

mounted() {
    
    
	this.loadExternalHtml();
},