H5 アプリケーションをスーパーアプリミニアプリとして公開する - SuperApp

スーパーアプリプロダクトの利点を活用して、既存の H5 アプリケーションをミニアプリに迅速に変換し、ユーザーエクスペリエンスと開発効率の両方を向上させます。

重要

このガイドは、H5 シングルページアプリケーションのみに適用されます。以下の手順に従って、シングルページアプリケーションをミニアプリにすばやく変換できます。アプリケーションがマルチページアプリケーションの場合は、React や Vue などの一般的な技術スタックを使用してシングルページアプリケーションに変換するか、「WindVane スキャフォールド」を参照してミニアプリ開発を直接開始することをお勧めします。

コードの変更方法

リクエスト URL の調整

フロントエンドコードでバックエンドにリクエストを行う際に、相対パスを使用している場合は、ホストを含む絶対パスに変更する必要があります。

UI の適応

ヘッダーの適応

画像に示すように、H5 プロジェクトに組み込みのヘッダーがある場合は、ミニアプリシナリオでは非表示にする必要があります。代わりに、JSAPI を呼び出すことによってミニアプリのタイトルを設定する必要があります。

詳細なコード例を以下に示します。

// React: フレームワークに共通のレンダリング ロジックがない場合は、useLayout にカプセル化できます
...
useEffect(() => {
  // ミニアプリかどうかを確認します
  const isMiniprogram = window?.WindVane;
  if (isMiniprogram) {
    // ナビゲーションバーを設定します
    const params = {
      title: "{{title}}",
      titleColor: '#000000',
      barStyle: 'normal',
      backgroundColor: '#FFFFFFFF', // rgba
      hideBackButton: 'false',
      theme: 'dark'
    };
    window?.WindVane.call('WVNavigationBar', 'update', params, function() {
      // 成功
    }, function(e: any) {
      // 失敗
    });
  }
}, [])
...

ページナビゲーションの適応

内部アプリケーションページへの移動

たとえば、https://superapp.demos.com/docment は H5 シングルページアプリケーションであり、https://superapp.demos.com/console は別の H5 シングルページアプリケーションです。Web API に基づくナビゲーションの場合、window.location.href を使用するコードを変更する必要があります。2 つの内部アプリケーションを 2 つのミニアプリとして公開し、次のコードで処理します。

window.WindVane.call(
  "wv",
  "navigateToMiniApp",
  {
    appId: appId // 現在のミニアプリの ID
  },
  function () {
    console.log('ミニアプリを正常に開きました');
  },
  function (error) {
    console.log('ミニアプリを開くエラー', error);
  }
 );

外部アプリケーションページへの移動

デフォルトでは、コンテナー SDK は、ミニアプリ内で Web サイト (例: https://www.alibabacloud.com) を開くなど、外部 URL へのナビゲーションをインターセプトしません。以下に示すように、Web のナビゲーションメソッドをそのまま使用できます。

window.location.href = "https://www.alibabacloud.com"

重要

クライアントアプリがインターセプトロジックを実装している場合、ナビゲーションが有効かどうかは、特定の実装によって異なります。

プロジェクトの適応

重要

以下は必須要件です。準拠しないと、ミニアプリの読み込みエラーが発生する可能性があります。

ルーティングはハッシュベースである必要があります

さまざまな技術アーキテクチャには、ルーティングモードを設定する独自の方法があるため、統一された変更方法はありません。ご自身で適応させる必要があります。

ハッシュルーティング: https://superapp.demos.com/#/home (正しい)

履歴ルーティング: https://superapp.demos.com/home (正しくない)

パッケージ化されたディレクトリには index.html が含まれている必要があります

以下に示すように:

VScode プラグインの依存関係 (コンソールからアップロードする場合は無視できます)

ルートディレクトリの package.json には version フィールドが含まれている必要があります。

パッケージ実行コマンドの名前は build である必要があります。つまり、パッケージは npm run build でビルドできる必要があります。

デフォルトのパッケージングターゲットディレクトリ名は dist である必要があります。プロジェクトパッケージのターゲットディレクトリが dist でない場合は、VScode プラグイン設定でパッケージングパス名を設定する必要があります。

JSAPI SDK の導入

シングルページアプリケーションの index.html に、以下のように windvane.js を含めます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="telephone=no" name="format-detection">
<link rel="shortcut icon" href="/favicon.svg">
...
<script src="https://g.alicdn.com/mtb/lib-windvane/3.0.0/windvane.js"></script>
...
...
</head>
</html>

ミニアプリの公開方法

コンソールからアップロードする

下の画像に示すように、すべてのパッケージ化された静的リソースファイルを ZIP ファイルに圧縮し、スーパーアプリプラットフォームにアップロードして公開します。

IDE からアップロードする

「WindWane ミニアプリをパッケージ化およびリリースする方法」

「Uniapp ミニアプリをパッケージ化およびリリースする方法」