Web コンテンツを解析する WeChat アプレットの例の詳細な説明

この記事では主に、WeChat アプレットの Web ページ コンテンツの詳細な説明と例を紹介します。ここでは、クローラーを使用して複雑な Web ページをクロールします。問題が発生した場合は、ここで問題を解決します。参照してください

Web ページのコンテンツを解析する WeChat アプレットの詳細な説明

最近、私は WeChat アプレットで使用するために Web ページを解析する必要があるクローラーを作成しています。テキストと画像の分析はどちらも理解しやすく、ミニ プログラムにはプレゼンテーション用に対応するテキストと画像のタグも含まれています。テーブルなどのより複雑なものは、サーバー側の解析でもミニ プログラムのレンダリングでも非常に手間がかかり、すべての状況をカバーするのは困難です。そこで、表に対応するHTMLコードを画像に変換することが回避策になるのではないかと考えました。

ここでは、PhantomJS を軽くカプセル化し、Web ページをスクリーンショットとして簡単に保存できる、node-webshot モジュールを使用します。

まず Node.js と PhantomJS をインストールし、次に新しい js ファイルを作成して、node-webshot モジュールをロードします:

const webshot = require('webshot');

オプションを定義します:

const options = {
  // 浏览器窗口
  screenSize: {
    width: 755,
    height: 25
  },
  // 要截图的页面文档区域
  shotSize: {
    height: 'all'
  },
  // 网页类型
  siteType: 'html'
};

ここで、ブラウザ ウィンドウの幅は Web ページに従って適切に設定する必要があります、高さを 1 に設定できます (非常に小さい値)。その場合、ページ ドキュメント領域の高さは all に設定する必要があり、幅はデフォルトでウィンドウの幅に設定されるため、最小サイズで表全体のスクリーンショットを撮ることができます。

次に、HTML 文字列を定義します:

let html = "target rich text html code, eg: <table>...</table>";

内部の HTML コードでは改行を削除し、二重引用符を一重引用符に置き換える必要があることに注意してください。

最後に、スクリーンショット:

webshot(html, 'demo.png', options, (err) => {
  if (err)
    console.log(`Webshot error: ${err.message}`);
});

このようにして、HTML コードからローカル画像への変換が実現され、Qiniu Cloud などにアップロードできます。サーバーサイドの解析でもミニプログラムのプレゼンテーションでも、まったく難しいことはありません...

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトをサポートしていただきありがとうございます!

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