uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する方法

Electronのインストール

cnpm 電子をインストール -g

electron-packagerをインストールする

cnpm 電子パッケージャーをインストール -g

uniapp の manifest.json の変更

ここに画像の説明を挿入

H5パッケージ

ここに画像の説明を挿入

H5フォルダにpackage.jsonとmain.jsを作成します。

ここに画像の説明を挿入

新しいpackage.jsonを作成する

{
  "名前" : "アプリ名",
  "バージョン" : "0.1.0",
  「メイン」:「main.js」
}

main.jsを作成する

const {app, BrowserWindow} = require('electron')
定数パス = require('path')
定数 url = require('url')

// ウィンドウオブジェクトへのグローバル参照を保持します。保持しないと、ウィンドウは
// JavaScript オブジェクトがガベージ コレクションされると自動的に閉じられます。
勝たせる

関数createWindow(){
  // ブラウザウィンドウを作成します。
  win = 新しいブラウザウィンドウ({幅: 800, 高さ: 600})

  // アプリの index.html を読み込みます。
  win.loadURL(url.format({
    パス名: path.join(__dirname, 'index.html'),
    プロトコル: 'ファイル:',
    スラッシュ: true
  }))

  // DevTools を開きます。
  // win.webContents.openDevTools()

  // ウィンドウが閉じられたときに発行されます。
  win.on('closed', () => {
    // ウィンドウオブジェクトを参照解除します。通常はウィンドウを格納します。
    // 配列で、アプリがマルチウィンドウをサポートしている場合、これは時間です
    // 対応する要素を削除する必要がある場合。
    勝利 = ゼロ
  })
}

// このメソッドはElectronが終了したときに呼び出されます
// 初期化が完了し、ブラウザ ウィンドウを作成する準備が整いました。
// 一部の API はこのイベントが発生した後にのみ使用できます。
app.on('準備完了', createWindow)

// すべてのウィンドウが閉じられたら終了します。
app.on('ウィンドウがすべて閉じました', () => {
  // macOSではアプリケーションとそのメニューバーでよく使われる
  // ユーザーがCmd + Qで明示的に終了するまでアクティブのままにします
  (process.platform !== 'darwin')の場合{
    アプリ終了()
  }
})

app.on('activate', () => {
  // macOSでは、アプリが終了してもウィンドウを再作成するのが一般的です。
  // ドックアイコンがクリックされ、他のウィンドウは開いていません。
  (勝利 === null)の場合{
    ウィンドウの作成()
  }
})

// このファイルには、アプリ固有のメインプロセスの残りを含めることができます
// コード。別々のファイルに入れて、ここで要求することもできます。

パック

cmd を使用することをお勧めします。PowerShell と git hash の使用時に問題が発生しました。ルート ディレクトリで Shift キーを押しながら右クリックするか、ディレクトリに cd します。

cmdコマンドラインを使用してH5ディレクトリに入り、パッケージ化コマンドを入力します。

electron-packager . 実行ファイル名 --win --out パッケージ化されたフォルダ名 --arch=x64 または 32 ビット --electron-version バージョン番号 (h5 のバージョン番号ではなく、electron のバージョン番号) --overwrite --ignore=node_modules

パッケージ例

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 1.0.0 --overwrite --ignore=node_modules

参照する

https://ext.dcloud.net.cn/plugin?id=2905
https://www.cnblogs.com/shangrao/p/14661884.html

これで、uniapp プロジェクトをデスクトップ アプリケーションとしてパッケージ化する手順に関するこの記事は終了です。より関連性の高い uniapp プロジェクトのパッケージ化コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • uniapp プロジェクトの最適化方法と提案
  • uniapp プロジェクトで MQTT を使用する方法
  • vue+uniappライブ放送プロジェクトに基づいて、uni-appはDouyin / Momoライブ放送ルーム機能を模倣します
  • CentOS 7.2 は uniapp プロジェクトを展開するための nginx Web サーバーを構築します

<<:  VMware15.5でcentos8.1をインストールし、物理メモリが不足する問題に対処する最も完全なチュートリアル

>>:  MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

推薦する

MySQL 5.7.17 winx64 のインストールと設定のチュートリアル

今日、MySQL データベースをコンピューターに再度インストールしました。システムを再インストールす...

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...

VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...

Vue デフォルトスロットの理解とサンプルコード

目次スロットとは何かデフォルトスロットの理解コードスニペット要約するスロットとは何かスロットは、親コ...

JavaScript の基本変数

目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....

クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明

k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...

ウェブデザインの仕事に応募する方法

<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

HTTPプロトコルにおけるステータスコードの意味

暫定的な応答を示し、要求者に操作の続行を要求するステータス コード。コードの説明100 (続行) リ...

Windows 8.1 で MySQL5.7 のルート パスワードを忘れた場合の解決方法

【背景】最近勉強中に非常に恥ずかしいことに遭遇しました。MySQL のパスワードを忘れてしまい、My...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

n 個のコンテナ要素による無限スクロールの実装コード

シナリオ最大 10000 要素のリストを正しくレンダリングする方法。無限ドロップダウン読み込みテクノ...