上司は、既存の管理バックエンド システムをデスクトップにインストール可能なアプリケーションにパッケージ化するという突然のアイデアを思いつきました。そのとき、アプリケーションをパッケージ化するための Electron または Flutter の Webview という 2 つのソリューションが私の頭に浮かびました。比較的言えば、Electron に精通している場合、私はElectron を使うことも検討しましたが、もちろんその後 Flutter を使って実装したバージョンもあり、効果はあまり変わりませんでした。まずは Electron での実装方法を見てみましょう。
準備
プロジェクトの初期化
新しいプロジェクト フォルダー「electron-app」を作成します。コマンド ライン ウィンドウでパスを「electron-app」ディレクトリに切り替えて、初期化コマンドを実行することを忘れないでください。
shell复制代码npm init -y
最新のファイル構造は次のようになり、package.json ファイルが追加されます。
markdown复制代码- electron-app
- package.json
package.jsonをエディタで開きます
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
内部の「メイン」構成に特に注意してください。この構成は、プロジェクトのエントリを指します。対応するファイルは現在、index.js ですが、プロジェクトにはまだ存在しないため、新しいファイルを作成します。
markdown复制代码- electron-app
- index.js
- package.json
Index.js ファイルに次の内容を入力します。
js复制代码// index.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
})
// 全屏
win.maximize()
// 载入网页链接
win.loadURL('https://www.jd.com/')
}
// 应用程序准备好后加载窗口
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
上記のコードでは、createWindow のコンテンツにのみ注意する必要があります。createWindow メソッドは、BrowserWindow を使用してアプリケーション ウィンドウを作成し、Web リンク (JD ホームページ) をロードします。通常、プログラムの起動後に JD デスクトップが表示されるはずです。適用済み。
Electron と @electron-forge/cli に依存関係をインストールします
css复制代码npm install --save-dev electron @electron-forge/cli
インストールが完了したら、package.json のスクリプト構成の変更を続け、元のコンテンツを削除し、開始構成を追加します。electron-forge start コマンドは、@electron-forge/cli がインストールされた後にのみ使用できます。 @vue/cli
json复制代码"scripts": {
"start": "electron-forge start"
},
起動する
shell复制代码npm run start
これで完了です。おめでとうございます。デスクトップ アプリケーションの開発を学習しました。win.loadURL('https://www.jd.com/') のリンクを必要なリンクに置き換えるだけです。
プロジェクトは進行中ですが、解決すべき問題がまだいくつかあります。
- プロジェクトの左上隅にあるアイコンが間違っています
- exe インストール パッケージにパッケージ化するにはどうすればよいですか?
アイコンの変更
アイコンは 2 つの部分に分ける必要があります。1 つは開いているウィンドウの左上隅にあるアイコン、もう 1 つはデスクトップにインストールされているアイコンです。インストールされているアイコンについては後で説明します。左上隅を変更しましょう。初め。
とても簡単で、BrowserWindowのアイコン構成を変更するだけです。
js复制代码// index.js
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
// 左上角的图标
icon: './images/logo.png',
})
ルート ディレクトリに新しい画像フォルダーを作成し、logo.png という名前の画像を配置することを忘れないでください。
パッケージexeインストールパッケージ
exe インストールパッケージの作成には、electron-builder ツールパッケージを使用します。インストールコマンドは次のとおりです。
css复制代码npm install --save-dev electron-builder
package.json を変更し、script コマンドとビルド構成を追加します。
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron-forge start",
"build": "electron-builder --win" // 打包命令
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^6.2.1",
"electron": "^25.4.0",
"electron-builder": "^24.6.3"
},
// `electron-builder`配置
"build": {
"productName": "我的应用", // 安装应用后桌面名称
"directories": {
"output": "out" // 输出的文件目录
},
"win": {
"icon": "./ico/logo.ico", // 安装的图标
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "我的应用"
}
}
}
json ファイルにはコメントを含めることができないことに注意してください。上記のテキストをコピーした後は、必ずコメントを削除してください。
上記のすべてのアイコンは、ファイル ./ico/logo.ico を指します。ico アイコンは実際には、さまざまな形式の画像のコレクションであり、さまざまな画面サイズでの適応に使用されます。もちろん、ここでは詳しく説明しません。 logo.ico ファイルを取得して、インストール可能なパッケージを実装します。
Baidu のキーワード「png を ico に変換」を使用すると、オンライン変換サイトがたくさん表示されます。私は [Convertio - File Converter](https://convertio.co/zh/) を使用し、ロゴを捨てます。ファイルをダウンロードしたら、忘れずに ico ディレクトリに入れてください。
荷造りを始める
arduino复制代码npm run build
完了したら、out ディレクトリを表示します
電子のさらなる使用法について議論することを歓迎します。