uniappのミニプログラムのwxml-to-canvasプラグインを使用する方法

この記事ではuniappのミニプログラムのwxml-to-canvasプラグインの使い方を中心に説明しますが、wxml-to-canvasが動的にデータを転送する仕組みや注意すべき落とし穴については次の記事で詳しく説明します。

1-wxml-to-canvas について

公式ウェブサイトのアドレス: wxml-to-canvas | WeChat オープンドキュメント

実際に wxml-to-canvas を使用する主な機能はポスターを生成することであり、公式 Web サイトには静的ポスターの生成であるデモが公開されており、直接ダウンロードできます。

2-uniappでの使い方について

ミニ プログラムを通常に使用するには、npm をミニ プログラムにインストールするだけで済みます。ミニ プログラムは miniprogram_npm をビルドします。

しかし、uniappではnpmでダウンロードした内容が大きなディレクトリのnode_modules配下にあり、パッケージ化してからビルドすることができないので、方法は次のようになります。

1.  uniappプロジェクトにwxcomponentsフォルダーを構築します
2. WeChat アプレットの公式の wxml-to-canvas コード スニペットをダウンロードし、自分で作成した wxcomponents 内の独自のコンポーネントに 2 つのコンポーネントをコピーします。
3. wxml-to-canvasのindex.jsを変更する

   module.exports = require("widget-ui");
   改为
   module.exports = require("../widget-ui/index.js");

4. globalStyle でグローバル コンポーネントを構成する

   	"usingComponents":{
   			"wxml-to-canvas": "/wxcomponents/wxml-to-canvas/index"
   		}

   このようにして、残りの使用方法が設定され、ミニ プログラムでの wxml-to-canvas の使用と一致します。公式 Web サイトを参照してください。

次の記事では、wxml-to-canvas で wxml とスタイルを動的に生成する方法を紹介します。

皆さんの幸せな人生を祈っています！～