uniapp-uview

このスキルを使用するタイミング

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

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

このスキルの使い方

このスキルは、UniApp の統合パターンと公式 UniApp プラグインの構成（https://ext.dcloud.net.cn/plugin?id=1593）に沿って整理されています。UniApp で uView UI を使用する場合：

1. UniApp プロジェクトに uView UI をインストールしてセットアップします。

   • 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 を読み込みます
   • uView を使ったナビゲーションについては examples/integration/navigation.md を読み込みます
   • uView で 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 と uView の統合 API
   • api/config-api.md - 設定 API リファレンス

6. クイックスタートにはテンプレートを使用します。

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

重要な注意事項：

• このスキルは UniApp との統合を対象としており、uView UI の API ドキュメントは対象外です
• uView UI は Vue 2 と Vue 3 の両方をサポートしているため、適切な構文を使用してください
• コンポーネントを自動インポートするため、必ず pages.json で easycom を設定してください
• プラットフォーム固有のコードには条件付きコンパイル（#ifdef、#endif）を使用してください
• デプロイ前にすべての対象プラットフォーム（H5、ミニプログラム、App）でテストしてください
• UniApp でレスポンシブなサイズを指定するには rpx 単位を使用してください

サンプルとテンプレート

はじめに

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

統合

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

プラットフォーム固有

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

上級者向け

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

テンプレート

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

API リファレンス

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

ベストプラクティス

1. easycom を使用する：uView コンポーネントを自動インポートするため、pages.json で easycom を設定します
2. プラットフォームのテスト：すべての対象プラットフォーム（H5、ミニプログラム、App）でテストします
3. rpx 単位を使用する：UniApp ではレスポンシブなサイズ指定に rpx、固定サイズに px を使用します
4. SCSS のサポート：UniApp プロジェクトで SCSS が正しく設定されていることを確認します
5. Manifest の設定：各プラットフォーム向けに manifest.json を適切に設定します
6. 条件付きコンパイル：プラットフォーム固有のコードには条件付きコンパイルを使用します
7. パフォーマンス：各プラットフォーム固有の要件に合わせて最適化します
8. ナビゲーション：uView コンポーネントとともに UniApp のナビゲーション API を使用します

リソース

• 公式プラグイン：https://ext.dcloud.net.cn/plugin?id=1593
• UniApp ドキュメント：https://uniapp.dcloud.net.cn/
• uView UI：https://www.uviewui.com/

キーワード

uniapp, uview, uview-ui, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异