uniapp を使用してマルチターミナル アプリケーションを開発およびパッケージ化するための完全なガイド

1. ユニアプリプロジェクトの紹介

uni-app を使用して、マルチターミナル プロジェクトを開発します。一連のコードで、小さなプログラム、h5 および app を同時にパッケージ化できます。uni-app は、HBuilderX ビジュアル インターフェイスと vue-cli コマンド ラインを介してプロジェクトを作成する 2 つの方法をサポートしています。次のとおりです。サンプル プロジェクトは HBuilderX ビジュアライゼーションを使用します。インターフェイスが作成され、cli プロジェクトが uni ドキュメントを参照できるようになり、ほとんどのプロセスは共通です。

プロジェクトの構造:

├── common           api文件  
├── components       公用组件  
├── libs             公共方法  
├── pages            页面  
├── static           本地静态资源,注意:静态资源只能存放于此  
├── store            状态管理  
├── styles           公共样式  
├── config.js        配置文件  
├── manifest.json    配置应用名称、appid、logo、版本等打包信息,详见  
├── pages.json       配置页面路由、导航条、选项卡等页面类信息  
└── unpackage  
    ├── res          图标、启动页  
    ├── cert         APP证书文件  
    └── dist         打包的文件 

ソース コードを取得するには、まず config.js 内の API リクエスト インターフェイス アドレスを独自のリクエスト ドメイン名に変更し、次に、manifest.json 内の各プラットフォームの appid を独自のアプレットの appid に変更します。

ebb16202308141532297782.png

関連する開発ドキュメント:

  1. ビュー
  2. 睡眠アプリ
  3. HBuilderX
  4. スタイラス

ff7a6202308141532435775.png

2. 開発者アカウントを登録し、アプリケーションを作成する

開発を開始する前に、uni の開発者バックグラウンドにアクセスしてアカウントを登録し、登録アドレス Developer Centerにログインして、そこで独自のアプリケーションを作成する必要があります。

8c3be202308141532531367.png

3. 開発ツールHBuilderXをインストールする

HBuilderX (HX と呼ばれます) は、エディタのように軽く、IDE のように強力な統合バージョンです。vscode と小さなプログラム開発ツールを組み合わせたようなものです。「実行」と「リリース」があります。上部のメニュー バーの「」メニューをクリックします。直接クリックします: 実行— — 内蔵ブラウザーを実行し、ブラウザーと同様に直接デバッグできます。

アプリを公開する場合、HBuilderXを使用する必要があります。他の開発ツールではアプリを公開できませんが、H5やさまざまな小さなプログラムを公開することができます。アプリを開発する必要がある場合は、まず HBuilderX で実行し、次に他のエディタでコードを変更して保存します。コードが変更された後、携帯電話のドックに自動的に同期されます。HBuilderX のダウンロード アドレス: HBuilderX-efficient geek skill

4. プロジェクトを作成して実行する

まず、一般的に使用されるプラグインをいくつかインストールします。

  • 内蔵ブラウザ
  • uni-app (Vue2) コンパイル
  • uni-app(Vue3)编译
  • 実機上で動作するアプリ
  • アプリのクラウドパッケージ化
  • scss/sass コンパイル
  • スタイラスコンパイル

a7eac202308141533056496.png

プロジェクトを作成する

HBuilderX のトップ メニューから新しいプロジェクトを作成します: [ファイル] - [新規] - [プロジェクト]、既存のプロジェクトをインポートします: [ファイル] - [インポート] - [元...]

プロジェクトを実行する

HBuilderX のトップ メニューからプロジェクトを実行します: [実行] - [実行...]。開発段階で最初に選択できます: [内蔵ブラウザで実行]。xx プラグインが見つからないというエラーが発生した場合、プロンプトに従って対応するプラグインをインストールし、再度実行するだけです。

b5d7a202308141533158103.png

5. 小さなプログラムと H5 パッケージ化

各プラットフォームの構成は、manifest.json で直接構成することも、HBuilderX 開発ツールで manifest.json ファイルを選択すると、構成を直接選択するためのグラフィカル インターフェイスが右側に表示されます。

c366b202308141533269616.png

まずそれを実行し、[リリース] - [ミニ プログラム/Web サイト] - [ミニ プログラム/Web サイト名/appid/ドメイン名を設定] をクリックします。パッケージ化が成功すると、dist - build フォルダー (対応するdist - dev ディレクトリ内の platform ファイルは、各プラットフォームのファイルを実行しています)

e14ec202308141533353993.png

6. Android アプリケーションのパッケージ化

1. [リリース] - [ネイティブ アプリ] - [クラウド パッケージング] をクリックします。

2. unpackage/cert ディレクトリ内の README.md の指示に従って次のように入力します。

Android パッケージ名、証明書のエイリアス、証明書の秘密キーのパスワード、証明書ファイルの選択 (参照ボタンを直接クリックし、アンパッケージ/証明書ディレクトリを選択し、Android 開発証明書を生成します。この記事の最後にある手順を参照してください)

3. 「パック」ボタンをクリックします。

b31ac202308141533454554.png

7. IOS アプリケーションのパッケージ化

1. [リリース] - [ネイティブ アプリ] - [クラウド パッケージング] をクリックします。

2. unpackage/cert ディレクトリ内の README.md の指示に従って次のように入力します。

バンドル ID (AppID)、証明書秘密キーのパスワード、証明書プロファイル ファイル、および秘密キー証明書 (参照ボタンを直接クリックして、アンパッケージ/証明書ディレクトリを選択します)

3. 「パック」ボタンをクリックします。

8269b20230814153356121.png

クラウド パッケージを使用してパッケージ ボタンをクリックした後、数分から半日以上待つ必要があります。パッケージが正常にパッケージ化されると、アプリ インストール ファイルのダウンロード アドレスがコンソールに出力されます:

1808a202308141534061914.png

Android: apk ファイル、「ディレクトリを開く」を直接クリックすると、生成された apk ファイルは unpackage/release/apk フォルダーにあります

IOS: ipa ファイル。「ダウンロード アドレス」を直接クリックして、リモートからローカルにダウンロードします。

包装証明書関連情報:

Android プラットフォームのクラウド パッケージング証明書の手順

Android プラットフォームのクラウド パッケージ化 - DCloud 公開証明書 (DCloud 旧バージョン証明書)

Android プラットフォーム署名証明書 (.keystore) 生成ガイド

iOS 証明書 (.p12) および説明ファイル (.mobileprovision) アプリケーション

8. リリースしてオンラインにします

1. 小さなプログラム

アプレット開発者ツールを直接使用して、dist-build フォルダーの下にある対応するディレクトリ (WeChat アプレットなど) をインポートします: dist/build/mp-weixin

2、H5

Web サイトと同様に、最終的にパッケージ化された H5 ファイルをオンラインでデプロイします: dist/build/h5

3、アンドロイド

  • 最終的に生成された apk ファイルは、チャット ツールを使用して Android スマートフォンに直接送信し、インストールして使用できます。
  • 主要な Android アプリケーション マーケットにアカウントを登録し、ユーザーがダウンロードできるようにアプリケーション マーケットにアカウントをアップロードするため
  • 自分でリリースページを開発し、プロジェクトに Android APK を入れて、ユーザーがクリックして携帯電話に直接ダウンロードすることもできます。デバイスが iOS の場合は、アプリストアのダウンロード アドレスを直接判断してジャンプすることもできます

4、iOS

①正式版

公式iOSアプリはApp Storeからのみダウンロードでき、ダウンロードして使用するには、まずAppleの開発者アカウントを登録し、各種アプリ情報を入力し、ipaファイルをアップロードしてレビューに合格する必要があります。

109fc202308141534258794.png

②テスト版

ios-app をテストするときは、ipa ファイルを Dandelion にアップロードします: Dandelion-Free and Unlimited App Internal Test Hosting Platform | iOS | Android Android | 内部テスト ホスティング | 内部テスト配布 | アプリケーション内部テスト

認定された Apple 携帯電話を使用して QR コードをスキャンし、Safari ブラウザで開いて直接ダウンロードしてインストールするか、Safari ブラウザに「ダウンロード アドレス」を直接入力します。

添付ファイル: Windows で Android 開発証明書を生成する

Android プラットフォームは、apk アプリケーションをパッケージ化してリリースします。このアプリケーションには、開発者の ID を示すデジタル証明書 (.keystore ファイル) で署名する必要があります。Android 証明書の生成はセルフサービスで無料であり、承認は必要ありませんまたは支払い。

JRE 環境で keytool コマンドを使用して生成できます。Windows プラットフォームで証明書を生成する方法は次のとおりです。

1. JRE環境をインストールする

jre インストール パッケージは、Oracle 公式 Web サイトからダウンロードできます: https://www.oracle.com/technetwork/java/javase/downloads/index.html (後で証明書を生成するときに使用するインストール パスを覚えておいてください)

2. コマンドライン (cmd) を開き、まず生成されるディレクトリに切り替えます。

D ディスクのルート ディレクトリに入力を直接生成します。

d:

コピー

バッシュコピー

3. JRE インストール パスをシステム環境変数に追加します。

私のJREはDドライブ「D:\Programs\jre\bin」にインストールされています

set PATH=%PATH%;"D:\Programs\jre\bin"

コピー

バッシュコピー

ここでインストール パスを間違って書かないように注意してください。最初のパスのプログラムの s を失ってから、「keytool は内部コマンドでも外部コマンドでも、実行可能なプログラムでもありません」というエラーが報告され続けました。

4. keytool -genkey コマンドを使用して証明書を生成します。

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore

コピー

バッシュコピー

  • testalias: 証明書のエイリアスです。設定したい文字に変更できます。英語の文字と数字を使用することをお勧めします。
  • android.keystore: は証明書ファイルの名前です。設定したいファイル名に変更することも、完全なファイル パスを指定することもできます。
  • 36500: は証明書の有効期間です。有効期間 100 年を意味します。単位は日です。証明書の有効期限を避けるために、より長い時間を設定することをお勧めします。

11792202308141534512118.png

プロンプトに従って情報を入力すると、D ドライブのルート ディレクトリに android.keystore ファイルが生成され、このファイルを使用して Android アプリを直接パッケージ化できます。

おすすめ

転載: blog.csdn.net/weixin_64051447/article/details/132301043