ホームページ >WeChat アプレット >ミニプログラム開発 >Web コンテンツを解析する WeChat アプレットの概要

Web コンテンツを解析する WeChat アプレットの概要

不言オリジナル: 2018-06-27 14:35:151684ブラウズ

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

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

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

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

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

const webshot = require(&#39;webshot&#39;);

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

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

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

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

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

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

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

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

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

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

Web コンテンツを解析する WeChat アプレットの概要

関連記事