WeChat アプレットで HTML コンテンツをレンダリングする方法 (例による説明)

この記事は、WeChat アプレットが HTML コンテンツをレンダリングする方法に関するものです (例を示した説明) ので、困っている友人が参考になれば幸いです。あなたに助けられました。

最近、物流注文クエリに関する新しい小さなプログラムを作成しました。

小さな問題に遭遇しました。データ内で返された電話番号の文字列が識別されて強調表示され、イベントがバインドされる可能性がありました。たとえば、データには、配達担当者の Huang xx が配達中であり、彼の電話番号: 137xxxx41460 がすでに配達していることが含まれています。このうち、137xxxx41460 を特定し、クリック イベントをバインドして電話番号をクリックしてダイヤルする必要があります。

この関数については 3 つの解決策を含む多くの情報を収集しましたが、それぞれに独自の長所と短所があるため、記録しました

wxParse
この小さなプログラムはまだ立ち上げられたばかりですが、HTML コンテンツを直接レンダリングすることはできないため、「wxParse」というライブラリが誕生しました。その原理は、HTML コードをツリー構造のデータに解析し、ミニ プログラムのテンプレートを通じてデータをレンダリングすることです。

リッチテキスト
その後、ミニ プログラムには、リッチ テキスト コンテンツを表示するための「リッチ テキスト」コンポーネントが追加されました。ただし、このコンポーネントには大きな制限があります。すべてのノードのイベントがコンポーネント内でブロックされるということです。つまり、このコンポーネントでは「プレビュー画像」のような単純な機能すら実装することができません。

web-view
その後、ミニ プログラムにより、「web-view」コンポーネントを介して Web ページをネストできるようになり、Web ページを通じて HTML コンテンツを表示することが最も互換性のあるソリューションになりました。ただし、もう 1 ページロードする必要があるため、パフォーマンスが低下し、個人アプレットは Webview を使用できません。

私の唯​​一の要件は電話番号を認識することだけであり、そのような複雑な文字テンプレートは必要ないからです。そこで、wxparseの原理に基づいて電話番号認識に関する関数を書きました。

結果は次のとおりです:

技術的な焦点は

1 です。文字列に通常のルールを使用します。データが返された後 (/(¹ )|(d{9,14})|(d{3,4}-d{6,10})/g) は、新しいデータがあることを認識します。 type:phone の場合、電話番号以外の文字は別のフィールドに配置され、type:text として表されます。データ構造は図

## に示すとおりです。

# 2. フィールド読み取り

<template>
  <block>
    <template></template>
  </block>
</template>
<template>
  <block>
    <text>{{item.acceptStation}}</text>
  </block>
  <block>{{item.acceptStation}}</block>
</template>

に関する新しいテンプレートを作成し、後の論理処理を容易にするために、テンプレートにクリック イベントをバインドします。

3. 必要に応じて、現在の機能要件を満たすために使用されるテンプレート

  <import></import>   
  <template></template>

を導入します。複雑なプラグインを使用せずにネイティブコンポーネントを直接導入するよりも便利です。鍵となるのはアイデアです。 。ここに

を記録します

以上がWeChat アプレットで HTML コンテンツをレンダリングする方法 (例による説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。