uni-appの実践的なコミュニティデートのご紹介：プロジェクトと環境構築

推奨 (無料): ユニアプリ開発チュートリアル

記事目次

• まえがき
• 1. プロジェクトの紹介
• 2. 環境設定とプロジェクトの作成
• • 1. 開発環境構築
  • #2. ユニアプリプロジェクトの作成
#3. マルチターミナルデバッグ環境構築
• 1. Android 携帯電話のデバッグ構成
  • #2. iOS 実デバイスのデバッグ構成
  ##3. WeChat アプレットのデバッグ構成
  • ##4. Alipay アプレットのデバッグ構成
  • 概要
• まえがき

この記事では主にプロジェクトの概要と環境構築について紹介します。 uni-app Dating APPをベースに開発されたコミュニティ; 環境構築は主にHbuilderXに基づいており、プロジェクト作成後にテストと実行が可能; 同時にマルチプラットフォームに対応するために、 Android、iOS、WeChat アプレット、Alipay アプレットなどを含むマルチターミナル デバッグ環境を構築します。

1. プロジェクトの紹介

このプロジェクトは、## を達成するコミュニティ デート アプリの実用的な開発である

uni-app に基づいています。 # ワンタイム開発、マルチターミナル公開、Android アプリ、iOS アプリ、WeChat アプレット、Alipay アプレットおよびその他のプラットフォームに同時に公開され、バックエンド インターフェイスは Python Django を使用して実装されます。

このプロジェクトには、投稿モジュール、トピック モジュール、検索モジュール、メンバーシップ モジュール、チャット モジュール、広告モジュールなどのモジュールが含まれており、最終的に豊富な機能と美しいインターフェイスを実現します。インターフェイスの一部は次のとおりです:

動的デモンストレーションの効果は次のとおりです:

uni-appコミュニティ コミュニティ デート APP 開発デモンストレーション

1. 開発環境セットアップ

コアこのプロジェクトのエディター ツールは HBuilderX で、公式 Web サイト https://www.dcloud.io/hbuilderx.html からダウンロードでき、必要なシステムとバージョンを選択してダウンロードするだけです。

ダウンロード後、インストールディレクトリに解凍し、解凍したディレクトリ内のHBuilderX.exeをクリックしてご利用ください。

開くと、インターフェイスは次のようになります:

開発をスピードアップするために、いくつかのプラグインをインストールできます。

ナビゲーション バーをクリックします。 → ツール プラグイン →

をインストールして必要なプラグインのインストールを選択します。HBuilderX は、アプリの実機実行、ユニアプリ アプリのデバッグなど、いくつかの
コア プラグイン をデフォルトでインストールしています。このようなプラグインは、プラグイン マーケットからのインストールをサポートしていません。

scss/sass コンパイルなどのインストールを選択することもできます。DCloud プラグイン マーケット https://ext.dcloud.net.cn/?cat1=1&cat2=11&orderBy=TotalDownload で選択してインストールできますHBuilderX を使用してプラグインをインポートします。

2. ユニアプリ プロジェクトの作成
HBuilderX を使用して初期プロジェクトを作成し、次のように Community_Dating という名前のユニアプリを選択します。

#作成後はデバッグと実行が可能で、APPや小さなプログラムなどの複数の端末で実行できます。 Android APP デバッグを例に挙げます。実機テスト

を選択した場合は、事前に電話を接続し、USB デバッグをオンにする必要があります。プロセスは次のとおりです:

明らかに成功しました。Android 側で APP を実行します。

3. 複数端末デバッグ環境構築

1. Android 端末デバッグ設定

実機デバッグ画面が表示されます実際の動作におけるアプリのステータスを最大限に活用します。 Huawei Nova2 を例に挙げると、USB データ ケーブルを携帯電話に接続した後、次のようにファイルを転送するための接続方法を変更する必要があります。開発者モードの場合は、一度開くには、バージョン番号を複数回クリックして、USB デバッグを開く必要があります。プロセスは次のとおりです。追加したばかりの実際のデバイスは、次のように実行オプションに追加されます。

この時点でクリックしてデバッグできます。このプロセスは、「2. 環境設定とプロジェクトの作成」でアプリを実行するのと同じです。
同時に、次のように、APP のリアルタイム更新とプロジェクト コード変更時の動的なデバッグもサポートしています。

ご覧のとおり、動的なコンパイルと更新は次のとおりです。実装されました。

2. iOS 実機デバッグ設定

データケーブルを使用して iPhone に接続し、画面投影用の iTunes をインストールします。
デバッグ中に、次のプロンプトが表示される場合があります:

つまり、信頼できないエンタープライズ レベルの開発者 を設定する必要があります。 設定を入力します →一般 → デバイス管理 → Digital Heaven (Beijing) Internet... → 「Digital Heaven (Beijing) Internet & Te...」を信頼し、デバッグのためにアプリケーションを入力すると、APP を正常に実行できます。

3. WeChat アプレットのデバッグ構成

WeChat アプレットをデバッグに使用する場合は、最初に WeChat 開発者ツールをインストールする必要があります。https://mp.weixin を直接クリックできます。 qq .com/debug/wxadoc/dev/devtools/download.html インストールに適切なシステムとバージョンを選択します。
デバッグの前に、次の 2 つの構成手順が必要です:
(1) WeChat 開発の構成開発者ツールのインストール パス;
(2) WeChat 開発者ツールがサービス ポートを開きます

詳細については、https://blog.csdn.net/CUFEECR/article の後半を参照してください。 /details/111088889.

実行中のプロセスは次のとおりです:

実機でプレビューおよびデバッグすることもできます。

4. Alipay アプレットのデバッグ構成

Alipay ミニ プログラムを使用してデバッグする前に、ミニ プログラム開発者ツールをインストールする必要があります。 /download を使用して、適切なバージョンとシステムを選択し、インストールします。
インストール後、次のように、Alipay Mini Program Developer Tool のパスを設定する必要があります:

現時点では、次のように、Alipay Mini Program Developer Tool を実行します:

Alipay アプレットが実行され、動的コンパイルが実装されていることがわかります。開発者ツールを使用すると、次のように実機でプレビューすることもできます:

同じプレビュー効果が得られました。

Vue.js を使用してクロスプラットフォーム アプリケーションを開発するためのフロントエンド フレームワークとして、uni-app は、iOS、Android、WeChat アプレットなどの複数のプラットフォームにコンパイルできる Vue.js コードのセットを作成できます。など, 複数端末の共有を実現, 開発コストと学習コストを大幅に削減, 開発を加速. uni-app を使用してコミュニティ デート クラスを開発する APP は、コードのセットを複数のプラットフォームに公開する効果も迅速に達成できます.

以上がuni-appの実践的なコミュニティデートのご紹介：プロジェクトと環境構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。