UniApp (Vue3 + TypeScript) 入門

1. プロジェクトのセットアップ

1.1 プロジェクトの作成と起動

# HBuilderXでの開発を推奨します
# sass、TypeScriptなどの必要なプラグインは自動的にインストールされます
# 注意: Viteは現在WeChatミニアプリをサポートしておらず、Vue3のテンプレートは複数ルートタグをサポートしていません
npx degit dcloudio/uni-preset-vue#vite-ts project-name
npm install
npm run dev

1.2 コードフォーマット設定

開発環境の設定を調整します。

• インデントを2スペースに設定: ツール → 設定 → 一般設定 → タブサイズ: 2
• import文の波括弧を折り返さない: ツール → 設定 → プラグイン設定 → JSBeautifyルールのカスタマイズ → "brace_style": "collapse,preserve-inline"

2. 主要な概念

2.1 基本規約

• ページファイルはVueの単一ファイルコンポーネント規約に従います。
• コンポーネントタグはミニアプリ規約に近いです。
• APIインターフェースはWeChatミニアプリ規約に近いです。
• データバインディングとイベント処理はVue.js規約を使用します。

2.2 条件付きコンパイル

プラットフォーム固有のコードを記述するための構文です。

#ifdef APP-PLUS
// コード
#endif

#ifndef H5
// コード
#endif

#ifdef H5 || MP-WEIXIN
// コード
#endif

2.3 プロジェクト構造

2.4 テンプレート構文

2.4.1 ディレクティブ

• v-bind: :に省略可能。コンポーネントの属性をデータ変数にバインドします (dataオプションで定義、関数形式を推奨)。式を使用する場合はv-bindが必要です。
• v-on: @に省略可能。イベントをハンドラー関数にバインドします。
• v-model: 双方向データバインディングを実装します。
• v-if: 条件付きレンダリング。要素のマウント/アンマウントを制御します。
• v-show: 条件付き表示。CSSのdisplayプロパティを制御します。
• v-for: リストのレンダリングを行います。

2.4.2 タグマッピング

2.4.3 単位

WeChatミニアプリの単位であるrpx (レスポンシブピクセル) を使用できます。基準は画面幅750rpxです。

2.4.4 コンポーネント例

<template>
  <view class="container">
    <text class="title-text">{{ message }}</text>
    <button @click="handleClick">クリック</button>
  </view>
</template>

<script lang="ts">
import { formatTimestamp } from "@/utils/helpers";
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Welcome');

    const handleClick = () => {
      console.log(message.value = formatTimestamp(Date.now())));
    };

    return {
      message,
      handleClick
    };
  }
});
</script>

<style lang="scss" scoped>
.container {
  width: 375rpx;
}

.title-text {
  // uni.scssグローバルスタイルファイルは自動インポートされます
  color: $uni-color-primary;
}
</style>

2.4.5 カスタムコンポーネント

カスタムコンポーネントはcomponentsディレクトリに配置します。グローバル登録は不要です。Vue3で推奨される:deep()セレクタを使用してください。

// main.js 例
import App from './App';
import { createSSRApp } from 'vue';

export function initializeApp() {
  const application = createSSRApp(App);
  return {
    application
  };
}

3. ライフサイクル

3.1 アプリケーションライフサイクル (App.vue)

export default {
  // アプリケーション初期化完了時に1回だけ実行
  onLaunch: function() {
    console.log('Application Launched');
  },
  // アプリケーションが表示される時、またはバックグラウンドからフォアグラウンドに戻る時に実行
  onShow: function() {
    console.log('Application Shown');
  },
  // アプリケーションが非表示になる時、またはフォアグラウンドからバックグラウンドに移る時に実行
  onHide: function() {
    console.log('Application Hidden');
  }
};

3.2 ページライフサイクル (pagesディレクトリ)

import { defineComponent } from 'vue';

export default defineComponent({
  // ページ読み込み時
  onLoad() {
    console.log("Page Loaded");
  },
  // ページ初回レンダリング完了時
  onReady() {
    console.log("Page Ready");
  },
  // ページ表示時
  onShow() {
    console.log("Page Shown");
  },
  // ページ非表示時
  onHide() {
    console.log("Page Hidden");
  },
  // ページアンロード時
  onUnload() {
    console.log("Page Unloaded");
  }
});

3.3 コンポーネントライフサイクル (componentsディレクトリ)

Vue3の標準的なコンポーネントライフサイクルフック (setup, onMounted, onUpdated, onUnmounted など) を使用します。