uniappクイックスタートシリーズ(1) - 概要と基礎知識

第 3 章: Douyin ミニプログラムページの開発

第 1 章: 概要と基本

第 1 章: 概要と基本

1.1 uniapp の概要

1.1.1 ユニアプリとは何ですか?

uniapp は、Vue.js フレームワークをベースにしたクロスプラットフォームアプリケーション開発フレームワークで、開発者は 1 セットのコードを使用して複数のプラットフォーム (WeChat ミニプログラム、Alipay ミニプログラム、 Douyin ミニプログラムなど) のアプリケーション。

以前は、異なるプラットフォーム向けのアプリケーションを開発するには、異なるテクノロジーやツールを使用する必要がありましたが、uniapp の登場により、開発者はクロスプラットフォーム開発をより効率的に行うことができます。

このシリーズのコラムでは、主に WeChat ミニプログラムをデモンストレーションプラットフォームとして使用するため、関連する例は通常、WeChat ミニプログラムに基づいています。

1.1.2 ユニアプリを選ぶ理由は何ですか?

クロスプラットフォーム: uniapp を使用すると、複数のプラットフォーム用のアプリケーションを同時に開発できるため、異なるプラットフォームの開発テクノロジを再学習して適応させる必要がなくなります。
使いやすさ: uniapp の構文とコンポーネントは Vue.js に非常に似ているため、すでに Vue.js に慣れている場合は、uniapp を簡単に使い始めることができます。
優れたパフォーマンス: uniapp は高性能レンダリングエンジンを使用し、アプリケーションの実行効率とスムーズさを確保するためにさまざまな最適化戦略も実装しています。

1.1.3 uniappとWeChatミニプログラムの関係

uniapp は WeChat ミニプログラムの開発をサポートし、uniapp によって開発されたアプリケーションが WeChat ミニプログラム上で実行できるようにするための豊富な API とコンポーネントを提供します。

uniapp を通じて、Vue.js の機能と利点を最大限に活用して、豊富な機能と優れたユーザーエクスペリエンスを備えた WeChat ミニプログラムを迅速に開発できます。

1.2 HBuilderX の導入とインストール

1.2.1 HBuilderX とは何ですか?

HBuilderX は、uniapp 開発者向けに特別に設計された統合開発環境 (IDE) です。コード編集、デバッグ、コンパイル、パッケージ化など、開発効率を大幅に向上させる豊富な開発ツールと機能を提供します。

1.2.2 HBuilderXのインストール

1.2.2.1 Windows システム

Windows システムでは、次の手順で HBuilderX をインストールできます。

DCloud 公式 Web サイト (https://www.dcloud.io/hbuilderx.html) にアクセスしてください。
公式サイトからHBuilderXのインストールパッケージ（exe形式）をダウンロードします。
インストールパッケージをダブルクリックし、インストールウィザードに従ってインストールプロセスを完了します。

1.2.2.2 macOS システム

macOS システムでは、次の手順で HBuilderX をインストールできます。

DCloud 公式 Web サイト (https://www.dcloud.io/hbuilderx.html) にアクセスしてください。
HBuilderX インストールパッケージ（dmg 形式）を公式 Web サイトからダウンロードします。
インストールパッケージをダブルクリックし、HBuilderX をポップアップウィンドウの「アプリケーション」フォルダーにドラッグして、インストールプロセスを完了します。

1.3 uniappプロジェクトの作成と構成

1.3.1 uniappプロジェクトの作成

HBuilderX では、次の手順を使用して uniapp プロジェクトを作成できます。

HBuilderX を開きます。
メニューバーの「ファイル」－「新規作成」－「プロジェクト」をクリックします。
新しいプロジェクトウィンドウで、「uni-app」タイプを選択し、プロジェクトの名前とパスを入力して、「作成」ボタンをクリックします。
上記のテストプロジェクトを作成したときに、GitCode へのアップロードを確認しました。この機能には、 Little Turtleサポートのインストールが必要です。必要に応じて、前面の青いジャンプリンクからダウンロードできます。

1.3.2 uniappプロジェクトの構成

uniapp プロジェクトを作成した後、プロジェクトが正常に実行できることを確認するために、いくつかのプロジェクト構成を実行する必要があります。

1.3.2.1 AppIDの構成

uniapp では、各プラットフォームでアプリケーションを識別するために、各アプレットに独立した AppID が必要です。

HBuilderX では、次の手順で AppID を構成できます。

プロジェクトのルートディレクトリでmanifest.jsonファイルを見つけて開きます。
manifest.jsonファイル内で、mp-weixinノードの下のフィールドを見つけますappid。
appidフィールドの値を WeChat アプレットの AppID に変更します。

1.3.2.2 基本ライブラリと動作環境の設定

各ミニプログラムプラットフォームには独自の基本ライブラリバージョン要件と実行環境要件があり、これらの要件を uniapp プロジェクトに設定する必要があります。

HBuilderX では、次の手順で構成できます。

プロジェクトのルートディレクトリでmanifest.jsonファイルを見つけて開きます。
ファイル内でmanifest.json、各プラットフォームノードの下のフィールドminPlatformVersionと、app-plusそのノードの下のフィールドを見つけますappid。
プラットフォームと動作環境の要件に従って、対応するフィールドの値を変更します。

1.4 uniapp のディレクトリ構造の分析

uniapp プロジェクトのディレクトリ構造は非常に明確で、各フォルダーには特定の目的があります。

一般的な uniapp プロジェクトのディレクトリ構造は次のとおりです。

├── components    // 组件目录
├── pages         // 页面目录
├── static        // 静态资源目录
├── uview-ui      // uView UI组件库目录（可选，根据需要自行添加）
├── App.vue       // 应用根组件
├── main.js       // 应用入口文件
└── manifest.json // 项目配置文件

componentsこのフォルダーは、uniapp プロジェクトのコンポーネントを保存するために使用されます。
pagesこのフォルダーは、uniapp プロジェクトのページを保存するために使用されます。
staticこのフォルダーは、画像、フォントなどの uniapp プロジェクトの静的リソースを保存するために使用されます。
uview-uiこのフォルダーは uView UI コンポーネントライブラリのディレクトリであり、必要に応じて追加または削除できます。
App.vueこれはアプリケーションのルートコンポーネントであり、アプリケーション全体のレイアウトとロジックはこのコンポーネントで定義されます。
main.jsこれはアプリケーションのエントリファイルであり、主に vue インスタンスの初期化とグローバル設定の構成に使用されます。
manifest.jsonこれは、uniapp の構成ファイルであり、プロジェクトの基本情報と各プラットフォームの具体的な構成を構成するために使用されます。

1.5 ユニアプリのライフサイクル

uniapp のライフサイクルは Vue.js のライフサイクルと非常に似ており、異なるライフサイクルコールバック関数が異なる段階でトリガーされます。

以下は、uniapp の一般的に使用されるライフサイクルコールバック関数です。

onLaunch: ミニプログラムの初期化が完了するとトリガーされ、グローバルに 1 回だけトリガーされます。
onShow: アプレットが開始されるか、バックグラウンドからフォアグラウンドに表示されるときにトリガーされます。
onHide: アプレットがフォアグラウンドからバックグラウンドに入るときにトリガーされます。
onError: アプレットでエラーが発生したときにトリガーされます。
onPageNotFound: ミニプログラムページが存在しない場合にトリガーされます。
onUniNViewMessage: uniapp ページ間で通信するときにトリガーされます。

プロジェクトのニーズを満たすために、これらのライフサイクルに対応するロジックを作成できます。

1.6 uniapp 構文と基本コンポーネントの概要

1.6.1 uniapp 構文

uniapp の構文は Vue.js に非常に似ているため、すでに Vue.js に慣れている場合は、uniapp を簡単に使い始めることができます。

以下は、uniapp で一般的に使用される構文です。

{ {}}: バインドされたプロパティまたは式を補間するために使用されます。
v-bind: プロパティを動的にバインドするために使用されます。
v-ifおよびv-show: 要素の表示と非表示を制御するために使用されます。
v-for: レンダリングリストをループするために使用されます。
v-on: イベントをバインドするために使用されます。
v-model: 双方向のデータバインディングに使用されます。

1.6.2 uniapp の基本コンポーネントの概要

uniapp は、アプリケーションインターフェイスを迅速に構築するための豊富な基本コンポーネントを提供します。

以下は、uniapp で一般的に使用される基本コンポーネントです。

view: コンテンツを表示するためのコンテナです。
text: テキストコンテンツを表示するために使用されます。
image：画像を表示するときに使用します。
button: ボタンを作成するために使用されます。
input: ユーザー入力を受け取るために使用されます。
scroll-view: スクロール可能なビューコンテナ。
swiper: カルーセル画像の作成に使用されます。
picker: 日付選択、時間選択などのセレクターに使用されます。

アプリケーションのニーズに応じて適切なコンポーネントを選択し、uniapp の構文に基づいて開発できます。

サンプルコード:

<template>
  <view>
    <text>Hello, uniapp!</text>
    <button @click="handleClick">Click me!</button>
  </view>
</template>

<script>
export default {
      
      
  methods: {
      
      
    handleClick() {
      
      
      uni.showToast({
      
      
        title: 'Hello, World!',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
view {
      
      
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
text {
      
      
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}
button {
      
      
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  outline: none;
  border: none;
  cursor: pointer;
}
</style>

この例ではview、、text、などの基本コンポーネントを使用しbutton、ボタンをクリックしてプロンプトボックスを表示する機能を uniapp の構文とイベントバインディングによって実装します。

1.7 ハローワールド

pagesプロジェクトビューでフォルダーを見つけて展開し、index.vueファイルをダブルクリックして開きます。新しいプロジェクトに Hello プロジェクトが自動的に作成されたことがわかります。Hello の後に World を追加し、ツールバーの [実行] ボタンをクリックします。

または、「実行」をクリックしてミニプログラムシミュレーターを実行し、「WeChat 開発者ツール」を選択します。WeChat 開発者ツールをインストールしていない場合は、ここをクリックしてダウンロードできます。成功した操作インターフェイスは次のとおりです。