uniapp-ucharts

このスキルを使用する場面

ユーザーが以下を希望する場合は、いつでもこのスキルを使用してください。

• UniApp プロジェクトに uCharts を統合する
• uCharts を使用できるように UniApp プロジェクトを設定する（pages.json、manifest.json、easycom）
• UniApp で uCharts を使用する際のプラットフォーム固有の動作に対応する（H5、ミニプログラム、App、nvue）
• uCharts コンポーネントとともに UniApp の機能（ナビゲーション、API、ライフサイクル）を使用する
• uCharts のグラフを使ったクロスプラットフォームの UniApp アプリケーションを構築する
• UniApp で uCharts コンポーネントを自動インポートするために easycom を設定する
• UniApp で uCharts を使用したナビゲーションとルーティングに対応する
• uCharts を使用する UniApp プロジェクトを最適化する
• uCharts ベースの UniApp アプリケーションを複数のプラットフォームにデプロイする

このスキルの使用方法

このスキルは、UniApp の統合パターンと公式 UniApp プラグインの構造（https://ext.dcloud.net.cn/plugin?id=271）に沿って構成されています。UniApp で uCharts を使用する場合は、次の手順に従ってください。

1. UniApp プロジェクトに uCharts をインストールしてセットアップする：

   • UniApp へのインストール方法は examples/getting-started/installation.md を読み込んでください
   • UniApp プロジェクトの設定方法は examples/getting-started/project-setup.md を読み込んでください
   • easycom の設定方法は examples/getting-started/easycom-config.md を読み込んでください

2. UniApp の機能と統合する：

   • pages.json の設定方法は examples/integration/pages-config.md を読み込んでください
   • manifest.json の設定方法は examples/integration/manifest-config.md を読み込んでください
   • uCharts を使用したナビゲーションについては examples/integration/navigation.md を読み込んでください
   • uCharts で UniApp API を使用する方法は examples/integration/uni-api.md を読み込んでください

3. プラットフォーム固有の動作に対応する：

   • H5 プラットフォームに関する注意事項は examples/platform-specific/h5.md を読み込んでください
   • ミニプログラムに関する注意事項は examples/platform-specific/miniprogram.md を読み込んでください
   • App プラットフォームに関する注意事項は examples/platform-specific/app.md を読み込んでください
   • nvue に関する注意事項は examples/platform-specific/nvue.md を読み込んでください

4. 高度な統合：

   • UniApp でのテーマのカスタマイズ方法は examples/advanced/custom-theme.md を読み込んでください
   • ビルドの最適化については examples/advanced/build-optimization.md を読み込んでください
   • 複数プラットフォームへのデプロイについては examples/advanced/multi-platform.md を読み込んでください

5. 必要に応じて API ドキュメントを参照する：

   • api/integration-api.md - UniApp と uCharts の統合 API
   • api/config-api.md - 設定 API リファレンス

6. すぐに始めるにはテンプレートを使用する：

   • templates/basic-uniapp-project.md - uCharts を使用した基本的な UniApp プロジェクト
   • templates/pages-template.md - pages の設定テンプレート
   • templates/manifest-template.md - manifest の設定テンプレート

重要な注意事項：

• このスキルの対象は UniApp の統合であり、uCharts API ドキュメントではありません
• コンポーネントを自動インポートできるよう、必ず pages.json で easycom を設定してください
• プラットフォーム固有のコードには条件付きコンパイル（#ifdef、#endif）を使用してください
• デプロイ前に、対象とするすべてのプラットフォーム（H5、ミニプログラム、App）でテストしてください
• UniApp でレスポンシブなサイズ指定を行うには rpx 単位を使用してください

例とテンプレート

はじめに

• インストール：examples/getting-started/installation.md - UniApp プロジェクトに uCharts をインストールする方法
• プロジェクトのセットアップ：examples/getting-started/project-setup.md - uCharts を使用する UniApp プロジェクトのセットアップ
• Easycom の設定：examples/getting-started/easycom-config.md - コンポーネントを自動インポートするための easycom の設定

統合

• Pages の設定：examples/integration/pages-config.md - uCharts を使用する pages.json の設定
• Manifest の設定：examples/integration/manifest-config.md - uCharts 用の manifest.json の設定
• ナビゲーション：examples/integration/navigation.md - uCharts を使用したナビゲーションとルーティング
• UniApp API：examples/integration/uni-api.md - uCharts コンポーネントで UniApp API を使用する方法

プラットフォーム固有

• H5：examples/platform-specific/h5.md - uCharts を使用する際の H5 プラットフォームに関する考慮事項
• ミニプログラム：examples/platform-specific/miniprogram.md - uCharts を使用する際のミニプログラムに関する考慮事項
• App：examples/platform-specific/app.md - uCharts を使用する際の App プラットフォームに関する考慮事項
• nvue：examples/platform-specific/nvue.md - uCharts を使用する際の nvue に関する考慮事項

高度な設定

• カスタムテーマ：examples/advanced/custom-theme.md - UniApp プロジェクトでのテーマのカスタマイズ
• ビルドの最適化：examples/advanced/build-optimization.md - uCharts を使用した UniApp ビルドの最適化
• マルチプラットフォーム：examples/advanced/multi-platform.md - マルチプラットフォームのデプロイ戦略

テンプレート

• 基本プロジェクト：templates/basic-uniapp-project.md - uCharts を使用する UniApp プロジェクトの基本構成
• ページテンプレート：templates/pages-template.md - pages.json 設定テンプレート
• Manifest テンプレート：templates/manifest-template.md - manifest.json 設定テンプレート

API リファレンス

• 統合 API：api/integration-api.md - UniApp と uCharts の統合 API リファレンス
• 設定 API：api/config-api.md - UniApp プロジェクト向け設定 API リファレンス

ベストプラクティス

1. easycom の使用：pages.json で easycom を設定し、uCharts コンポーネントを自動的にインポートします
2. プラットフォームのテスト：デプロイ前に、対象のすべてのプラットフォーム（H5、ミニプログラム、App）でテストします
3. rpx 単位の使用：UniApp でレスポンシブなサイズ指定には rpx、固定サイズには px を使用します
4. Canvas のサポート：対象プラットフォームで Canvas が適切にサポートされていることを確認します
5. Manifest の設定：各プラットフォーム向けに manifest.json を適切に設定します
6. 条件付きコンパイル：プラットフォーム固有のコードには、条件付きコンパイル（#ifdef、#endif）を使用します
7. パフォーマンス：各プラットフォーム固有の要件に合わせて最適化します
8. データ形式：データ形式が uCharts の要件に適合していることを確認します
9. ライフサイクル管理：uCharts のインスタンスで UniApp のページライフサイクルを適切に処理します
10. メモリ管理：onUnload ライフサイクルでチャートのインスタンスをクリーンアップします

リソース

• UniApp 公式プラグイン：https://ext.dcloud.net.cn/plugin?id=271
• UniApp ドキュメント：https://uniapp.dcloud.net.cn/
• UniApp API リファレンス：https://uniapp.dcloud.net.cn/api/

キーワード

uniapp, ucharts, uniapp charts, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, ミニプログラム, クロスプラットフォーム, H5, App, nvue, 条件付きコンパイル, プラットフォーム間の差異, チャート, canvas, チャートコンポーネント, UniApp チャート, クロスプラットフォームチャート, ミニプログラムチャート, App チャート